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

## はじめに

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

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

## 前置き

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

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

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

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

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

<font color="red">Googleフォームを使いますので、Googleアカウントが必要です</font>

## 手順

##### ① ビューを作る

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

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

![スクリーンショット 2020-12-04 11.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/dbab1935-dc13-cb5a-7a98-701b53c485f3.png)

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

ご自身のGoogleアカウントでログインし、[Googleフォーム](https://docs.google.com/forms/)にアクセスし、連絡先情報をクリックします。

![スクリーンショット 2020-12-04 11.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/7968ae48-2cce-5570-0fe2-c2dfad83d379.png)

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

![screencapture-docs-google-forms-d-1eM28d1tSZ-Ehg1WhBGvIqwxpeb2wfKe-wUBvRvU1nl8-edit-2020-12-04-13_35_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/ca24ab07-d2da-256a-e667-7de05651f2bf.png)

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

![screencapture-docs-google-forms-d-13f8zfct3FtHa57mtJUokT-jTeqPMmRN6Zbrr1YJPb4-edit-2020-12-04-13_52_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/7aa1b0fd-7dab-b695-10dd-4a7f620a607f.png)

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

![スクリーンショット 2020-12-04 13.54.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/576e07d8-ee31-b9ff-6bfe-5e0fe76490cc.png)

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

![スクリーンショット 2020-12-04 14.29.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/6555b107-6ce6-5caa-a0e2-db5c2e7c36f7.png)

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

![スクリーンショット 2020-12-04 14.31.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/4ac4e2a8-e06f-d6ba-d9ec-435438439aac.png)

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

```haml:index.haml
.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メール・件名・メッセージ）に並んで出ますので

![スクリーンショット 2020-12-04 14.46.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/a59b509e-d11d-47ed-7f4f-cb3c5d96d547.png)

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

```haml:index.haml
.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
```

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

![スクリーンショット 2020-12-04 15.01.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/f69c2a4c-0bb8-5935-4925-b263cb9acdb4.png)

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

![screencapture-docs-google-forms-d-13f8zfct3FtHa57mtJUokT-jTeqPMmRN6Zbrr1YJPb4-edit-2020-12-04-15_03_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/37cf483a-b7cf-83d1-385d-c6eda5f57967.png)