design studio iR
お問い合わせはこちら

GoogleフォームをWordPressに埋め込む方法｜スマホ対応CSSとApps Scriptでのメール通知

SHARE

飯田市でホームページ制作をしている牧内です。

WordPressのお問い合わせフォームは、Contact Form 7などのプラグインで作るのが一般的です。ただ、サーバー環境やPHPのバージョン、メール送信の設定によっては、フォームが表示されても、送信時にエラーが出ることがあります。

そうした場合の選択肢の一つが、GoogleフォームをWordPressに埋め込む方法です。Googleフォームなら、WordPressやレンタルサーバーのメール送信機能に頼らずに、お問い合わせを受け付けられます。

この記事では、実際に行った作業をもとに、次の手順を整理します。飯田市・南信州でホームページ制作会社をお探しの方、お問い合わせフォームの運用でお困りの方の参考になれば幸いです。

  • Googleフォームの作成
  • WordPressへの埋め込み
  • CSSによるスマートフォン対応
  • Google Apps Script（GAS）による、会社のメールアドレスへの通知
  • 公開前の確認項目

この記事の要点

  • Googleフォームの埋め込みコードは、iframeをdivで囲み、CSSで幅を調整する
  • iframe内のフォームの高さは、CSSで自動取得できない。パソコンとスマートフォンで確認して、高さを決める
  • メール通知は、フォームと連携したスプレッドシート側のApps Scriptで行う。トリガーは「スプレッドシートから」「フォーム送信時」
  • スクリプトの「実行」ボタンでは、テストできない。公開されたフォームから実際に送信して確認する

手順1：Googleフォームを作成する

Googleフォームで、新しいフォームを作成します。一般的な問い合わせフォームであれば、次の項目を用意します。

  • お名前（必須）
  • メールアドレス（必須）
  • 電話番号（任意）
  • お問い合わせ内容（必須）

メールアドレスの項目には、「回答の検証」でメールアドレスの形式チェックを設定します。

また、一般のお客様がGoogleアカウントにログインせずに回答できるよう、公開範囲や回答の制限を確認します。この設定が合っていないと、ログイン画面が出て、送信できません。

Googleフォームの回答は、Google側に保存されます。WordPressのデータベースには、お問い合わせの内容が残りません。

手順2：埋め込みコードを取得する

フォームを回答者が開ける状態にしたうえで、フォームのメニューから「HTMLを埋め込む」を選び、埋め込みコードをコピーします。次のようなコードです。

html

<iframe
  src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true"
  width="640"
  height="826"
  frameborder="0"
  marginheight="0"
  marginwidth="0">
  読み込んでいます…
</iframe>

FORM_ID の部分には、フォーム固有のIDが入ります。このコードを貼り付ければ、ホームページの中にフォームが表示されます。お客様は、外部のGoogleフォームのページに移動する必要がありません。

手順3：WordPressに埋め込む

フォームを置きたい固定ページなどを編集します。

  • ブロックエディター：「カスタムHTML」ブロックにコードを貼る
  • クラシックエディター：「テキスト」タブに切り替えて貼る

CSSで調整しやすいように、iframeを専用のdivで囲みます。

html

<div class="google-form-wrap">
  <iframe
    src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true"
    title="お問い合わせフォーム"
    width="100%"
    height="900"
    frameborder="0"
    marginheight="0"
    marginwidth="0">
    読み込んでいます…
  </iframe>
</div>

Contact Form 7などの既存フォームを置き換える場合は、旧フォームのショートコードを外してから設置します。

手順4：CSSでスマートフォンに対応させる

埋め込みコードをそのまま使うと、横幅が固定されているため、スマートフォンで表示がはみ出すことがあります。次のCSSで、幅を調整します。「外観 → カスタマイズ → 追加CSS」など、テーマのCSS欄に追加します。

css

.google-form-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.google-form-wrap iframe {
  display: block;
  width: 100%;
  height: 1200px;
  border: none;
}

パソコンでは、最大800pxの幅で中央に配置されます。スマートフォンでは、親要素の幅に合わせて表示されます。

フォームの内側に縦スクロールバーが出る場合

実際に設置したとき、Googleフォームの内側に縦スクロールバーが表示されました。原因は、iframeの高さが、フォーム全体の高さより小さかったことです。今回は、高さを900pxから1200pxに変更して解消しました。

iframeの中にあるフォームの高さは、WordPress側のCSSだけでは、自動で取得できません。項目数や、スマートフォンでの折り返しによって、必要な高さが変わります。パソコンとスマートフォンの両方で確認して、高さを決めます。

CSSでスクロールバーを隠す方法もありますが、フォームの下部、特に送信ボタンまで隠れることがあります。フォーム全体が表示されていることを、確認してください。

手順5：回答を会社のメールアドレスに通知する

Googleフォームの回答は、フォームやスプレッドシートに保存されます。ただ、企業のお問い合わせフォームとしては、普段使っているメールアドレスに内容が届くようにしたい場合が多いと思います。

Google Apps Script（GAS）を使うと、フォームの送信時に、メールで通知できます。有料のフォームサービスやSMTPプラグインは不要です。

5-1. 回答をスプレッドシートに記録する

フォームの編集画面で「回答」タブを開き、スプレッドシートを作成します。フォームの回答が、スプレッドシートに記録されるようになります。

5-2. Apps Scriptを開いてコードを貼る

作成したスプレッドシートで、「拡張機能 → Apps Script」を選びます。最初から入っている myFunction などを、次のコードに置き換えます。

javascript

function sendNotification(e) {
  // 通知先メールアドレス
  var email = "contact@example.com";

  // フォームの回答内容
  var responses = e.values.join('\n');

  // 件名と本文
  var subject = "ホームページからお問い合わせを受信しました";
  var body = "以下の内容でお問い合わせが届きました。\n\n" + responses;

  // メール送信
  MailApp.sendEmail(email, subject, body);
}

contact@example.com を、通知を受け取りたいメールアドレスに変更します。

このコードは、回答データを改行でつなぎ、指定したアドレスに送ります。次の点に注意してください。

  • フォームと連携した、スプレッドシート側のApps Scriptで動作する
  • 通知先はコード内で固定している。回答者のメールアドレス宛ての自動返信ではない

5-3. トリガーを設定する

コードを保存して、Apps Scriptの左側にある「トリガー」を開きます。「トリガーを追加」から、次のように設定します。

設定項目設定内容
実行する関数sendNotification
イベントのソーススプレッドシートから
イベントの種類フォーム送信時

保存すると、Googleアカウントの権限の承認を求められることがあります。メールを送るスクリプトのため、内容を確認して承認します。スプレッドシートに紐づけたスクリプトなので、イベントのソースは「スプレッドシートから」を選びます。

5-4. テスト送信する

公開しているGoogleフォームから、実際にテスト回答を送信します。次の2点を確認します。

  1. スプレッドシートに回答が記録される
  2. 指定したメールアドレスに通知が届く

スクリプトの「実行」ボタンを直接押すと、フォーム送信時に渡されるデータ（e）がないため、エラーになることがあります。テストは、必ず実際のフォームから送信して行います。

公開前の確認項目

実際のホームページから、送信テストを行い、次の点を確認します。

  • パソコンとスマートフォンで、フォームが正しく表示される
  • 入力欄や送信ボタンが、途中で切れていない
  • Googleアカウントにログインしなくても、送信できる
  • 回答がスプレッドシートに保存される
  • 指定した会社のメールアドレスに、通知が届く
  • 迷惑メールフォルダに入っていない
  • 個人情報の取り扱いやプライバシーポリシーの案内が、適切に書かれている

アカウントとアクセス権限

フォームとスプレッドシートには、個人情報が保存されます。共有設定とアクセス権限を確認してください。

制作会社のGoogleアカウントで作成した場合、長期運用では、お客様自身が管理するアカウントに所有権を移します。担当者が変わったときや、制作会社との契約が終わったときに、フォームが止まるのを防げます。

個人情報とプライバシーポリシー

Googleフォームを使うと、お客様が入力した情報は、Googleのサービスに送られます。プライバシーポリシーへの記載内容や、利用目的の示し方については、当事務所は法律の専門家ではないため、断定できません。最終的な判断は、弁護士など専門家、または管轄の窓口にご確認ください。

通知メールの上限と運用

Apps Scriptのメール送信には、1日に送れる件数の上限があります。上限はアカウントの種類によって異なるため、Googleの公式ドキュメントで確認してください。

この方法の利点と注意点

利点

  • WordPressやサーバーのメール送信環境に依存しない
  • WordPressに、SMTP用のメールアカウントのパスワードを保存しなくてよい
  • 回答を、スプレッドシートに記録できる
  • 既存のWordPressのページに、埋め込める
  • CSSで、表示の幅を調整できる

注意点

  • Googleフォーム特有のデザインが残る。サイトのデザインに完全に合わせることはできない
  • 通知用のスクリプトと、アカウントの管理が必要になる
  • 迷惑な送信への対策は、Googleフォームの機能の範囲になる

まとめ

WordPressのメール送信にトラブルがある場合や、管理の手間を減らしたい場合には、GoogleフォームとApps Scriptの組み合わせが、有力な選択肢になると思います。

お問い合わせフォームは、必ずしもWordPressのプラグインで作る必要はありません。サイトの目的、保守のしやすさ、セキュリティを見て、方法を選びます。

前の記事

PHP8に変更したらWordPressが500エラーになったと…

次の記事

お問い合わせフォームが送信できない（mail_failed）と…
Home
サービス
制作実績
お客様の声
デザイナー紹介
問合せ