Vanilla Form ヘルプ

1. 準備するもの

• Googleアカウント（Googleフォームを作成・管理するため）
• 生成コードを貼り付けるWebページ（HTMLを編集・公開できる環境）
• Googleフォームの共有URL（`forms.gle` / `docs.google.com/forms/...`）または埋め込み`iframe`コード

2. 基本の使い方

1. Googleフォームを作成し、URLまたは埋め込みコードを取得します。
2. Vanilla Form BuilderにURLまたは埋め込みコードを読み込みます。
3. 項目ごとにラベル、必須、表示/非表示、入力形式を調整します。
4. 送信後の動作や解析連携などの設定を行います。
5. プレビューを確認し、「生成コードをコピー」でコードを取得します。
6. HTMLに貼り付けて公開し、送信テストを実施します。
7. Googleフォームで送信内容が回答に反映されているか確認します。

3. Googleフォーム側の設定方法

フォームURLの取得（共有URL）

1. Googleフォームの編集画面を開きます。
2. 右上の「公開」をクリックします。
3. 回答者の公開範囲を「リンクを知っている全員」にして保存します。
4. 「回答者へのリンクをコピー」（鎖アイコン）をクリックします。

`https://forms.gle/...` と `https://docs.google.com/forms/.../viewform` のどちらでも読み込めます。

埋め込みコードの取得（iframe）

1. Googleフォームの編集画面で「公開」をクリックします。
2. `<>`（HTMLを埋め込む）を選択します。
3. 表示された `iframe` コードをコピーします。

回答先スプレッドシートの連携

1. Googleフォーム上部の「回答」タブを開きます。
2. スプレッドシートアイコン（スプレッドシートにリンク）をクリックします。
3. 「新しいスプレッドシート」または「既存のスプレッドシート」を選択します。

Vanilla Formでは、回答や通知を見やすくまとめるため、フォーム単体よりもスプレッドシート連携をおすすめしています。

複数人で使う場合は、フォーム本体と回答先スプレッドシートの両方で共有状態を確認してください。

フォーム送信時の通知設定（スプレッドシート）

1. 回答先のGoogleスプレッドシートを開きます。
2. 「ツール」→「通知設定」→「編集通知」を開きます。
3. 通知条件は「ユーザーがフォームを送信した時」を選択します。
4. 通知頻度は「メール - その都度」を選択します。

即時通知での一次対応が必要な問い合わせフォームでは、上記設定を推奨します。

編集者（共同編集者）の追加

1. フォーム編集画面の右上メニューから「共同編集者を追加」を開きます。
2. 追加するユーザーのメールアドレスを入力します。
3. 権限（編集者）を確認して共有します。

フォームだけでなく、回答先スプレッドシートにも必要に応じて編集権限を付与してください。

4.設定項目

項目カスタマイズ

• ラベル、プレースホルダー、必須、表示/非表示を項目単位で調整できます。入力形式を指定すると、メールアドレスや電話番号などのバリデーションを適用できます。
• 入力形式は `text / email / tel / url / number / date / textarea / select / radio / checkbox` に対応します。
• Googleフォーム側で必須の項目は、必須を外したり非表示にできません。

送信後の動作

• その場で完了表示
• ダイアログで完了表示
• サンクスページへ移動

サンクスページへ移動を選ぶ場合、URLは`https://...`または`/thanks/`のようなルート相対URLで指定してください。

スタイルについて

• スタイルは「デフォルト / スタイルなし / Bootstrapクラス / Tailwindクラス」を選択できます。
• Bootstrap/Tailwind選択時は、利用先ページで該当CSSの読み込みが必要です。
• 以下のクラス名は「デフォルト」を選んだ場合に出力されます。

「スタイルなし」「Bootstrapクラス」「Tailwindクラス」を選んだ場合は、出力されるクラス構成が異なります。

アクセス解析連携について

• 送信成功イベントは GA4（gtag）/ GTM（dataLayer）/ 両方 を選択でき、イベント名は任意に指定できます。
• GA4（gtag）はGoogle Analytics 4が対象ページに配置されている場合に利用してください。
• GTM（dataLayer）は Google Tag Manager が対象ページに配置されている場合に利用してください。
  Google Tag Manager 経由でGA4を利用している場合、GTM側でカスタムイベントのトリガー設定と、必要に応じてGA4イベントタグの設定を行ってください。
• 両方（GA4>M）は GA4 と GTM が両方ページに配置されている場合に利用できます。
  ただし、GTM経由でGA4を導入している場合はイベントが重複計測される可能性があるため非推奨です。GTM側の別ツール連携など、意図がある場合のみ利用してください。

簡易スパム対策について

• 任意で `honeypot` と `最短送信待機時間` を追加できます。
• どちらも軽い対策です。TurnstileやreCAPTCHAのような強いbot対策ではありません。
• Vanilla FormはGoogleフォームへそのまま送る形なので、サーバー側でCAPTCHAトークンを検証するような本格的な対策には対応していません。

bot 対策を強く求めるフォームでは、Googleフォームを直接使うか、別途サーバー側の送信中継を含めた構成を検討してください。

5. 公開前の確認

• プレビューのテスト送信をONにすると、Googleフォームへ実データが送信されます。
• 回答通知メールはGoogleフォーム側で設定してください。
• 複数人運用時はGoogleフォーム/スプレッドシートの共有権限を確認してください。
• 生成コードは `begin/end generated by vanilla-form-builder` コメントごと管理すると差分確認しやすくなります。

6. 引き継ぎ時の注意（アカウント・所有権）

• Googleアカウントが削除されると、オーナーになっているフォームや回答先スプレッドシートにアクセスできなくなることがあります。
• 退職・異動・アカウント統廃合の前に、Googleドライブで対象フォームとスプレッドシートを確認してください。
• 必要に応じて新オーナー候補を共有に追加し、オーナー権限の移譲を実施してください。
• 組織ポリシーによりオーナー移譲が制限される場合があるため、事前に管理者へ確認してください。

引き継ぎ時は「フォーム本体」「回答先スプレッドシート」「設置先HTML」の3点をメモに残しておくと、あとで見直しやすくなります。

7. このサービスで扱う情報

• フォーム読み込み時には、GoogleフォームのURLまたは埋め込みコードを使って項目情報を取得します。
• 入力したURLやBuilder上の設定内容は、サービス側で保存しません。
• 生成コードの送信先はGoogleフォーム（`formResponse`）であり、問い合わせ内容はGoogle側で管理されます。

8. よくあるつまずき

読み込み時にエラーになる

`https://forms.gle/...`、`https://docs.google.com/forms/.../viewform`、または埋め込み用 `iframe` コードを利用してください。

504 のようなタイムアウト表示が出る場合は、短縮URL（`forms.gle`）ではなく `docs.google.com/forms/.../viewform` のURL、または埋め込み用 `iframe` コードで再試行してください。改善しない場合は、設置サーバー側の外部HTTPS通信制限の可能性があります。

403 やログイン関連の表示が出る場合は、その Googleフォームが一般公開されておらず、Googleアカウントでのログインや組織内アクセスを要求している可能性があります。フォームの共有設定と「回答にログインを必要とする」設定を確認してください。

• Googleフォームの編集画面で、回答者にログインを求める設定になっていないか確認してください。
• Google Workspace の組織内ユーザー限定になっている場合、Vanilla Form からは読み込めません。
• ファイルアップロード設問を含むフォームは Google アカウントでのログインが必須になるため、Vanilla Form では利用できません。
• ファイルアップロードが必要な場合は、Googleフォームを直接使うか、別途アップロード手段を用意してください。
• 共有URLは、編集画面のURLではなく「公開」から取得した回答用URL（`docs.google.com/forms/.../viewform` / `forms.gle`）を使ってください。

サンクスページ設定でエラーになる

サンクスページURLは `https://...` か `/thanks/` のようなルート相対URLで指定してください。

送信後イベントが計測されない

出力先ページで GA4 / GTM が正しく読み込まれているか、イベント名のタイプミスがないか確認してください。

見た目が崩れる

生成コードのスタイル種別と、実ページのCSS読み込みが一致しているか確認してください。

9. 関連ページ

• Vanilla Form 製品ページ
• お問い合わせ
• プライバシーポリシー