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