[コピペ可] Googleフォームでお問い合わせ機能を作る

Googleのツールを使った、お問い合わせフォームの作り方をご紹介します。簡単なので、エンジニアでなくてもできます。Qiitaのこちらの記事を参考にさせていただきました。Googleフォームを自在にカスタマイズする
WordPressの投稿ページや、固定ページのテキストモードの中に入れても機能するので、Contact Form7などのプラグインを使わなくても、お問い合わせ機能が作れるというお利口さん

FirebaseなどのGoogleが提供しているツールが何かと便利だというのは、エンジニアの学校で教わりましたが、サイト運営してる方も何かとお世話になることが多いと思います。お問い合わせフォームをちゃんと作るなら、PHPなどを触れるようにならないといけないみたいでしたが、古い言語でなんだか複雑なので、正直気が進みません。。

用紙するもの

・Google Chrome使用、検証機能を使います
・エディターツールのVisual Studio Codeをインストール
・Visual Studio CodeにPrettier – Code formatterという拡張機能をインストールしておきます（この画面では既にインストールされてます）

手順

① Googleフォームでお問い合わせフォームを作成しておきます。今回はシンプルに、名前、メールアドレス、メッセージの3項目です。（参考: https://ferret-plus.com/6385）

② htmlタグで、お問い合わせフォームを作っておきます。省略と書いてある箇所を埋めていく形になります

required というタグは、入力必須を指定するコードです。これを入れておくと、フォームの中が空白の状態で送信ボタンを押しても、先へ進めないので、ユーザーの入力忘れを阻止できます
placeholder=”○○○” は、フォームの中身に予め入れている文字です

ちなみに、この状態だと何もcssで装飾を全くしてないので、下のような超シンプルなものがブラウザの画面左上に表示されます

③ Googleフォームに戻り、右上の送信ボタンを押します

そうすると、リンクが出てくるのでこれををコピーして、Chromeで開きます

④ Chromeの検証ツール（表示 > 開発/管理 > デベロッパーツール、または⌘ + option + Iキー）でbodyタグの上を、右クリック > copy > Copy outerHTMLでコピー

⑤ Visual Studio Codeで新規ファイルを作成し、htmlファイルとして保存(○○○.htmlという拡張子)して、④でコピーしたものをペースト

⑥ このままだとコードが圧縮化されてて見づらいので、最初にVisual Studio Codeにインストールしておいた拡張機能を使います。全体を選択して（⌘ + A）、右クリック > ドキュメントをフォーマット > Prettier – Code formatterを選択して、圧縮化を解除

⑦ formResponse というキーワードで検索（⌘ + F）して中身をコピーして、②のactionタグの中身（“ ”カッコで括られてる箇所）にペーストします。検索してもひとつしか出てきません

⑧ 次に、entry というキーワードで検索してnameの、名前、メールアドレス、メッセージ、それぞれの中身をコピーして②の各項目にペースト。検索すると、3項目設定したので３つ出てきます