LoginSignup
0

baserCMSのショートコード(3)応用(メールフォーム)

Last updated at Posted at 2023-06-30

baserCMSショートコードのテクニック

baserCMS4系(公式サイト: https://basercms.net/ )のショートコードの使い方は
baserCMSのショートコード(1)基本
baserCMSのショートコード(2)小技
をお読みください。

この記事で紹介する内容

前回紹介したショートコードの小技を使って、固定ページやブログ記事の途中にメールフォームを呼び出してみたいと思います。

想定している対象者

baserCMSを使ってウェブサイトを作成している人(作成しようとしている人)
ある程度テーマファイルを編集することができる人
※elementファイル内で非同期でメールフォームを呼び出すため、ある程度jQueryなどの知識があったほうが良いです。

準備(前回と同様です)

ショートコードを設定ファイルへ記述
ドキュメントルート/app/Config/setting.php
記述内容

$config['BcShortCode']['BcBaser'] = ['BcBaser.BcBaser.getElement'];

上記の準備ができたら、
呼び出したいElementsファイルを作成します。
今回はメールフォーム呼び出しなので、わかりやすいようにform.phpとしましたが、別に他のファイル名でも構いません。
ドキュメントルート/theme/使用中のテーマ/Elements/form.php

form.phpの記述
(jQueryがサイト内に読み込まれていることが前提です。)

<script>
	$(function () {
		$.ajax({
			cache: false,
			type: 'GET',
			datatype:'html',
			url: "/contact/",
			data: '',
			success: function(result) {
				$('#formIn').html(result);
				if ("efo" in window) {
					window.efo();
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				console.log('Error : ' + errorThrown);
			}
		});
	});
</script>
<div id="form" style="display: block; margin-top:-100px; padding-top:100px; height: 0;"> </div>
<section id="formIn"></section>

(今回は「contact」というbaserCMS内に予め作っておいたメールフォームを呼び出します)
上記の準備ができたら、ブログ記事・固定ページ編集欄に
[BcBaser.getElement form]
と記載し、保存します。
image.png
すると、公開記事側では
image.png
こんな具合でメールフォームが表示されるようになります。

※メールの入力内容を確認するために確認ボタンを押すと、読み込み元のメールフォームの確認画面へとページ遷移します。

一般的には、ブログ記事の途中にメールフォームへのリンクボタンなどを記述することが多いですが、この方法を使うと、メールフォームにたどり着くまでのクリック数が少なくなり、コンバージョンの改善につながる可能性もあります。

また、ここで作成したメールフォーム用のエレメントファイルは

<?php $this->BcBaser->element('form);?> 

の記述で、テーマファイルのどこからでも呼び出せるため、使い回しが可能です。

難易度は上がりますが、使いこなせば結構便利なので、ぜひチャレンジしてみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0