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 以外の 全てで使えるので、機会があれば使ってみるのも良いかもしれません。

参考

Googleフォームを自在にカスタマイズする - Qiita
Googleフォームの埋め込み機能を使えば簡単に、機能するフォームを設置できる。 しかし、デザインはGoogleフォームのデフォルトから変わらないので、サイトの雰囲気は大きく損なわれる。 見た目を思い通りにカスタマイズできるgoog...
Googleフォームをカスタマイズして導入、Ajax処理を行う - Qiita
はじめに Googleフォーム、簡単にアンケート等作成できて便利ですよね 実はこれ、デザインをカスタマイズして自アプリ・サイトに導入することもできます 下記の記事をみていただくとどのように導入できるかがわかるかと思います Go...
タイトルとURLをコピーしました