お問い合わせフォーム確認画面の対応方法について
本記事では、カミハヤMAのフォーム登録でフォーム入力確認画面を必要とする場合、その対応方法について説明します。
目次
１．カミハヤMAのフォーム機能について
２．事前準備
３．フォーム入力確認画面作成方法について
４．サンプルコード
５．最後に
１．カミハヤMAのフォーム機能について
カミハヤMAで作成したフォームでは、成功公開アクションは次の中から選択することになります。
①フォームに残す
②リダイレクトURL
③メッセージを表示
それぞれについて少し補足します。
①「フォームに残す」は、フォーム送信した後、フォーム画面のままにさせる場合
②「リダイレクトURL」は、サンキューページなどにリダイレクトさせる場合
③「メッセージを表示」は、フォーム送信した後、フォーム画面上にお礼メッセージなどを表示させる場合
残念ながらカミハヤMAでは、フォーム入力確認を求めるための機能がありません。
このような場合、フォーム入力確認画面を必要とする場合、どのようにすればよいのでしょうか。
一般的な方法として、フォーム入力確認画面機能を対応する上でサーバー側でプログラム開発を必要としますがカミハヤMAは、phpによるプログラム開発がサーバー側で認められていません。
カミハヤMAだけで対応することは難しいですが、次のようにすればフォーム入力確認画面を経由してカミハヤMAのフォーム登録できる仕組みをつくることができます。
２．事前準備
1でも説明した通り、カミハヤMAに閉じた世界では対応することが難しいです。その大きな理由はサーバー側でプログラム開発することが、利用者から許されていないからです。
ですので、今回ご紹介する方法では、別のサーバー環境が必要となります。
今回の例ではphpが利用できるサーバー環境を事前に用意します。
３．フォーム入力確認画面作成方法について
phpが利用できるサーバー環境で、フォーム入力・入力確認・指定されたカミハヤMAのフォームIDに対する機能を実装するためのサンプルコードを記載します。
下記サンプルコードにおいては、環境に応じて修正すべき箇所がありますので、適宜環境に応じて修正が必要となることをご承知おきください。
合わせて、セキュリティ対策においても考慮していない点がありますため、下記サンプルコードをそのままご利用されることは控えていただけますようお願いします。
４．サンプルコード
<?php
// 変数の初期化
$page_flag = 0;
if( !empty($_POST['btn_confirm']) ) {
$page_flag = 1;
} elseif( !empty($_POST['btn_submit']) ) {
$page_flag = 2;
}
?>
<?php
$mailadress = $_POST['mail'];
$namae = $_POST['name'];
?>
<!DOCTYPE>
<html lang="ja">
<head>
<title>お問い合わせフォーム</title>
<style rel="stylesheet" type="text/css">
body {
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 20px;
padding: 20px 0;
color: #209eff;
font-size: 122%;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
input[type=text] {
padding: 5px 10px;
font-size: 86%;
border: none;
border-radius: 3px;
background: #ddf0ff;
}
input[name=btn_confirm],
input[name=btn_submit],
input[name=btn_back] {
margin-top: 10px;
padding: 5px 20px;
font-size: 100%;
color: #fff;
cursor: pointer;
border: none;
border-radius: 3px;
box-shadow: 0 3px 0 #2887d1;
background: #4eaaf1;
}
input[name=btn_back] {
margin-right: 20px;
box-shadow: 0 3px 0 #777;
background: #999;
}
.element_wrap {
margin-bottom: 10px;
padding: 10px 0;
border-bottom: 1px solid #ccc;
text-align: left;
}
label {
display: inline-block;
margin-bottom: 10px;
font-weight: bold;
width: 150px;
}
.element_wrap p {
display: inline-block;
margin: 0;
text-align: left;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<?php if( $page_flag === 1 ): ?>
<form method="post" action="">
<div class="element_wrap">
<label>氏名</label>
<p><?php echo $_POST['name']; ?></p>
</div>
<div class="element_wrap">
<label>メールアドレス</label>
<p><?php echo $_POST['mail']; ?></p>
</div>
<input type="hidden" type="submit" name="btn_back" value="戻る">
<input type="hidden" type="submit" name="btn_submit" value="送信">
<input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="mail" value="<?php echo $_POST['mail']; ?>">
</form>
<!--ここからカミハヤMAのフォームに関するコードを挿入します。挿入方法は、カミハヤMAのフォーム画面でフォームHTMLの手動コピーからコードをコピーしてきます。-->
<script type="text/javascript">
/** This section is only needed once per page if manually copying **/
if (typeof MauticSDKLoaded == 'undefined') {
var MauticSDKLoaded = true;
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://*****.mautic.net/mautic/media/js/mautic-form.js?vb351ec55';
script.onload = function() {
MauticSDK.onLoad();
};
head.appendChild(script);
var MauticDomain = 'https://*****.mautic.net';
var MauticLang = {
'submittingMessage': "お待ちください…"
}
}else if (typeof MauticSDK != 'undefined') {
MauticSDK.onLoad();
}
</script>
<div id="mauticform_wrapper_testform" class="mauticform_wrapper">
<form autocomplete="false" role="form" method="post" action="https://*****.mautic.net/form/submit?formId=**" id="mauticform_confirmform" data-mautic-form="confirmform" enctype="multipart/form-data">
<div class="mauticform-error" id="mauticform_testform_error"></div>
<div class="mauticform-message" id="mauticform_testform_message"></div>
<div class="mauticform-innerform">
<div class="mauticform-page-wrapper mauticform-page-1" data-mautic-form-page="1">
<div id="mauticform_confirmform_f_name" class="mauticform-row mauticform-text mauticform-field-1">
<input type="hidden" label id="mauticform_label_confirm_f_name" for="mauticform_input_confirm_f_name" class="mauticform-label"></label>
<input type="hidden" input id="mauticform_label_confirm_f_name" name="mauticform[f_name]" value="<?php echo $namae; ?>" class="mauticform-input" type="text">
<span class="mauticform-errormsg" style="display: none;"></span>
</div>
<div id="mauticform_confirmform _mail" data-validate="mail" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-2 mauticform-required">
<input type="hidden" label id="mauticform_confirmform_mail" for="mauticform_input_confirmform_mail" class="mauticform-label"></label>
<input type="hidden" input id="mauticform_input_confirmform_mail" name="mauticform[mail]" value="<?php echo $mailadress; ?>" class="mauticform-input" type="email">
<span class="mauticform-errormsg" style="display: none;">これは必須です。</span>
</div>
<div id="mauticform_testform_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-3">
<button type=“button” onclick="javascript:window.history.back(-1);return false;" class="mauticform-button btn btn-default">戻る</button>
<button type="submit" name="mauticform[submit]" id="mauticform_input_confirmform_submit" value="" class="mauticform-button btn btn-default">送信</button>
</div>
</div>
</div>
<input type="hidden" name="mauticform[formId]" id="mauticform_confirmform_id" value="**">
<input type="hidden" name="mauticform[return]" id="mauticform_confirmform_return" value="">
<input type="hidden" name="mauticform[formName]" id="mauticform_confirmform_name" value="confirmform">
</form>
</div>
<!--ここまでが、カミハヤMAのフォームに関するコードです。-->
<?php elseif( $page_flag === 2 ): ?>
<p>送信が完了しました。</p>
<?php else: ?>
<form method="post" action="">
<div class="element_wrap">
<label>氏名</label>
<input type="text" name="name" value="">
</div>
<div class="element_wrap">
<label>メールアドレス</label>
<input type="text" name="mail" value="">
</div>
<input type="submit" name="btn_confirm" value="入力内容を確認する">
</form>
<?php endif; ?>
</body>
</html>
５．最後に
以上の通り、カミハヤMAだけでは、フォーム入力確認画面の機能は実装されていませんが、ご説明した内容をもとに必要とするサーバー環境と実装をすれば対応可能となります。
ただし、今回の方法ではフォームの変更がある度にプログラム修正が必要となるので運用面からすると最善策とは申し上げにくい点があります。
ですので、あまり変更を伴わないフォームで試していただくことをお勧めします。
