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]
と記載し、保存します。
すると、公開記事側では
こんな具合でメールフォームが表示されるようになります。
※メールの入力内容を確認するために確認ボタンを押すと、読み込み元のメールフォームの確認画面へとページ遷移します。
一般的には、ブログ記事の途中にメールフォームへのリンクボタンなどを記述することが多いですが、この方法を使うと、メールフォームにたどり着くまでのクリック数が少なくなり、コンバージョンの改善につながる可能性もあります。
また、ここで作成したメールフォーム用のエレメントファイルは
<?php $this->BcBaser->element('form);?>
の記述で、テーマファイルのどこからでも呼び出せるため、使い回しが可能です。
難易度は上がりますが、使いこなせば結構便利なので、ぜひチャレンジしてみてください。