webサイト制作の勉強｜2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Googleフォームに自作のCSSをあてカスタマイズする

PHP

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com


HTMLで同じ項目のフォームを作成する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。

「input type="hiddin"」を使ってgoogleにデータを送信する
<!-- まとめて値をgoogle formに送る -->
<input type="hidden" name="" value="<?php echo $name ?>">
<input type="hidden" name="" value="<?php echo $email ?>">
<input type="hidden" name="" value="<?php echo $gender ?>">
<input type="hidden" name="" value="<?php echo $message ?>">

以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。





サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
let 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を付ける

.serialize()

入力されたデータ全てのElementを文字列のデータにシリアライズする。


シリアライズとは（シリアライゼーション,serialize,）
シリアライズとは、複数の並列データを直列化して送信することである。具体的には、メモリ上に存在する情報を、ファイルとして保存したり、ネットワークで送受信したりできるように変換することである。



コードの解説

このコードは、jQueryを使用してHTMLフォームの送信を処理しています。具体的には、IDが"g-form"のHTML要素（おそらくフォーム）が送信されるときに実行される関数を定義しています。

コードの各部分の詳細な説明は以下の通りです：

1. `$('#g-form').submit(function (event) {...});`：この行は、IDが"g-form"の要素が送信されるときに実行される関数を定義します。この関数はイベントハンドラと呼ばれ、特定のイベント（この場合はフォームの送信）が発生したときに実行されます。

2. `let formData = $('#g-form').serialize();`：この行は、フォーム内のすべての入力フィールドのデータを取得し、URLエンコードされた文字列に変換します。この文字列は、後でサーバーに送信するためのデータとして使用されます。

3. `$.ajax({...});`：この行は、非同期JavaScriptとXML（AJAX）リクエストを作成します。このリクエストは、ページ全体をリロードせずにサーバーとデータを交換するために使用されます。

4. `url: "google FormのURL",`：この行は、リクエストを送信するURLを指定します。この例では、GoogleフォームのURLを指定します。

5. `data: formData,`：この行は、サーバーに送信するデータを指定します。先ほど作成したformData変数を使用します。

6. `type: "POST",`：この行は、HTTPリクエストのタイプを指定します。POSTリクエストは、サーバーにデータを送信するために使用されます。

7. `dataType: "xml",`：この行は、サーバーからの応答がXML形式であることを指定します。

8. `statusCode: {...},`：この部分は、特定のHTTPステータスコードが返されたときに実行する関数を定義します。この例では、ステータスコード0（成功）と200（失敗）に対する処理を定義しています。

9. `event.preventDefault();`：この行は、フォームのデフォルトの送信動作（ページのリロードまたは新しいページへの遷移）をキャンセルします。これにより、AJAXリクエストが完了するまでユーザーは現在のページに留まります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー




これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp



エラーチェック

万が一、確認画面からアクセスしてしまった際にそのままでは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>



mw-wp-form.web-soudan.co.jp