Googleフォームでサイトに「お問い合わせフォーム」を設置する

自分のブログやポートフォリオサイトに「お問い合わせ」フォームを設置したいんだけど簡単に作れないかな？

HTMLやCSSを使って作るとなると勉強が必要になるので、

単純、簡単に今回は設置する方法をお話します。

お仕事用、お問い合わせようにGmailを使っている人も多いでしょうし、実際自分も使っているので今回は

Google Apps Scriptを使いサクっと作りました。

このフォームを使うには

• Googleアカウント
• Gmailアドレス

が必要になるので、お持ちでない場合はまず作成しておいてください。

Googleフォームで出来ること。

まずGoogleフォームで出来ることをまとめました。

Googleフォームで「お問い合わせ」を作る。

まずこちらのサイトを開きます。

パーソナルの「Googleフォームを使ってみる」をクリックします。

まだ作ったことがないのでフォームはありませんが、

新規で作る場合は上に表示されているテンプレート、もしくは「空白」を選んで作ります。

今回は「空白」で作ることにします。

フォームの中身を設定していきます。

項目については右にあるアイコンから追加出来ます。

プレビュー、色、設定は画面右上のアイコンから出来ます。

テキスト入力欄やチェックボックス、ラジオボタン。

画像や動画の挿入も出来ます。

必須、エラーの際の表示

必須項目や、入力時のエラーに対するコメントも設定出来ます。

項目の詳細を決める画面下に以下のボタンがあります。

必須項目にしたい場合は、必須をONにしておきます。

回答に対するテキスト表示をさせたい時は「回答の検証」を開いて設定します。

プルダウンから項目を選べるようになっています

上記はメールアドレスの入力欄に、それ以外の物が記入された時に出るエラ〜メッセージの作り方です。

フォームの設定例

私は今回ポートフォリオサイトのお問い合わせフォームを作ることにしました。

設定内容はこちらのようになります。

色などテーマの設定

デザインの設定は画面右上のパレットのアイコンをクリックします。

変更出来るのは

です。

解答後のメッセージ

送信した後に表示するメッセージも設置できます。

「設定」→「プレゼンテーション」を開きます。

確認メッセージの部分に表示させたいテキストを記述して保存します。

フォームが完成したら「送信」

フォームが完成したら画面右上にある「送信」をクリックします。

フォームの使い方として

がありますが、今回はサイトに設置するので、送信方法の「<>」をクリックしコードをコピーします。

幅や高さを変えたい時はここで調節してからコピーします。

Googleフォームをサイトに設置する。

コピーしたコードはHTMLファイルに貼り付けます。

今回はWordpressで説明します。

お問い合わせのページの編集画面を開き、設置したい部分に貼り付けます

Gutenberg（グーテンベルグ）を使う場合は「カスタムHTML」を選んでコードを貼り付けます。

クラシックエディターの場合はビジュアルモードではなく、テキストの編集画面で貼り付けてください。

完成品はこちらです。

高さが短すぎたのか、横にスクロールバーが表示されてしまったのでコピーしたコードを、

height="868"からheight="1200"に修正しました。

まとめ

googleフォームはお問い合わせフォームだけでなく

なども作れます。

フォームは保存も出来るので、複数のサイトを持つ場合はコードをコピーすれば良いだけなので便利。

HTMLやCSSでフォームを作るよりは手軽に作れます。

私は基本wordpressでサイトを作っているので、自動返信メールも設定出来るプラグインを使っていますので、Wordpressをお使いの場合はこちらで作るのもオススメします。