
自分のブログやポートフォリオサイトに「お問い合わせ」フォームを設置したいんだけど簡単に作れないかな?
今回は「お問い合わせフォーム」を簡単に作る方法。
HTMLやCSSを使って作るとなると勉強が必要になるので、単純、簡単に今回は設置する方法をお話します。
この記事がおすすめの人
- イベントの専用申し込みフォームを作りたい
- アンケートを作ってメールで受け付けたい
- 仕事用の問い合わせ窓口を作りたい
- ブログなどの問い合わせフォームを作りたい
お仕事用、お問い合わせようにGmailを使っている人も多いでしょうし、実際自分も使っているので今回は
Google Apps Scriptを使いサクっと作りました。
このフォームを使うには
- Googleアカウント
- Gmailアドレス
が必要になるので、お持ちでない場合はまず作成しておいてください。
Googleフォームで出来ること。
まずGoogleフォームで出来ることをまとめました。
Googleフォームの概要
- スプレッドシートと連携して登録内容を管理出来る。
- フォーム数、追加項目無制限
- 共有アカウントで管理者の追加が出来る。
- 添付可能なファイルサイズ 最大10GB
※Googleドライブの容量以内 - 添付可能なファイル数 10件
※Googleドライブの容量以内
など。
Googleフォームで「お問い合わせ」を作る。
まずこちらのサイトを開きます。
Google Forms を使用して、さまざまな質問形式でオンライン フォームやアンケートを作成しましょう。どのデバイスでもリアルタイムで結果を分析できます。 続きを見る
Google Forms: オンライン フォーム作成ツール | Google Workspace
パーソナルの「Googleフォームを使ってみる」をクリックします。
まだ作ったことがないのでフォームはありませんが、新規で作る場合は上に表示されているテンプレート、もしくは「空白」を選んで作ります。
今回は「空白」で作ることにします。
フォームの中身を設定していきます。
- 「無題のフォーム」 タイトル
- 「フォームの説明」説明文
項目については右にあるアイコンから追加出来ます。
プレビュー、色、設定は画面右上のアイコンから出来ます。
テキスト入力欄やチェックボックス、ラジオボタン。
画像や動画の挿入も出来ます。
必須、エラーの際の表示
必須項目や、入力時のエラーに対するコメントも設定出来ます。
項目の詳細を決める画面下に以下のボタンがあります。
必須項目にしたい場合は、必須をONにしておきます。
回答に対するテキスト表示をさせたい時は「回答の検証」を開いて設定します。
プルダウンから項目を選べるようになっています
上記はメールアドレスの入力欄に、それ以外の物が記入された時に出るエラ〜メッセージの作り方です。
フォームの設定例
私は今回ポートフォリオサイトのお問い合わせフォームを作ることにしました。
設定内容はこちらのようになります。
- 「無題のフォーム」 お問い合わせ
- 「フォームの説明」 お仕事のご依頼、お問い合わせにつきましてはこちらのフォームからお願いいたします。
- 「お名前」記述式(必須)
- 「メールアドレス」記述式(必須/回答の検証)
- 「お問い合わせ項目」(プルダウン)
- 「お問い合わせ内容 」段落
色などテーマの設定
デザインの設定は画面右上のパレットのアイコンをクリックします。
変更出来るのは
- ヘッダー画像の追加
- テーマの色
- 背景色
- フォントスタイル
です。
解答後のメッセージ
送信した後に表示するメッセージも設置できます。
「設定」→「プレゼンテーション」を開きます。
確認メッセージの部分に表示させたいテキストを記述して保存します。
フォームが完成したら「送信」
フォームが完成したら画面右上にある「送信」をクリックします。
フォームの使い方として
- メール
- リンク
- コード
がありますが、今回はサイトに設置するので、送信方法の「<>」をクリックしコードをコピーします。
幅や高さを変えたい時はここで調節してからコピーします。
Googleフォームをサイトに設置する。
コピーしたコードはHTMLファイルに貼り付けます。
今回はWordpressで説明します。
お問い合わせのページの編集画面を開き、設置したい部分に貼り付けます
Gutenberg(グーテンベルグ)を使う場合は「カスタムHTML」を選んでコードを貼り付けます。
クラシックエディターの場合はビジュアルモードではなく、テキストの編集画面で貼り付けてください。
完成品はこちらです。
高さが短すぎたのか、横にスクロールバーが表示されてしまったのでコピーしたコードを、
height="868"
からheight="1200"
に修正しました。
まとめ
googleフォームはお問い合わせフォームだけでなく
- アンケート
- ワークシート
- 出欠確認
- 招待状
なども作れます。
フォームは保存も出来るので、複数のサイトを持つ場合はコードをコピーすれば良いだけなので便利。
HTMLやCSSでフォームを作るよりは手軽に作れます。