
問い合わせフォームだけでも実装は重い
入力チェック、送信処理、スパム対策、バックエンド、メールサーバーまで考えると、用意するものが増えていきます。
Vanilla Form
GoogleフォームのURLを読み込み、見た目や文言を整えたHTMLフォームを書き出します。
Problem

入力チェック、送信処理、スパム対策、バックエンド、メールサーバーまで考えると、用意するものが増えていきます。

問い合わせフォームは必要でも、そのためだけに別サービスを契約したくないことがあります。

そのまま埋め込むと、サイトのデザインや操作感と合わないことがあります。
Solution

送信先にはGoogleフォームを使うため、PHPやメールサーバーを追加する必要はありません。

既存のGoogleフォームを使えるので、別のフォームサービスを契約せずに導入できます。

ラベルやスタイル、送信後の動作などをサイトに合わせて調整できます。
Flow
Step 1
Googleフォームを作成し、共有URLまたは埋め込みコードを準備します。
Step 2
URLまたは埋め込みコードを読み込み、表示や文言、送信後の動作などを調整します。
Step 3
生成したHTMLをページに反映して公開します。
Feature
まず使う3つ
共有URLまたはiframeコードを読み込むと、フォーム項目を取得して編集できます。
表示/非表示、必須、ラベル、プレースホルダーなどを画面上で調整してHTMLを出力できます。
完了メッセージ、ダイアログ、サンクスページへの移動から選べます。
必要に応じて使える機能
送信成功時のイベントをGA4(gtag)やGTM(dataLayer)へ送る設定もできます。
リンク先URLと文言を指定し、フォーム下部に表示できます。
honeypotと最短送信待機時間をオプションで追加できます。
デフォルト、スタイルなし、Bootstrap、Tailwindから設置先に合わせて選べます。
FAQ
フォームの読み込み時に一部サーバー側で処理しますが、入力したURLや設定内容は保存しません。
はい。共有URL・viewform URL・埋め込み用iframeコードのいずれからでも読み込めます。
使えません。Vanilla Formは、ログインせず回答できるGoogleフォームに対応しています。「回答を1回に制限」、確認済みメールアドレスの収集、回答者の制限、ファイルアップロード設問などを使う場合は、Googleフォーム本体をご利用ください。
使えます。プラグイン不要で、生成したHTMLをWordPressのカスタムHTMLブロックに貼り付けるだけで利用できます。
出力されたフォームの送信先はGoogleフォーム(formResponse)です。PHPやメールサーバーを追加しなくても運用できます。
はい。その場で完了メッセージを表示するか、ダイアログを開くか、サンクスページへ移動するかの3種類から選択できます。
通知はGoogleフォーム側で設定できます。フォームの通知設定や、連携先スプレッドシートの通知ルールを使うことで、メール通知で運用できます。
できます。回答はGoogleフォーム/スプレッドシートで管理されるため、編集権限を付与すれば複数人で確認・対応できます。
はい。読み込んだ項目ごとに、表示/非表示、必須、ラベル、プレースホルダーを調整してからHTMLを生成できます。
簡易スパム対策としてhoneypotと最短送信待機時間を追加できます。ただしGoogleフォームへ直接送信する構成のため、TurnstileやreCAPTCHAのような本格的なbot対策の代わりにはなりません。
GoogleフォームのURLから、サイトに合わせたHTMLフォームを書き出せます。
フォームを作る