オリジナルメールフォーム送信と同時にGoogleフォームにも情報を送る方法

「注文があったらグーグルフォームに送信されるオーダーフォームを作れないか」という案件がありまして、やってみました。

既に参考記事はいくつかありまして、それらを踏まえてオリジナルの注文フォームを作成してみましたのでご紹介します。

普通にメールフォームを作成

普段通りの作り方でメールフォームを作成します。

【自作のフォーム例】

<form action="">
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <select name="" id="inquiry">
      <option value="Aについて">Aについて</option>
      <option value="Bについて">Bについて</option>
      <option value="その他">その他</option>
    </select>
  </div>
 
  <div>
    <label for="name">お客様氏名</label>
    <input type="text" id="name" name="">
  </div>
 
  <div>
    <label for="name">お客様氏名（フリガナ）</label>
    <input type="text" id="name" name="">
  </div>
 
  <div>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="">
  </div>
 
  <div>
    <label for="message">問合せ内容</label>
    <textarea id="message" name=""></textarea>
  </div>
 
  <div>
    <input type="submit" value="送信する">
  </div>
</form>

「name」内は空白にしておいて大丈夫です。埋める文言は次↓で取得となります。

グーグルフォームを作成

次にGoogleフォームを同じフォーマットで新規作成します。

Google Form公式 : https://www.google.com/intl/ja_jp/forms/about/

注意点としては全てテキストフォームで作ったらいいかと思います。

オリジナルフォームの方がセレクトボックスだから、グーグルフォームの方もセレクトボックスで…という事はしなくても大丈夫かなと。

作成終わったら、送信方法のオプションでリンクを取得し、リンク先に飛びましょう。

グーグルフォーム内のソースでactionとnameの値を取得

さてここで検証ツール発動です。

①

<form action="https://docs.google.com/forms/○○○○">

…となっている「action」内のURL値をメモっておきましょう。

②

次に、作成したグーグルフォームの「input」内にある「name」の値を取得します。

だいたいentry.○○○○…と数字が並んでる形になってるかと思います。

それぞれのname="entry.○○○○"を全てメモしていきます。

取得したactionとnameの値を自作のフォームへ設定する

①

グーグルフォームから取得した「action」内のURLをオリジナルメールフォームの「action」へ設定。

②

グーグルフォームから取得した「name」内の値をオリジナルメールフォームのそれぞれの「name」へ設定。

これによって、オリジナルのフォームは自由に作りたいスタイルのデザインへ寄せて作成が可能となります。

スプレッドシートに問合せの履歴を残したい時はとても便利です。

送信後にグーグルフォームの画面になってしまう対策方法

上記方法でフォーム自体は送れるのですが、その後にグーグルフォームの画面へと遷移してしまう問題がありまして。

そこで「iframe」を使ったリダイレクト方法がありますので紹介しておきます。

グーグルフォームへ飛ばないようにリダイレクトさせ「thanks.html」へ遷移させるという例です。

<script type="text/javascript">
  var submitted = false;
  var currentURL = window.location.href;
</script>
 
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none;" onload="if(submitted) {window.location=currentURL + 'thanks.html';}"></iframe>
 
<form class="p-form" action="https://docs.google.com/forms/【グーグルフォームからコピペ】" target="hidden_iframe" onsubmit="submitted=true;">
～ここにフォーム内容～
</form>

まとめ

以上がグーグルフォームとの連携方法となります。

オリジナルのフォームだと自由なデザインで作る事ができるので、このGoogleフォームとの連携はオススメです。

リダイレクト方法に関しては他にも方法があるかと思うので、いろいろと試してみてください。

またはどうしても「メールフォームが難しい！自作できない！」っていう方には「イージーメールフォーム」っていうものもあったりするのでぜひご利用ください。

では現場から以上です！