最適化メモ

淡々と日々の「困った」や「調べたこと」「好きな本や漫画」を書くところ。Windows10関係多め

Googleお問い合わせフォームの作り方・設置方法【ブログカスタマイズ】

f:id:nano5656:20210612172137p:plain

無料でお問い合わせフォームを作ることが出来るGoogleフォーム。

取りあえず、問い合わせフォームを作らなきゃいけないらしいけど、作り方が分からない、どうしたら良いのか分からない人向け。

ブログに設置するのに、少しとまどったので、誰でも簡単に作れるよう、分かりやすく画像付きで説明していきます。

手順1:Googleフォームの設定方法

①:自分のGoogleアカウントにログインし、以下のGoogleフォームのホームページにアクセス。 

www.google.com

②:新しいフォームを作成するため、「空白」のボタンを押します。

f:id:nano5656:20210609204819p:plain

③:「無題のフォーム」が現れます。

f:id:nano5656:20210609205014p:plain

④:「無題のフォーム」を「お問い合わせ」に。下にある「フォームの説明」に適宜文章を入れます。

f:id:nano5656:20210609205209p:plain

⑤:下にある「無題の質問」を選択します。

f:id:nano5656:20210609205344p:plain

⑥:「お名前:」に変更。右にある「ラジオボタン」をクリックし、回答方法を「記述式」に変更します。

f:id:nano5656:20210609205514p:plain

⑦:右にある「+ボタン」をクリックすることで質問が追加出来るので、クリックし、質問を追加します。

f:id:nano5656:20210609205717p:plain

⑧:新しく質問欄が現れるので、「ご連絡先メールアドレス:」と打ち、回答方法は「記述式」にします。

f:id:nano5656:20210609205945p:plain

⑨:右下にある三点リーダのようなボタンをクリック。

f:id:nano5656:20210609210104p:plain

⑩:「回答の検証」をクリック。こうすることで、メールアドレス以外が打ち込まれた際のエラー時の文章を出現させることが出来ます。

f:id:nano5656:20210609210225p:plain

⑪:数値~から始まる欄が現れます。

f:id:nano5656:20210609210305p:plain

⑫:「数値」ボタンを押し、▼選択ボタンから、「テキスト」を選択です。

f:id:nano5656:20210609210534p:plain

⑬:「次を含む」ボタンを押し、▼選択ボタンから、「メールアドレス」を選択。

f:id:nano5656:20210609210649p:plain

⑭:「カスタムのエラーテキスト」と書いてある所に、任意の文章を記入します。例:「メールアドレスを確認して下さい」など。 

f:id:nano5656:20210609210813p:plain

⑮:⑦と同じ工程です。右にある「+ボタン」をクリックし、質問を追加。質問項目を「お問い合わせ内容:」に変更。⑥と同じように、「ラジオボタン」をクリックし、回答方法を「段落」に変更。記述式にすると、文章が短すぎて問い合わせの役に立たないため、ここでは必ず「段落」を選びます。

この際、企業や個人事業主の割合が強いサイトなどはあえて「段落」ではなく、「ラジオボタン」にし、問い合わせのカテゴライズをはかるのも有りです。

セミナー」「コンサルティング」「無料メール講座について」「資料請求について」「商品購入について」など、自サイトに必要な項目が作れるようになっているので、ラジオボタンを作ってから、更にもう一つ質問項目を追加し、それを「お問い合わせ内容」にし、長文対応出来るように「段落」にすると、スマートかもしれません。

f:id:nano5656:20210609210842p:plain

⑯:「お名前」「ご連絡先メールアドレス」「お問い合わせ内容」の三項目をそなえた最低限のフォームが完成。お疲れ様でした。 

手順2:Googleフォームの詳細設定

最低限のフォームが出来たところで、ここからは、Googleフォームの詳細設定です。

カラーやフォントなどカスタマイズ出来る箇所があるので、そちらを紹介します。

 

フォームのカラーを変更する

右上にあるパレットボタンから、お問い合わせフォームの色変更が可能です。背景色も選べるようになっていますので、お好きな色に変更して下さい。

f:id:nano5656:20210609215352p:plain

 

フォームのフォントを変更する

同じく右上にあるパレットボタンの下部、フォントスタイルから変更可能です。「ベーシック」、「デコラティブ」、「フォーマル」、「プレイフル」の四種から選べるようになっていますので、これも好きなものを選びましょう。

f:id:nano5656:20210609215724p:plain

 

フォーム入力後に表示する文章を設定する

右上にある歯車ボタン(設定)から、お問い合わせフォーム送信後に表示される文章を設定することが出来ます。

f:id:nano5656:20210609220331p:plain

設定をクリックすると、以下の画面が表示されます。一番下の「確認メッセージ」の部分に、適宜表示させたい文章を打ち込みましょう。

f:id:nano5656:20210609220748p:plain

この時、「別の回答を送信するためのリンクを表示」のチェックボックスも外しておきます。

これは、一度お問い合わせフォームに入力、送信した後に、もう一度、新規でフォーム入力・送信が出来る機能なので、個人的に不要と感じチェックを外しました。

f:id:nano5656:20210609221515p:plain

これで、Googleフォームの詳細設定は終了です。お疲れ様でした。

手順3:スプレッドシートと連携させる

次に、問い合わせ内容がスプレッドシートに自動でまとめられるように設定してきます。

①:上にある「回答」タブへ移動。緑十字のアイコンをクリックし、スプレッドシートを作成します。

f:id:nano5656:20210609222623p:plain

②:「新しいスプレッドシートを作成」にチェックが入っていることを確認し、下の「作成」ボタンを押します。「無題のフォーム(回答)」が気になる方は適宜フォーム名を記入して下さい。

f:id:nano5656:20210609222821p:plain

③:新しいタブが開かれ、スプレッドシートが開きます。

f:id:nano5656:20210609223050p:plain

ここで、フォームに送信された内容を見ることが出来ます。

手順4:入力テストをする

問い合わせフォームに実際に文字を打ち込み、きちんと動作するかテストします。

①:画面上の目のアイコンをクリックします。

f:id:nano5656:20210609224008p:plain

②:新しいタブで問い合わせフォームが開くので、適当な仮名や仮メルアドでテスト入力、送信ボタンをクリック。

※手順1:Googleフォームの設定方法の⑩で、メールアドレス以外が打ち込まれた際のエラー時の文章を設定しているので、該当箇所に平仮名など打ち込むとエラー時の文章を確認することが出来ます。

f:id:nano5656:20210609224642p:plain

③:送信後メッセージを設定している場合には、以下のように表示されます。

f:id:nano5656:20210609224958p:plain

④:先ほど作ったスプレッドシートのタブへ移動。入力送信した内容が表示されていれば、OKです。

f:id:nano5656:20210609225225p:plain

さあ、これでようやく実用化出来ます。

手順5:ブログやホームページにフォームを設置する

では、実際にブログやホームページにお問い合わせフォームを設置してみましょう。

①:Googleフォームの上にある「送信」ボタンをクリック。

f:id:nano5656:20210609230147p:plain

②:「フォームを送信」が開くので、「<>」タブを選択。「HTMLを埋め込む」からHTMLコードをコピーします。

f:id:nano5656:20210609231031p:plain

後は、自分のブログやホームページで記事を新規作成。

HTMLコードにコピーしたものを貼り付けで完成です。

幅と高さのピクセルはデフォルトのままで、特にいじらなくても、パソコンでもスマホでも綺麗に見ることが出来ました。逆にレスポンシブデザインにしようと幅を100%などにすると、デザインが崩れたので、そのままで良いようです。

まとめ

お問い合わせフォームを作る方法としては、HTMLやPHPでプログラムを自作したり、WordPressプラグインを使う、あるいはサードパーティー製のお問い合わせフォームを使う、と言う方法がありますが、そう言ったことが面倒、ハードルが高い、と感じる私にとっては、Googleフォームはとても分かりやすく、助かりました。

お問い合わせフォームを作る方法としては、一番簡単なのではないかと思います。

当サイトでは必要ないと判断しましたが、問い合わせを受けた際の自動返信メールを設定できたりもするようなので、必要な方はこちらのサイト→https://tonari-it.com/gas-form-autoreply/などを参照下さい。


参考サイト様:
https://tonari-it.com/create-google-form/
https://blastmail.jp/blog/mail/make-mailform
http://www.fans-google.com/form/f20.htm