お問い合わせフォームの作成|改訂版

今回のお問い合わせフォームは php を使い、 ● 入力画面
● 確認画面
● 完了画面

の 3 つを作成します。 入力画面の作例

https://codepen.io/yachin29/pen/ZEBNENN

万が一、確認画面からアクセスしてしまった際にそのままでは post で値が送 られていない為エラーになってしまうので、それを回避するために値が空だ ったら入力画面にリダイレクトさせる処理を行います。
isset 関数

isset を使う事で変数がセットされているか確認する事が出来ます。 あたまに「!」を付ける事で逆の意味になるので、以下の記述で 「$_POST['name']」に値がセットされていなかったら、という意味になり

ます。 !(isset($_POST['name']))

//$_POST["name"]の値が空だったら Location で指定しているファイルに 強制移動(リダイレクト)させる

if(!(isset($_POST['name']))){

header('Location:index.html');

exit; }

入力画面に戻るボタン
<button type="button" onclick=history.back()>戻る</button> 自身の完了画面ページに遷移する サンクスページを作成し、送信ボタンを押した後に自作したサンクスページ へ ajax でページ遷移させましょう。
$(function(){

$('#g-form').submit(function (event) { var formData = $('#g-form').serialize(); $.ajax({

url: "google Form の URL", data: formData,
type: "POST",
dataType: "xml", statusCode: {

0: function(){
window.location.href = "thanks.html"; },

200: function(){
// 失敗したときの処理

} }

});
//googleform へのページ遷移をキャンセル
event.preventDefault();
});
});
※formタグに#g-formを付ける
Google Form の値を取得する
Chrome の検証機能を使って Google フォームの「Action」と「name」の 値を取得し、HTML フォームに挿入する。
name 属性は階層の深い所にあるので「entry.」で検索し、 「name="entry.00001234"」のような name 属性の値を取得しましょ う。 ※複数項目の場合「name="entry.00001234_sentinel"」のようになっ ているので「entry.00001234」の部分だけ取ってきます。また複数項目は 順番が後回しになっているので「entry.」の順番にも気をつけましょう。