【初心者OK】HTMLで作った自作フォームとGoogleフォームを連携させる方法

HTML/CSS

はじめに：なぜGoogleフォームと連携するのか？

HTMLで自作したお問い合わせフォーム、見た目は自由に作れるけど、

  • 送信データの保存先がない
  • PHPやバックエンドの知識が必要になる
  • スプレッドシートに記録したいだけなのに大げさな実装になる

…などなど、初心者にはややハードルが高いですよね。

そこで便利なのがGoogleフォームと紐づける方法です。これなら

  • 送信内容は自動でスプレッドシートに保存
  • サーバー不要、無料
  • HTMLだけで完結

という超簡単な運用が可能になります。

ステップ①：HTMLで自作フォームを用意する

まずは基本的なフォームをHTMLで実装していきましょう。

<form>
  <div class="form-group">
    <label>お名前</label>
    <input type="text" placeholder="例：山田太郎" required>
  </div>
  <div class="form-group">
    <label>メールアドレス</label>
    <input type="email" placeholder="例：example@gmail.com" required>
  </div>
  <div class="form-group">
    <label>お問い合わせ内容</label>
    <textarea rows="4" required></textarea>
  </div>
  <button type="submit">送信</button>
</form>

※CSSは自由に装飾してください（Bootstrapなどの導入もおすすめ）。

ステップ②：Googleフォームを作成

Googleフォームにアクセスして、自作フォームと同じ項目を作成します。

  • 名前（短文回答）
  • メールアドレス（短文回答）
  • お問い合わせ内容（段落）

作成後、右上の回答者へのリンクをコピーからURLを取得し、ブラウザで開きます。

ステップ③：Googleフォームのactionとname属性を取得

ここが一番重要な作業です。

以下のステップになります。

  1. ブラウザでGoogleフォームを開く
  2. 右クリックから「検証」（またはF12キー）で開発者ツールを開く
  3. formタグを探す
    action="https://docs.google.com/forms/..."のURLをコピー
  4. 各質問項目のname="entry.xxxxxxxxx"をそれぞれコピー

まずは検証ツールを使うために、Googleフォームをブラウザで開きます。

リンクを開いたら「右クリック」→「検証」または「F12キー」を押して検証ツールを開きformタグを探します。

この時検証ツール上で「Ctrl+Fキー」で検索窓を表示し「formResponse」と入力するとすぐに見つかります。

form要素が見つかったらaction属性の

"https://XXXXXX/formResponse"

のURLをコピーして、自作したフォームの中のformタグの中に以下のようにペーストします。

<form action="https://XXXXXX/formResponse">
  <div class="form-group">
    <label>お名前</label>
    <input type="text" placeholder="例：山田太郎" required>
  </div>
  <div class="form-group">
    <label>メールアドレス</label>
    <input type="email" placeholder="例：example@gmail.com" required>
  </div>
  <div class="form-group">
    <label>お問い合わせ内容</label>
    <textarea rows="4" required></textarea>
  </div>
  <button type="submit">送信</button>
</form>

「XXXXXX」の部分は人それぞれ異なりますが、target属性とmethod属性、idは同じです。

次に、それぞれ質問項目のinput要素のname属性を探します。

先ほど同様、「Ctrl+Fキー」で検索窓を表示し「entry.」と入力するとすぐに見つかります。

上から順に、以下をコピーしてください。

name=”entry.数字”（お名前に該当する箇所）

name=”entry.数字”（メールアドレスに該当する箇所）

name=”entry.数字”（お問い合わせ内容に該当する箇所）

name属性が見つかったら自身が記述したHTMLに検証ツールで見つけ出したaction属性とname属性を追記しましょう。

コードは以下のようになります。

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdLPgKteZRwpkHcoz2zORbey3jXGUVeaTh00rWEAAUAOjUdxw/formResponse">
  <div class="form-group">
    <label>お名前</label>
    <input name="entry.136813564" type="text" placeholder="例：山田太郎" required>
  </div>
  <div class="form-group">
    <label>メールアドレス</label>
    <input name="entry.1028207000" type="email" placeholder="例：example@gmail.com" required>
  </div>
  <div class="form-group">
    <label>お問い合わせ内容</label>
    <textarea name="entry.61896323" rows="4" required></textarea>
  </div>
  <button type="submit">送信</button>
</form>

実際に動かしてみる

それではちゃんと紐付けできたか確認してみましょう。

適当に項目を埋めて送信をクリックします。

すると…

回答を記録しました。と表示されました！！

Googleフォームの管理画面でも確認してみましょう。

先ほどの回答がきちんと反映されています！

最後に

今回はGoogleフォームと自作フォームを連携させるだけの最小構成ですが、よりカスタマイズすればオリジナルデザインの確認画面に遷移させたり、Googleスプレッドシートと連携して管理者とユーザーに自動返信メールを送れたり柔軟なカスタマイズに対応できます。

コメント

タイトルとURLをコピーしました