はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。
・ 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
試しにメッセージを送ってみます。
きちんと内容通り届いている事が確認できました。
