本記事の目的
・グーグルフォームをレイアウト調整できたので、似たような案件に対応できるよう備忘録として記載する。
作成した成果物
アクセス様 リユーセル本店 出張買取申込みフォーム
https://www.reusell.jp/f/Shutcho/toiawase/
フォームの機能
問い合わせページでの機能
・レスポンシブ対応
・必須項目のバリデーション
・都道府県、時間帯、ご依頼の点数のプルダウン
・グーグルフォームとのinput連携
・正規分布により空白文字無効
・ご希望日時のカレンダー設定（土日祝日無効設定）
・送信後、申し込み完了ページ後に遷移
グーグルフォーム側での機能
・問い合わせメールの自動返信（GASを使用しての構築）
必要なもの（初期構築）
・グーグルアカウント
・自動返信用の登録するメールアドレス
作成手順（概要説明）
①グーグルフォームの作成
・GASにより自動返信メール機能の構築
②問い合わせページの作成
・HTML&CSSでレイアウト調整
③問い合わせ完了ページの作成
・問い合わせ完了したら遷移する完了ページのレイアウト調整
④グーグルフォームと問い合わせページを連携
・formタグとinputタグを使用し、グーグルフォームと連携する
⑤動作のチェック
構築詳細
やり方は以下記事参照してください。わかりやすくまとめてあります
Google フォームのメール通知でおすすめの設定方法＆手順を解説
https://blog.hubspot.jp/google-forms-mail-notification
【グーグルフォームとの連携】
Google フォームのデザイン・完了ページをカスタマイズ
https://www.limosuki.com/2021/03/googleform-customize.html
Google フォームをHTML&CSSで自由にデザインする方法
https://www.mgtnsn.com/blog/google-form-original-html-css/
グーグルフォームで気を付ける事
・GASでスクリプト構築した後の運用の話です。運用中の際、グーグルフォームの項目名を変更しない。
⇒理由：グーグルフォームの自動返信メールが機能しなくなります。
グーグルフォームの自動返信はGASで構築されている為、項目名とリンクしています。もし変更するなら、GASの方も変更しないといけません。
