おすすめプラグイン

WordPressのお問い合わせフォーム作成方法を2パターン紹介

 

本記事にピッタリな方

  • ブログにお問い合わせフォームがあった方が良いって聞いた
  • 作り方が分からないので教えて
  • かんたんだと嬉しい

 

ゆくゆくは企業から仕事の依頼がくるかも。

michi

 

さるくん

マジですか!すぐやり方を教えてください!

 

本記事の内容

前半

後半

 

今回はプラグイン有りVer、無しVerの2パターンの作り方を紹介いたしますね。

  • Contact From7(プラグイン有り)
  • Googleフォーム(プラグイン無し)

 

どちらも使った経験がありますが、とっても簡単に使えますよ。

 

ちなみにお問い合わせフォームが必要な理由は下記でして

  • ユーザーに安心感を与える
  • ユーザーにサイト内の誤りを指摘してもらえる
  • 企業などから仕事の連絡がくる
  • Googleの審査基準の1つとされている
  • Googleが重要視する『信頼性』にかかわっている

など実はめちゃくちゃ重要なんです。

 

例えばあなたが企業に質問をしたいのに、お問い合わせフォームが無かったら困りますよね。

 

SNSやコメントはどうなのという話もありますが、登録していない人もいますしコメントが公開されてしまうのがイヤな方もいます。

 

なので本記事を見ていただいて、お問い合わせフォームをサクッと作っちゃいましょう!

 

プラグイン有り:Contact Form7

プラグイン有り:Contact Form7

 

初めはプラグイン『Contact Form7』から。

 

デザインがちょっと古いのが玉にキズですが、WordPressならこのプラグインが一番簡単です。

 

では早速作り方を解説していきますね。

まずはプラグイン『Contact Form7』を『インストール』→『有効化』してください。

『Contact From7』を『インストール』→『有効化』

 

①お問い合わせフォーム用の固定ページを作成する。

お問い合わせフォーム用の固定ページを作成

  1. お問い合わせフォーム名を入力する(お問い合わせフォームなど)
  2. パーマリンクを設定する(contact-usなど)
  3. 『公開』をクリックする。

 

②『Contact Form7』の設定画面から、赤線部のショートコードをコピーする。

『Contact Form7』のショートコードをコピー

 

③お問い合わせフォーム用の固定ページにショートコードを貼り付ける。

お問い合わせフォーム用の固定ページにショートコードを貼り付け

 

④プレビュー画面。

お問い合わせフォームのプレにビュー画面

これで完成です。一度自分で送ってテストしましょう。

 

問題なければグローバルナビ、フッター等にお問い合わせフォームの固定ページを設置してくださいね。

 

お問い合わせフォーム設置場所

私はフッターに設置しています(テーマはアフィンガー5)
michi

 

ちなみにメールの送り先を変えたい場合は、メールタブ内の『送信先』のアドレスを変更してください。

送信先メールアドレス

※デフォルトではWordPress初期設定時のアドレスになっています。

 

Contact Form7のおすすめカスタマイズ2つ

基本はデフォルトで問題ないですが、おすすめのカスタマイズを紹介いたしますね。

 

項目は2つです。

  • スパム対策
  • 自動メール返信

 

それでは見ていきましょう。

 

その1:スパム対策

Contact Form7を設置するとスパムメールが来る可能性が出てくるので対策しましょう。

 

Googleの『reCAPTCHA』と本プラグインを関連付けられます。

reCAPTCHAとは

ぐにゃぐちゃした文字を入力するやつとか、ブロック内の『信号機』や『横断歩道』を選択させるやつです。

 

ちなみに今回おすすめするのは『reCAPTHAv3』は

スパムと思われるものに対してのみ、セキュリティが発生するスグレモノです。

なのでスパム対策しつつもユーザーフレンドリーなんですよ。

 

さっそく説明しますね。

※前準備としてGoogleアカウントを作成しておいてください。

 

それではGooglereCAPTCHAのサイトを開きましょう。

 

①赤枠内『管理コンソール』をクリックする。

GooglereCAPTCHA

 

②ログイン後の画面。

GooglereCAPTCHA登録画面

  1. ラベル→サイト名がおすすめ。
  2. reCAPTCHAタイプ→『v3』を選択する。
  3. ドメイン→サイトのドメイン名を入力する(http://www.は不要)
  4. GoogleアカウントのメールアドレスになっているのでそのままでOK。
  5. reCAPTCHA利用条件に同意する→チェックする。
  6. アラートをオーナーに送信する→チェックする。

 

②送信後、下記画面が現れるので『サイトキー』『シークレットキー』を控えておく。

サイトキー、シークレットキーを控える

 

③ダッシュボードに戻る。

インテグレーションのセットアップ

  1. お問い合わせのreCAPTCHA内『インテグレーションのセットアップ』をクリックする。

 

④サイトキー、シークレットキーを入力後、変更を保存する。

サイトキー、シークレットキーを入力する

 

以上でreCAPTCHAの設定は完了です!

 

その2:自動メール返信

自動メール返信は『ちゃんと届いていますよ~』とユーザーに安心感を与える役割をしています。

 

やり方を説明いたしますね。

 

①メールタブ内の『メール(2)を使用』をチェックする。

メール(2)をチェックする

 

②下記参照。

  1. 題名→お問い合わせを受け付けました等に修正
  2. メッセージ本文→赤枠内のような文言を添える

 

特に指定はありませんが、ユーザーに感謝の気持ちが伝わる様なものが良いかと。
michi

 

最後に保存をすればオッケーです。

 

Contact Form7のお問い合わせ内容カスタマイズ4つ

次ははContactForm7のお問い合わせ内容カスタマイズです。

おすすめを4つ紹介いたしますね。

  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • ファイル添付

 

うまく使うとユーザーフレンドリーなお問い合わせフォームができますよ!

 

ちなみに正しく使うための行程が2つあります。

1.ユーザー側に見えるようにする設定

2.あなたが受け取ったメールに見えるようにする設定

 

ユーザー側に見えるようにする設定。

フォーム内にタグを設置

  1. 各項目を設定する。
  2. 『フォーム』内にタグが自動的に設置される。

 

あなたが受け取ったメールに見えるようにする設定。

ショートコードの設置

  1. フォーム内に各項目を設置すると『メールタブ』内に自動的にショートコードが現れる。
  2. 『メッセージ本文内』にショートコードをコピペする。

 

この作業をやらないと『問い合わせフォームでは受け付けたけど、あなた側に正しく表示されない』現象がおこります。

 

それではおすすめを紹介していきますね。

 

ドロップダウンメニュー

ドロップダウンは選択肢が多い時に有効です。

 

『フォーム』内の『ドロップダウンメニュー』をクリックしてください。

ドロップダウンメニューの設定

設定は2つです。

  1. オプション→ドロップダウンメニューの選択肢を作成する。
  2. 空の項目を先頭に挿入する→チェックする(誤クリック時の修正に便利)

 

『タグを挿入』をクリック後、前述した『あなたが受け取ったメールに見えるようにする設定』を忘れないでくださいね。

完成すると下記になります。

ドロップダウンメニュー完成図

 

多数の選択肢がある場合は、ドロップダウンが一番スッキリして見やすいですよね。
michi

 

チェックボックス

チェックボックスは複数回答可能な選択肢を作るときに有効ですよ。

チェックボックスの設置

設定は2つです。

  1. オプション→チェックボックスの選択肢を作成する。
  2. 個々の項目をlabel要素で囲む→チェックを入れる。

 

ちなみに『チェックボックスを排他化する』は複数選択できなくなるのでチェックしなくてオッケーです。

 

設定後は下記になります。

チェックボックス完成図

 

しつこいですが『メッセージ本文』内にショートコードをコピペするのを忘れないでくださいね。
michi

 

ラジオボタン

ラジオボタンは複数選択ができない分チェックボックスより劣るので、見た目が好きなら設置しましょう。

ラジオボタンの設置

  1. オプション→ラジオボタンの選択肢を作成する。
  2. 個々の項目をlabel要素で囲む→チェックする。

 

完成図はコチラ。

ラジオボタン完成図

ラジオボタンに限らずすべての項目が複数設置できますよ。
michi

 

ファイル添付

お問い合わせに画像などのファイル添付をしてほしい場合に有効です。

 

『ファイル』タブをクリックしてください。

ファイル添付の設置

設定は2つです。

 

ファイルサイズの上限

制限は特に決まっていませんが、あまりに多すぎるとサーバー負担が大きくなってしまうので5MBくらいでじゅうぶんです。

入力の仕方は

5mb

です。

 

受け入れ可能なファイル形式

アップロード指定できる形式

jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav、wmv

 

入力の仕方は

jpeg|gif|ipg

と拡張子と拡張子の間を『|』で区切ります。

 

そのあとショートコードをコピペするんですが、場所がいままでと違いまして

下記の『ファイル添付』内です。

ファイル添付設置完了

 

完成図は下記です。

ファイル添付完成図

 

ちなみに複数設置すれば、そのぶん一度に送れるファイル数も増えます。
michi

 

プラグイン無し:Googleフォーム

プラグイン無し:Googleフォーム

 

次はGoogleフォームでのお問い合わせの作り方です。

 

コチラの方がデザインは今風ですね。

プラグインを使わないので、不具合やサイトスピードに良い影響があるかもしれません。

 

それでは説明していきますね。まずGoogleフォームのサイトへ移動しましょう。

※前準備としてグーグルアカウントを作成しておいてください。

 

ステップ1:Googleフォームにログインする

①『Googleフォームを使ってみる』をクリックする。

『Googleフォームを使ってみる』をクリック

 

②Googleアカウントにログイン後、Googleフォームの初期画面。

Googleフォームにログイン後の画面

 

続いて設定です。
michi

 

ステップ2:Googleフォームの設定方法

フォームの項目はいろいろ作れますが、とりあえず下記があれば十分です。

  • お名前
  • メールアドレス
  • お問い合わせの種類
  • 題名
  • お問い合わせの内容

早速設定していきましょう。

 

①フォーム名とお名前欄の設定。

フォーム名とお名前の設定

  1. 『お問い合わせ』と入力する。
  2. 『お名前』と入力する。
  3. 『記述式』を選択する。
  4. 『必須』を選択する。
  5. アイコンをクリックする。

 

②メールアドレス欄の設定。

メールアドレスの設定

  1. 『メールアドレス』と入力する。
  2. 『記述式』を選択する。
  3. 『必須』を選択する。
  4. アイコンをクリックする。

 

③お問い合わせの種類欄の設定。

お問い合わせの種類の設定

  1. 『お問い合わせの種類』と入力する。
  2. 『ラジオボタン』を選択する。
  3. 『ご意見・ご相談』と入力する。
  4. 『お仕事のご相談』と入力する。
  5. 『その他』と入力する。
  6. 『必須』を選択する。
  7. アイコンをクリックする。

 

④題名欄の設定。

題名の設定

  1. 『題名』と入力する。
  2. 『記述式』を選択する。
  3. アイコンをクリックする。

※ココは必須にしなくてもOK。

 

⑤お問い合わせの内容欄の設定。

お問い合わせの内容の設定

  1. 『お問い合わせの内容』と入力する。
  2. 『段落』を選択する。
  3. 『必須』を選択する。

 

⑥一番上に戻り、デザインの設定をする。

Googleフォームのデザインを設定

  1. アイコンをクリックする。
  2. テーマの色やフォントを選択する。
  3. 『送信』をクリックする。

 

以上です。次は実際にお問い合わせページを表示させましょう。
michi

 

ステップ3:Googleフォームをサイトに表示

①ステップ1の最後で『送信』をクリックすると下記画面になる。設定をWordPressに反映させる

  1. <>をクリックする。
  2. 赤枠内をクリックする。
  3. 『コピー』をクリックする。

 

②お問い合わせフォーム用の固定ページを作成する。

お問い合わせフォーム用の固定ページを作成

  1. お問い合わせフォーム名を入力する
  2. パーマリンクを設定する。
  3. 『テキストモード』にする。
  4. 前項でコピーしたHTMLを貼り付ける。
  5. 『公開』をクリックする。

 

その後は『ダッシュボード』→『外観』→『メニュー』から、グローバルナビ等にお問い合わせフォーム用の固定ページを組み込みましょう。

 

以上で基本設定は終了です。

 

Googleフォームのちょっとしたカスタマイズ

基本設定だけでも特に問題はありませんが、これから説明するカスタマイズを実行すれば、スクロールバーが無くなって見やすくなりますよ。

 

変更するとこんな感じになります。

Googleフォームカスタマイズ後

 

やり方を紹介しますね。

 

Googleフォーム用の固定ページを開き、テキストモードにします。

下記のコードがでるので、赤字部分に変更しましょう。

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeP0l67D45t7yYWhB3cUii8c7NAgzi9KwXWLLpW8oVyt5aZ4g/viewform?embedded=true" width="640" height="1300" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" frameborder="no">読み込んでいます…</iframe>

※前半部分は皆違うので全コピペはNGです。

 

ポイントは2つです。

scrolling="no" frameborder="no"を加える(スクロールバーを消す)

height値を1300にする(見切れを防ぐ)

 

以上で見やすくなりました。

 

まとめ:サクッとお問い合わせフォームを作りましょう

まとめ:サクッとお問い合わせフォームを作りましょう

 

本記事をまとめます。

 

おすすめのお問い合わせフォームの作り方は下記2つです。

プラグイン有り:Contact Form7

プラグイン無し:Googleフォーム

どちらでもOKですよ。

 

お問い合わせフォームはユーザーファーストの観点から必須です。

本記事を見ていただいてサクッと作ってくださいね。

 

今回は以上です。