[baserCMS]baserCMSのメールフォームで日本一簡単にajaxメールフォーム #mail

ハッピーニュー baserCMS Advent Calendar 2022.
さてその中盤辺り担当です。=[ 'ω' ] ﾄｳﾌｰ

baserCMS4のご紹介

baserCMSとは、CMS（Contents Management System）です。
世の中には、WordpressとかMovableTypeとかSHIRASAGIなどいろんなCMSがありまして、その中で、PHPのフレームワークであるCakePHPを用いてできてるCMSです。

baserCMS（ベーサーシーエムエス）とは、Webサイト制作プラットフォームとして最適な国産CMSです。
です。

公式ここ https://basercms.net/
プラグインとかテーマとか配布したり https://market.basercms.net/
事例増えてます https://basercms.net/works/
おいしそうなエディタ https://market.basercms.net/products/detail.php?product_id=66

この記事で紹介すること

baserCMSで簡単に作ることのできるメールフォームを、とても簡単にajax形式で使う手法をご紹介します。

想定している対象者

baserCMSでウェブサイトを制作をしている方
PHPer

環境

PHP Version 7.4.25
baserCMS 4.7.2
テーマ: 標準で利用できる bc_sample を利用

やってみた

https://example.materializing.net/
ここでどんな感じなのか閲覧できます。

こちらはajax化する前。フォームに遷移する動作ですね。
https://example.materializing.net/example

やってみた内容

1.エレメントを1つ作ります。
- app/webroot/theme/bc_sample/Elements/block_form.php
2.作成したエレメントをレイアウトファイルで読み込みます。
- app/webroot/theme/bc_sample/Layouts/default.php
- <?php $this->BcBaser->element('block_form') ?>

app/webroot/theme/bc_sample/Elements/block_form.php

<?php
/**
 * フォーム内容読込み・表示
 */
App::uses('MailHelper', 'Mail.View/Helper');
$this->Mail = new MailHelper(new View());
?>
<script>
$(function(){
	$(document).on('click touch', '.form-submit', function(e) {
		$(this).prop('disabled',true);
		e.preventDefault(); //フォームの既定動作をキャンセル

		$.ajax ({
			url: $(this).closest('form').attr('action'),
			type: 'POST',
			data: $(this).closest('form').serialize(),
			cache: false,
			timeout: 5000,
			beforeSend: function (xhr, settings) {
				$('.loadingHide').fadeIn(300);
			},
			complete: function(xhr, textStatus) {
				$('.loadingHide').fadeOut(300);
			}
		}).done(function(data, textStatus, jqXHR) {
			$('.QuestFormWrap').empty();
			$('.QuestFormWrap').html(data);

		}).fail(function(jqXHR, textStatus, errorThrown) {
			$('#ErrorResult').html('送信できませんでした。画面を再読み込みしてください。');
		});

		let scrollTargetPosition = $('.QuestFormWrap').offset().top;
		$('html,body').animate({
			scrollTop: scrollTargetPosition
		}, 1000);

		return false;
	});
});
//# sourceURL=block_form.js
</script>

<div class="loadingHide" style="display:none"></div>
<div class="QuestFormWrap">
	<?php echo $this->Mail->getForm(1); ?>
</div>

<style type="text/css">
.loadingHide {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.5);
  background-image: url(/img/admin/ajax-loader.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: 50px 50px;
  z-index: 100;
}
</style>

たったのこれだけです。

もともとできることに一工夫

もともとbaserCMSにはメールフォームをページ内に読み込み自由に表示できる機能があります。
※数字の1 は、メールフォームのメールコンテンツIDです

<?php
App::uses('MailHelper', 'Mail.View/Helper');
$this->Mail = new MailHelper(new View());
echo $this->Mail->getForm(1);
?>

表示はこれでじゅうぶんで、とても簡単にサイト内に表示できます。
せっかくなので、表示のみでなく入力チェック・送信完了までさせてみた、といったところです。
メールフォーム自体が、基本的には管理側で設定さえ行えば公開利用できるbaserCMSならではできるカスタマイズですね。

それでは御機嫌よう。
他の方々の記事もぜひ読んでみてくださいね。
https://qiita.com/advent-calendar/2022/basercms