Googleフォームを使ってお問い合わせ機能を実装する

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Googleフォームの基礎知識が増える
・ お問い合わせ機能をマークアップ言語とGoogleフォームで実装する方法

前置き

基本的に、お問い合わせ機能の実装には、PHPなどのプログラミング言語の知識が不可欠と思いますが
そういったプログラミング言語を使わず、マークアップ言語とGoogleフォームを使った実装をしていきます。

・ このような方にお勧めします

・ HTMLとCSSでフォームを作り、入力した内容を実際により簡潔に送信させたい
・ PHPの知識を使わずにお問い合わせフォームを実装させたい
・ ご自身のポートフォリオサイトにお問い合わせフォームを設置したい

・ Googleフォームを使うメリット

・ 面倒なPHPのコードを書く手間が省くことができる
・ プログラミング初心者でも簡単にお問い合わせフォームを実装することができる
・ 運用面でも万能で、入力内容をスプレットシートに反映でき、設置フォームの内容の編集も容易

Googleフォームを使いますので、Googleアカウントが必要です

手順

① ビューを作る

GoogleフォームはHTMLの埋め込みコードを生成することができるので、ビューを作らない場合は
埋め込みコードをそのまま貼り付けることで、埋め込むサイトによっては違和感が起きますが、これだけで実装することができます。

イメージしやすいように実装例を載せます。

② Googleフォームでお問い合わせフォームを作る

ご自身のGoogleアカウントでログインし、Googleフォームにアクセスし、連絡先情報をクリックします。

表示されている連絡先情報の各項目が、そのまま上記例のお問い合わせフォームになるように編集します。

これでフォームは完成です。

③ ソースコードを埋め込む

続いて「送信」→「送信方法の真ん中のボタン」をクリックし、リンクのURLをコピーしてアクセスします。

コピーしたURLにアクセスして、作成したフォーム画面で「右クリック」→「検証ツール」を開き
control + Fで検索ウィンドウを呼び出し、<Formと入力します。

<Formで検索した同部分が黄色く表示されるので、URL部分をコピーして

エディタ（ここに貼り付けます）に貼り付けていきます。

.container-contact
  %p.top Contact
  .header-line.middle
  %p SNSでもお問い合わせ頂けます
  .form
    %form{action: "ここに貼り付けます", method: "post",class:"form"}
      %input(type="text" name="" value="" placeholder="Your Name")/
      %input(type="text" name="" value="" placeholder="Your Email")/
      %input(type="text" name="" value="" placeholder="Subject")/
      %textarea(name="" placeholder="messages...")
      %button Submit

名前やEメールについてはentryと検索すると、各項目の名前は出ませんが
順番（今回の場合は、名前・Eメール・件名・メッセージ）に並んで出ますので

同じようにコピーしてエディタ（name=""のところ）に各項目毎に貼り付けて完成です。

.container-contact
  %p.top Contact
  .header-line.middle
  %p SNSでもお問い合わせ頂けます
  .form
    %form{action: "https://hogehoge", method: "post",class:"form"}
      %input(type="text" name="entry.1234567890" value="" placeholder="Your Name")/
      %input(type="text" name="entry.1234567890" value="" placeholder="Your Email")/
      %input(type="text" name="entry.1234567890" value="" placeholder="Subject")/
      %textarea(name="entry.1234567890" placeholder="messages...")
      %button Submit

試しにメッセージを送ってみます。

きちんと内容通り届いている事が確認できました。