お問合せフォーム - Google フォーム

Googleフォーム作成

Googleドライブ - Googleフォーム

お名前（記述式）：必須
メールアドレス（記述式）：必須
お問い合わせ内容（段落）

新規スプレッドシートとリンクする

お問い合わせ内容を記録しておく

Googleフォームの値を取得

「送信」を押す
「リンク」を表示してアドレスを「コピー」
コピーしたアドレスをブラウザーで表示
「検証」で「form」要素を検索

以下の４つの値を記録しておく

<form action="https://docs.google.com/forms/u/0/d/e/FAIpQLSfIZVDwblQm2Z2U8CNQDSBWDDSUpWyGExD8JLZnDYoTMr9KtA/formResponse">

 <input type="hidden" name="entry.146223879" value="">
 <input type="hidden" name="entry.62381146" value="">
 <input type="hidden" name="entry.765051971" value="">

HTML内に記述

<form 
  action="https://docs.google.com/forms/u/0/d/e/FAIpQLSfIZVDwblQm2Z2U8CNQDSBWDDSUpWyGExD8JLZnDYoTMr9KtA/formResponse" 
  method="post" 
  target="hidden_iframe"
  onsubmit="submitted=true;"
  class="form">
  <div class="form__item">
    <label class="form__label" for="field-name"
      >名前<span class="form__required">必須</span></label
    >
    <input
      name="entry.146223879" 
      class="form__input"
      id="field-name"
      placeholder="田中"
      type="text"
      required="required"
    />
  </div>
  <div class="form__item">
    <label class="form__label" for="field-mail"
      >メールアドレス<span class="form__required">必須</span></label
    >
    <input
      name="entry.62381146" 
      class="form__input"
      id="field-mail"
      placeholder="sample@gmail.com"
      type="email"
      required="required"
    />
  </div>
  <div class="form__item">
    <label class="form__label" for="field-message">お問い合わせ内容</label>
    <textarea
      name="entry.765051971" 
      class="form__input"
      id="field-message"
      placeholder="お問い合わせ内容"
    ></textarea>
  </div>
  <div class="form__submit">
    <button type="submit">送信する</button>
  </div>
</form>

Thanksページを表示

送信後に「Thanksページ」に遷移させる

<script>
  let submitted = false;
</script>
<iframe
  name="hidden_iframe"
  id="hidden_iframe"
  style="display: none"
  onload="if(submitted){window.location='thanks.html';}"
></iframe>

Thanksページ作成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Thanks</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <p class="thanks">お問い合わせありがとうございました。</p>
  <p class="thanks"><a href="index.html">ホーへ戻る</a></p>
</div><!-- /.container -->
</body>
</html>