【WordPress】WEBページ内の自作フォームからGoogleフォームの回答に送信する｜form action [PART1]

WordPress(ワードプレス)

2023.04.22

WordPressでページ内にフォームを作成し、そのフォームが送信された際にGoogleフォームの回答として送信する方法について。ページ内のフォーム送信時にGoogleフォームの回答に送信してみます。

form action について
form action にGoogleフォームを設定する
Googleスプレッドシートに連動できる
まとめ

form action について

この例では、フォームの送信先は “submit.php” というファイルに設定されており、HTTPメソッドはPOSTに設定されています。フォームには、名前、Eメール、メッセージを入力することができ、送信ボタンを押すことでフォームの内容が送信されます。

<form action="submit.php" method="POST">
<div>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
</div>
<div>
  <label for="email">Eメール:</label>
  <input type="email" id="email" name="email">
</div>
<div>
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message"></textarea>
</div>
<div>
  <input type="submit" value="送信">
</div>
</form>

こちらの送信先をGoogleフォームに設定して送信をしてみます。

form action にGoogleフォームを設定する

以下の例は、form action にGoogleフォームのURLを設定する方法です。

<form  action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScXu4gnBo8APCPgzDVWwbhXU_jMpvbVP04OP9bTNmhpepTeZQ/formResponse">

form action=にGoogleフォームのformResponseのURLを設定します。

<form  action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScXu4gnBo8APCPgzDVWwbhXU_jMpvbVP04OP9bTNmhpepTeZQ/formResponse">
  <table>
    <tbody>
      <tr>
        <th><label>名前</label></th>
        <td><input id="text1" type="text" name="entry.○○○○"></td>
      </tr>
      <tr>
        <th><label>メールアドレス</label></th>
        <td><input id="text2" type="text" name="entry.○○○○"></td>
      </tr>
    </tbody>
  </table>
  <button type="submit" name="button" value="送信">送信</button>
</form>

各nameの値にGoogleフォームのentry.○○○○部分のIDのような場所を設定することで、Googleフォームで送信した時と同じように送信ができるようになります。

Googleフォームの設問項目内にname=に設定できるIDのような場所がありますので取得して設定します。

<div jsmodel="CP1oW" data-params="%.@.[918104113,"テキスト１",null,0,[[1912038040,[],false,[],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"テキスト１"]],"i1","i2","i3",false]">