web

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

2020-10-17

Google フォーム サムネイル
woman

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


 

今回は「お問い合わせフォーム」を簡単に作る方法。

HTMLやCSSを使って作るとなると勉強が必要になるので、単純、簡単に今回は設置する方法をお話します。
 

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

Google Apps Scriptを使いサクっと作りました。
 
このフォームを使うには

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

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


 

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

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

Googleフォームの概要

  • スプレッドシートと連携して登録内容を管理出来る。
  • フォーム数、追加項目無制限
  • 共有アカウントで管理者の追加が出来る。
  • 添付可能なファイルサイズ 最大10GB
    ※Googleドライブの容量以内
  • 添付可能なファイル数 10件
    ※Googleドライブの容量以内

など。


 

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

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


 
Google フォーム作成

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

 
Google フォーム 新規作成

まだ作ったことがないのでフォームはありませんが、新規で作る場合は上に表示されているテンプレート、もしくは「空白」を選んで作ります。

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

 
Google フォーム 作成についての詳細
 
フォームの中身を設定していきます。

  • 「無題のフォーム」 タイトル
  • 「フォームの説明」説明文

 

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

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

 
Google フォーム項目追加
 

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

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

必須、エラーの際の表示

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

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

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

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

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

エラーメッセージ
 

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

フォームの設定例

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

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

  • 「無題のフォーム」 お問い合わせ
  • 「フォームの説明」 お仕事のご依頼、お問い合わせにつきましてはこちらのフォームからお願いいたします。
  • 「お名前」記述式(必須)
  • 「メールアドレス」記述式(必須/回答の検証)
  • 「お問い合わせ項目」(プルダウン)
  • 「お問い合わせ内容 」段落

 

色などテーマの設定

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

変更出来るのは

  • ヘッダー画像の追加
  • テーマの色
  • 背景色
  • フォントスタイル

です。
 

解答後のメッセージ

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

「設定」→「プレゼンテーション」を開きます。
 
回答後のメッセージ

 

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

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

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

  • メール
  • リンク
  • コード
  • Facebook
  • Twitter

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

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

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

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

今回はWordpressで説明します。

 

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

WordpressにGoogleフォーム設置
 

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

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

 

完成品はこちらです。

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

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

まとめ

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

  • アンケート
  • ワークシート
  • 出欠確認
  • 招待状

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

HTMLやCSSでフォームを作るよりは手軽に作れます。
 
私は基本wordpressでサイトを作っているので、自動返信メールも設定出来るプラグインを使っていますので、Wordpressをお使いの場合はこちらで作るのもオススメします。


 

関連記事

  • この記事を書いた人
  • 最新記事

るしる(Lucir)

元バンドマンが10年のブランクを経て音楽活動をネットで再開し、DTMで楽曲制作したり、音楽ブログ運営してます。

-web
-