【コーディング不要】簡単にお問い合わせフォームを作る方法【WordPress】

【コーディング不要】簡単にお問い合わせフォームを作る方法【WordPress】 WordPress

こんにちは、mickです。

・プログラミングの知識なしでお問い合わせフォームが作りたい
・問い合わせフォームのためにどこかに新規契約したくない
・WordPressのプラグインをこれ以上増やしたくない

こんな要望にお答えします。

WordPressのプラグインを使って作るこちらの記事も参考にしてみてください。

お問い合わせフォームはひとつの窓口

ブログにお問い合わせフォームがあれば、ユーザーがブログの運営者に問い合わせをしたいときに便利。

  • メールで送るには、メーラー(アプリ)を使うから面倒
  • コメントに書くのは気が引ける
  • 返信不要だけれどコメントは送りたい

ブログを訪れてくれた人の要望をかなえる手段になります。
また、ブログにコメント機能がないときにも運営者とユーザーとの間のひとつの窓口、架け橋になります。

WordPressお問い合わせフォーム作成方法

必要な物は「Googleアカウント」のみです。

WordPressを使っている管理者なら、「Google Analystics」や「Google Search Console」を使うためにGoogleアカウントは持っているはず。

持っていなかったらいますぐに作りましょう。

⇒ Googleアカウントを作成する(Google公式)

大まかな作業の流れ

・Googleフォームを作る
・Googleスプレッドシートと連携する
・GoogleフォームのHTMLを取得する
・WordPressの固定ページを作る
・固定ページにGoogleフォームのHTMLを貼り付る

具体的な方法:GoogleフォームをWordPressに貼り付ける

ブログのお問い合わせフォームには、Googleフォームを利用します。

整った入力フォームや、入力結果をメールやGoogleスプレッドシートで受け取れる。
さらには集計もしてくれるため使わない手はありません。

Google(Gmail)にログインする
Google(Gmail)にログインする

まずはGoogle(Gmail)にログイン。

メールアドレスまたは電話番号を入力して次へ
メールアドレスまたは電話番号を入力して次へ

ログインIDとなるメールアドレスを入力して「次へ」。

パスワードを入力して次へ

パスワードを入力して「次へ」。

右上のメニューから「スプレッドシート」を選択する
右上のメニューから「スプレッドシート」を選択する

Gmailの右上にあるメニューから「スプレッドシート」を選択。

左上のメニューから一覧を出す
左上のメニューから一覧を出す
一覧からフォームを選択する
一覧からフォームを選択する

「Googleスプレッドシート」の左上にあるメニューから「フォーム」を選択。

空白の新しいフォームを作成する
空白の新しいフォームを作成する

「空白」の「新しいフォームを作成」していきます。

お問い合わせフォームを作る

新しいお問い合わせフォームを作っていきます。

ファイルとフォームのタイトルを入力する
ファイルとフォームのタイトルを入力する

ファイルのタイトル「お問い合わせ」。
フォームのタイトル「 」←半角スペースを入力。

これは基本情報になります。

フォームのタイトルはちょっとした裏技

フォームのタイトルは、WordPressのタイトルを利用します。
ところがGoogleフォームのタイトルは必須入力項目。
このままだとWordPressのタイトルとGoogleフォームのタイトルが2つでてしまいます。

そのため画面にでてこないように「 」半角スペースを入力しておきます。

次にユーザーに入力してもらう項目を作っていきます。
項目は次の4つ。

  1. お名前
  2. メールアドレス
  3. 題名
  4. メッセージ本文

「お名前」の項目を作ります。

お名前の入力フォームを作る
お名前の入力フォームを作る

「無題の質問」を「お名前」に変更。
「ラジオボタン」を「記述式」に変更。
「必須」は「オン」にします。

フォームの右側にあるメニューから質問の追加をする
フォームの右側にあるメニューから質問の追加をする

質問の追加は、フォームの右側にあるメニュー「質問の追加」をクリック。

「メールアドレス」の項目を作ります。

メールアドレスの入力フォームを作る
メールアドレスの入力フォームを作る

「無題の質問」を「メールアドレス」に変更。
「ラジオボタン」を「記述式」に変更。
「必須」は「オン」にします。

メールアドレスの収集機能がありますが、少し複雑になるため使いません。

「題名」の項目を作ります。

題名の入力フォームを作る
題名の入力フォームを作る

「無題の質問」を「題名」に変更。
「ラジオボタン」を「記述式」に変更。

最後に「メッセージ本文」の項目を作ります。

メッセージ本文の入力フォームを作る
メッセージ本文の入力フォームを作る

「無題の質問」を「メッセージ本文」に変更。
「ラジオボタン」を「段落」に変更。

これでお問い合わせフォームは完成です。

設定からお問い合わせ後のメッセージを決める
設定からお問い合わせ後のメッセージを決める

さらに「設定」からお問い合わせフォームを送信したあとに表示する言葉を決めておくとユーザーも安心です。

お問い合わせ後にだす確認メッセージを決める
お問い合わせ後にだす確認メッセージを決める

入力結果をGoogleスプレッドシートに送る

お問い合わせフォームの入力結果は、Googleスプレッドシートで集計を行います。
Googleスプレッドシートに入れておくと、あとでまとめて処理ができて便利です。

回答タブから回答内容をスプレッドシートに送る
回答タブから回答内容をスプレッドシートに送る

「回答」タブをクリック。
「スプレッドシート」のアイコンがあるのでクリックします。

新しいスプレッドシートに回答内容を送る
新しいスプレッドシートに回答内容を送る

「新しいスプレッドシートを作成」します。
ファイル名を決めたら、「作成」をクリックしてOKです。

保存先のGoogleスプレッドシート
保存先のGoogleスプレッドシート

これでお問い合わせフォームの入力結果はすべてGoogleスプレッドシートに記録されます。

プレビューから動作確認ができる
プレビューから動作確認ができる

「プレビュー」から動作確認をしておきます。

作ったお問い合わせフォームの動作確認
作ったお問い合わせフォームの動作確認

お問い合わせフォームに入力テスト。

お問い合わせ送信後に出てくるメッセージ
お問い合わせ送信後に出てくるメッセージ

送信後に出てくるメッセージ。

お問い合わせの結果はGoogleスプレッドシートに保存
お問い合わせの結果はGoogleスプレッドシートに保存

入力の内容はGoogleスプレッドシートに保存。

GoogleフォームのHTMLを取得する

WordPressの固定ページに作ったお問い合わせフォームを貼り付けます。
そのためにお問い合わせフォームのHTMLを取得します。

送信ボタンからフォームのHTMLを取得する
送信ボタンからフォームのHTMLを取得する

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

フォームのHTMLを取得する
フォームのHTMLを取得する

「フォームの送信」で「<>」タブを選んで、「HTMLを埋め込む」にあるHTMLをコピーします。

WordPressの固定ページを作成する

Googleフォームで作ったお問い合わせフォームをWordPressの固定ページに貼り付けます。

「固定ページ」>「新規追加」

固定ページを新規作成する
固定ページを新規作成する
カスタムHTMLブロックにフォームのHTMLを貼り付ける
カスタムHTMLブロックにフォームのHTMLを貼り付ける
貼り付けたフォームのHTML
貼り付けたフォームのHTML

タイトルは「お問い合わせ」にしています。
GoogleフォームのHTMLは「カスタムHTML」ブロックに貼りつけて完成です。

WordPressの固定ページに貼り付けたお問い合わせフォーム
WordPressの固定ページに貼り付けたお問い合わせフォーム

おつかれさまでした。

まとめ。

今回は、お問い合わせフォームを作成しました。

Googleフォームはとても便利。
お問い合わせフォームの他にアンケートフォームも簡単に作ることができます。

もしGoogleのアカウントをもっていなかったら、ぜひこの機会に作ってください。
無料で使える便利ツールの宝庫です。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/07