Webデザインが学べるコミュニティを作りました!

無料で簡単にお問い合わせフォームが作れる!Googleフォームの作り方

masaca(@masaca_dApps)です。

Webサイトにお問い合わせ機能が欲しいけど、予算や制作時間の都合でフォーム機能を作ったりするのは難しかったりしますよね。

Googleフォームを使えば、知識がなくても簡単に無料でブログやWebサイトにお問い合わせフォームを作ることができます。

簡易的なWebサイトやブログのシンプルなお問い合わせフォームであれば、Googleフォームを使えば5分で設置できてしまいます。

作り方の手順をわかりやすく解説していきますね。

masaca

masacaのブログもサッと設置したかったのでGoogleフォームを使ったよ。

お問い合わせフォームの作り方

上記のような、シンプルなお問い合わせフォームを作ってみましょう。

Googleフォームを使うためにはGoogleのアカウントが必要です。ログイン状態にしておきましょう。

Googleドライブからもアクセス可能です。
左上の「新規」ボタンから「その他」→「Googleフォーム」

Googleフォームにアクセスするとこのような画面が表示されています。

お問い合わせの項目を追加する

お問い合わせの項目を設定しましょう。以下の手順で項目が作れます。

1.フォームの名前をつける

画像①の部分を入力して、お問い合わせフォームのタイトルをつけましょう。

2.項目名をつける

画像②「お名前」や「メールアドレス」など、入力項目をつくりましょう。

3.プルダウンで形式を設定する

画像③のプルダウンから、「記述式」を選択します。

4.必須を設定する

画像④のスライドボタンで必須に設定します。

そのほかの項目を作る

この手順で「お名前」、「ご連絡先メールアドレス」、「お問い合わせ内容」の項目を作ります。

お問い合わせ内容だけはプルダウンから「段落」を選びます。
以下のようなお問い合わせフォームが完成しました。

お問い合わせ後のメッセージの変更をする

右上の歯車マークのアイコンから、「プレゼンテーション」を選択肢し画像のようなお問い合わせ後に表示されるメッセージを設定します。

通知設定をする

お問い合わせフォームに連絡がきたら、メールで通知されるように設定します。
ログインしているアカウントのGmailに届きます。

回答のタブから、右の十字アイコンを選択して「新しいスプレッドシートを作成」を選択すると、スプレッドシートに移動します。

スプレッドシートに移動したら、「ツール」→「通知ルール」から画像の項目にチェックを入れると、ユーザーからフォームが送信されるたびにメールに通知がいくようになります。

フォームのテストをする

右上の「目のアイコン」でフォームのテストができます。
項目を入力して実際にメールの通知が来ているか、問い合わせ内容が届いているか確認しましょう。

回答のタブで送信内容は確認できます。通知設定をした際のスプレッドシートでも内容を確認できます。
動作に問題なければ完了です。

サイトやブログに設置する

右上の「送信」ボタンからHTMLを埋め込むに表示されているコードを、Webサイトのフォームを設置したい部分にコピペするとフォームを埋め込むことができます。

ブログの場合は記事の投稿部分にコピペをすれば簡単にフォームを設置できます。

まとめ

Googleフォームを使えば、知識がなくてもお問い合わせフォームが無料で簡単につくれます。
Webサイトやブログで簡易的に設置したい場合は活用してみてくださいね。

masaca

お手軽にお問い合わせフォームを設置したいときは便利だね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA