GoogleForm | HTMLページへの埋め込み ①

Other
スポンサーリンク

GoogleFormは自分でWebサイトを作る時に、簡単で気軽に安全に使えるありがたいツールです。
しかし、このGoogleForm、見た目がイマイチ。そこでGoogleFormをオリジナルのHTMLページに埋め込んで自然な問い合わせフォームに変える方法をご紹介します。

sugar
sugar

最近は企業サイトでアンケートとしてGoogleフォームを使っているのをよく見かけるよ。

mik
mik

Googleアカウントさえあればすぐに設置できるし、PHPの自作フォームと比べるとサイトを置いているWebサーバのリスク対応にもなるから一石二鳥なんだよね。

フォームの送信・受信は確認済ですが、エラー時のサポートは行っておりません。

全体の流れ

操作手順

1.今回やること

GoogleFormで作った問い合わせフォームをオリジナルで作成したHTMLの問い合わせページに作り替えていきます。

2.HTMLページの作成

送信者の名前とメールアドレス、用件というシンプルな入力項目を入れたフォームをHTMLとCSSで作っていきましょう。

フォルダ構成

  • contact.html 問い合わせページ
  • thanks.html 送信後に表示するお礼ページ
  • ress.css リセットCSS (参照先：https://github.com/filipelinhares/ress　）
  • style.css サイトのデザインを決めているスタイルCSS

contact.html

問い合わせページのHTMLのコードになります。

sugar
sugar

コピペOKだよ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="GoogleFormのHTML化" />
  <title>お問い合わせフォーム</title>
  <link href="ress.css" media="all" rel="stylesheet" type="text/css" />
  <link href="style.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="wrapper">
    
    <!-- Header -->
    <header class="header ">
      <div class="container">
        <p class="header-logo">
          <a href="#">DEMO</a>
        </p>
        <nav class="gnav">
          <ul class="gnav-list">
            <li class="gnav-item"><a href="#">MENU1</a></li>
            <li class="gnav-item"><a href="#">MENU2</a></li>
            <li class="gnav-item"><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Main -->
    <main class="content">
      <section class="section" id="contact">
        <div class="container">
          <h2 class="title">お問い合わせ</h2>
        <div class="wrapper">
          <form>
          <dl>
            <dt><label for="name">お名前</label></dt>
            <dd><input type="text" id="name" name="your-name" required="required"></dd>
            <dt><label for="email">メールアドレス</label></dt>
            <dd><input type="email" id="email" name="your-mail" required="required"></dd>
            <dt><label for="message">ご用件</label></dt>
            <dd><textarea id="message" name="your-message"></textarea></dd>
          </dl>
          <div class="button"><input type="submit" value="送信"></div>
          <p class="reset"><input type="reset" value="リセット" /></p>
        </form>
      </div>
        </div>
      </section>
    </main>

    <!-- footer -->
    <footer class="footer">
      <div class="container">
        <p>&copy; DEMO</p>
      </div>
    </footer>

  </div>
</body>
</html>

必須項目には必ず inputタグ内にrequired=”required”を入れます。

thanks.html

メールを送信した後、「お問い合わせありがとうございました」を表示するためのページを作っていきます。

sugar
sugar

コピペOK！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="GoogleFormのHTML化" />
  <title>お問い合わせフォーム</title>
  <link href="ress.css" media="all" rel="stylesheet" type="text/css" />
  <link href="style.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="wrapper">

    <!-- Header -->
    <header class="header ">
      <div class="container">
        <p class="header-logo">
          <a href="#">DEMO</a>
        </p>
        <nav class="gnav">
          <ul class="gnav-list">
            <li class="gnav-item"><a href="#">MENU1</a></li>
            <li class="gnav-item"><a href="#">MENU2</a></li>
            <li class="gnav-item"><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- Main -->
    <main class="content">
      <section class="section" id="thanks">
        <div class="container">
          <h2 class="title">Thank You</h2>
        <div class="wrapper">
        <p>お問い合わせありがとうございました。</p>
      </div>
        </div>
      </section>
    </main>

    <!-- footer -->
    <footer class="footer">
      <div class="container">
      </div>
    </footer>

  </div>
</body>
</html>

style.css

この後作る「thanks.html」も含めたサイト全体のデザインを決めるスタイルシートのコードになります。

sugar
sugar

これもコピペOK！

@charset "UTF-8";

/*　header　*/
body {
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 16px;
  letter-spacing: .05em;
  color: #333;
}

a {
  transition: opacity .3s;
  text-decoration: none;
  color: #28988C;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

.wrapper {
  padding-top: 70px;
}

.section {
  padding: 90px 0  60px;
}

.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px;
}

.title {
  font-size: 34px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 40px;
  padding-top: 40px;
  text-align: center;
  letter-spacing: .05em;
  color: #333;
}

/*　header　*/
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
}

.header-logo {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2;
  margin-right: 20px;
  letter-spacing: .05em;
}

.header-logo a {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
}

.header-logo a:hover {
  opacity: 0.9;
}

/*　global navigation　*/
.gnav-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.gnav-item:not(:last-child) {
  margin-right: 20px;
}

.gnav-item a {
  position: relative;
  font-size: 0.9em;
  font-weight: bold;
  display: inline-block;
  padding: 5px 0;
  transition: .3s;
  letter-spacing: .05em;
  color: #333;
}

.gnav-item a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  content: "";
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #28988C;
}

.gnav-item a:hover:after {
  width: 100%;
}

/*　contact　*/
#contact {
  background-color: rgba(237, 241, 241, 0.5);
  color: #333;
}

#contact .container {
  margin: 0 auto;
  padding: 0px 20px 10px;
}

#contact .wrapper {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1rem;
  padding: 60px 20px;
  background-color: #fff;
}

#contact dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#contact dt {
  width: 15%;
}
#contact dd {
  width: 85%;
  margin-bottom: 10px;
}
#contact dd input,
#contact dd textarea {
  width: 90%;
  border: solid 1px #777;
  padding: 10px;
  border-radius: 5px;
}
#contact dd textarea {
  height: 10rem;
}
#contact .button {
  text-align: center;
}
#contact .reset {
  text-align: center;
  margin-top: 20px;
  font-size: 1em;
}
#contact .button input {
  width: 200px;
  background-color: #28988C;
  color: #fff;
  padding: 15px 0;
  border: solid 2px #28988C;
  border-radius: 2px;
  opacity: 1;
}
#contact .button input:hover {
  opacity: 0.8;
}

input[type="reset"] {
	text-decoration: underline;
}

input[type="reset"]:hover {
  opacity: 0.7;
}

/* Thanks */
#thanks {
  background-color: rgba(237, 241, 241, 0.5);
  color: #333;
}

#thanks .container {
  margin: 0 auto;
  padding: 20px 20px 10px;
  min-height: 600px;
}

#thanks .wrapper {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1rem;
  padding: 60px 20px;
  background-color: #fff;
}

#thanks p {
  text-align: center;
}

/*　footer　*/
.footer {
  padding: 20px;
  background-color: #333;
  min-height: 120px;
}

.footer p {
  text-align: center;
  color: #FFF;
  margin-top: 20px;
}

/*--------------------------------
SP
---------------------------------*/
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .wrapper {
    padding-top: 57px;
  }

  .section {
    padding: 60px 0;
  }

  .container {
    padding: 0 20px;
  }

  .header .container {
    padding: 15px;
  }

  .header-logo {
    font-size: 15px;
    margin-right: 15px;
  }

  .gnav-item:not(:last-child) {
    margin-right: 10px;
  }

  .gnav-item a {
    font-size: 0.8em;
  }

  .gnav-item a:after {
    display: none;
  }

  #contact dl {
    flex-direction: column;
  }
  #contact dt {
    width: 100%;
  }
  #contact dd {
    width: 100%;
  }
  #thanks .container {
    padding: 0px 20px;
    min-height: 200px;
  }
  .footer {
    padding: 20px;
    color: #FFF;
  }

}

contact.htmlをブラウザで表示すると以下のようになります。

mik
mik

GoogleFormを作った後、contact.htmlを修正するけど、HTMLCSS作業はここで中間終了。次にGoogleFormを作っていくよ。

3. Googleフォームを作る

GoogleFormで問い合わせページを作成

持っているGoogleアカウントでGoogleFormにログインし、問い合わせフォームを作ります。
今回作る入力項目は「送信者の名前」、「メールアドレス」、「問い合わせ内容」と必要最低限にしています。

HTMLページでrequired=”required”を入れた項目はGoogleFormで必須にしておきます。

sugar
sugar

Googelフォームって作ったことないんだけど…

mik
mik

そんな時はこの記事を参考にしてみて。

【2024年完全版】Googleフォームの使い方を徹底解説｜作り方から作成例まで詳しく紹介 | formLab
Googleフォームは無料で手軽にフォームを作成できるシンプルで使い勝手の良いサービスです。仕事だけでなくプライベートでも活用することができます。本記事ではGoogleフォームの特徴やフォームの作成手順、実際の作成例を紹介。初心者にも分かり...
form.run

送信テストをする

GoogleFormで作成したフォームが正常に機能するか、送信テストを行います。
テスト送信した後、再度GoogleFormにログインし、回答シートに送信内容が反映されているか確認します。

テスト花子（hanako@abc.jp)がテスト送信した場合

回答シートはGoogleFormを開いている状態で「回答」タブ→「スプレッドシートに送信」→（回答シートを新規か、既存か選択）して用意しておきます。

mik
mik

GoogleFormの送信テストが終わったら、次はいよいよHTMLの埋め込みへ！続きは②でね。

GoogleForm | HTMLページへの埋め込み ②
前の記事で作成したGoogleフォームから必要パーツを抜き出してオリジナルのHTMLページに埋め込んでいきます。
devmilk.biz
2024.09.02