Google フォームを カスタマイズして Webサイトに埋め込む

「WP Mail SMTP by WPForms」を使って お問い合わせフォームを作っていたんですが、スパムメールが大量に届くので変えることにしました。

大量のスパムメール

ショートコードを埋め込むだけで実装出来るから、楽だったんですけどね。

Google フォームを カスタマイズして Webサイトに埋め込む

サーバーサイドが無い、静的サイトでも使えるので試しに導入してみました。

Google フォームを作る

まず、土台となる Google フォームを作ります。

Google ドキュメントの左メニューから「フォーム」を選択します。

空白の新しいフォームを作成します。

お問い合わせフォームで、入力してほしい項目を追加します。

今回はメールと内容だけのシンプルな形式にしました。

出来上がったら、右上の「プレビュー」を押して Google フォームを開きます。

form action=”” と 各 input の name を探す

「F12」キーを押して DevTools を開きます。

「form action」は Elements を「action」で検索すると見つかります。

各 input の name は「Ctrl + Shift + C」で エレメント選択モードにして、入力箇所をクリックすると DevTools に該当箇所が表示されます。

Webサイトに埋め込む

<form onsubmit="return ContactSend()">
  <p>
    <label for="email">
      メールアドレス(必須)<br />
      <input id="email" type="email" required="" size="40" autocomplete="email" />
    </label>
  </p>
  <p>
    <label for="msg">
      お問い合わせ内容(必須)<br />
      <textarea id="msg" required="" cols="40" rows="10"></textarea>
    </label>
  </p>
  <div id="alert"></div>
  <p>
    <input type="submit" value="送信" />
  </p>
</form>
<div>
  <script>
    ContactSend = function () {
      $.ajax({
        url: "★★★",
        data: { "★★★": $('#email').val(), "★★★": $('#msg').val() },
        type: "POST",
        dataType: "xml",
        statusCode: {
          0: function () {
            $('#alert').text('ありがとうございます。');
          }
        }
      });
      // submitの送信をキャンセル
      return false;
    }
  </script>
</div>

上記コードで html を作成して、「★★★」の部分を書き換えれば完成です。

動作確認

作った html でテストしてみます。

送信に成功すると「ありがとうございます。」が表示されます。

Google フォームを見ると届いています。

おわりに

wordpress 以外の 全てで使えるので、機会があれば使ってみるのも良いかもしれません。

参考

https://qiita.com/sota6412/items/fa077cbf820faca30598

https://qiita.com/sugitata/items/182173c01e0470a3a4a8