search
LoginSignup
0

posted at

updated at

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

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

baserCMS4のご紹介

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

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

この記事で紹介すること

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

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