Audibleが2ヶ月無料+100ポイントキャンペーン【12月26日まで】

WordPressでお問い合わせフォームの作り方【Contact Form by WPForms】

こんにちは! ネイネイ(@NEYNEYx2)です。

WordPressブログの運営をするうえで、お問い合わせフォームを作成した方がいいみたいだけど、やり方がよくわからない。

今回はそんな方に、WordPressでの『お問い合わせフォームの作り方』をわかりやすくご紹介します。

これからWordPressnのお問い合わせフォームを作成したいと思っているなら、この記事を読んで参考にしてみてはいかがでしょうか。

この記事でわかること

  • そもそも、お問い合わせフォームってなに?
  • お問い合わせフォームを作る方法は?
  • お問い合わせフォームの設置場所はどこがいいの?

 

この記事では、「お問い合わせフォームを作る方法」や「お問い合わせフォームの設置場所」について画像を交えてわかりやすく解説していきます。

また、おすすめプラグインについてもご紹介するので、ぜひ最後まで読んでみてください。

まだ、WordPressブログを立ち上げていない方は、「WordPressブログの始め方をわかりやすく解説【初心者向け】」の記事をみてはいかがでしょうか。

 

目次(タップできます)

お問い合わせフォームとは?

お問い合わせフォームとは?

お問い合わせフォームとは?

お問い合わせフォームとは、サイトを訪れた人が、運営者に連絡を取りたいときに使用される機能になります。

訪問者がなにか困ったことや質問があるときに、ブログ運営者と連絡をする手段となるので、読者に信頼してもらえるためにもお問い合わせフォームを設置することをおすすめします。

お問い合わせフォームが必要な理由

ブログ運営をするうえで、お問い合わせフォームが必要な理由は、下記のようなことがあげられます。

お問い合わせフォームが必要な理由
  1. なにかあったときに連絡手段になる
  2. 企業からの広告オファーにつながる
  3. アフィリエイト広告サービスの審査に受かりやすくなる

なにかあったときに連絡手段になる

ブログを訪れた読者が、なにか質問や疑問に思ったことがあったときに、運営者に連絡をする手段があることで安心感や信頼感をアップすることができます。

お問い合わせするところがなく、読者を不安にさせたり、信用を失うようでは、ブログ運営をするうえでマイナスでしかありません。

なので、読者に信用してもらうためにも、お問い合わせを設置するようにしましょう。

企業からの広告掲載オファーにつながる

ブログを運営していて、上位に記事が表示されるようになると、企業からの広告掲載のオファーが届くことがあります。

しかし、お問い合わせするところがわからなければ、せっかくの依頼がなかったことになってしまいかねません。

企業からのオファーは、収入アップにつながることもあるので、見逃さないようにしましょう。

アフィリエイト広告サービスの審査に受かりやすくなる

Googleアドセンスなどのアフィリエイト広告サービスでは、お問い合わせフォームがあることが必須となっていることが多くあります。

ブログで収益化を目指しているなら、お問い合わせフォームを作ることは、必ず必要な作業となってきます。

なので、収益化をするうえでも、お問い合せフォームを設置することをおすすめします。

お問い合わせフォーム作成におすすめのプラグイン

お問い合わせフォーム作成におすすめのプラグイン

お問い合わせフォーム作成におすすめのプラグイン

WordPressで、お問い合わせフォームを作成するのにおすすめのプラグインは「Contact Form by WPForms」です。

お問い合わせフォームの人気プラグインに「Contact Form 7」がありますが、機能が複雑だったり、動作速度がやや重かったりと、ブログ初心者には扱いにくい一面があります。

「Contact Form by WPForms」は、シンプルでありながらも、直感的な操作でフォームを作成できるのため、HTMLやCSSの知識がなくても、とても簡単にお問い合わせフォームを作ることができます。

なので、ブログを始めたばかりの初心者にもおすすめのプラグインとなっています。

Contact Form by WPFormsの特徴
  • 雛形のテンプレートが用意されている
  • ドラッグ&ドロップの直感的な操作でフォームを作れる
  • 自動返信メールを設定することができる
  • Google reCAPTCHAと連携して、スパム対策ができる

WordPressでお問い合わせフォームを作る方法

WordPressでお問い合わせフォームを作る方法

WordPressでお問い合わせフォームを作る方法

ここでは、WordPressでお問い合わせフォームの作り方を解説していきます。

まずは、お問い合わせフォームを作成するプラグイン「Contact Form by WPForms」をインストールします。

プラグイン「Contact Form by WPForms」のインストール

WordPressの管理画面から、「プラグイン」→「新規追加」をクリックします。

プラグインの追加画面が表示されたら、キーワードの枠に「Contact Form by WPForms」と入力して、「今すぐインストール」をクリックします。

「Contact Form by WPForms」のインストール

「Contact Form by WPForms」のインストール

 

インストールができたら、「有効化」をクリックします。

「有効化」をクリック

「有効化」をクリック

 

以上で、「Contact Form by WPForms」のインストールは完了です。

続いて、お問い合わせフォームの設定をしていきます。

お問い合わせフォームの設定方法

ここでは、お問い合わせフォームの設定方法をご紹介していきます。

まずは、WordPressの管理画面から、「WPForms」→「新規追加」をクリックします。

Contact Form by WPFormsの「新規追加」をクリック

Contact Form by WPFormsの「新規追加」をクリック

 

フォーム名とテンプレートの選択

テンプレートを選択する画面が表示されるので、フォーム名に「お問い合わせ」と入力し、Simple Contact Form(簡単なお問い合わせフォーム)の「テンプレートを使用する」をクリックします。

Simple Contact Form(簡単なお問い合わせフォーム)の「テンプレートを使用する」をクリック

Simple Contact Form(簡単なお問い合わせフォーム)の「テンプレートを使用する」をクリック

 

ドラッグ&ドロップでフォームの作成

フィールドを追加する画面が表示されるので、追加したい項目をドラッグ&ドロップしていきます。

Simple Contact Form(簡単なお問い合わせフォーム)のデフォルト状態

Simple Contact Form(簡単なお問い合わせフォーム)のデフォルト状態

Simple Contact Form(簡単なお問い合わせフォーム)では、「名前(Name)」「メール(Email)」「コメントまたはメッセージ(Comment or Message)」「送信(Submit)」のフィールドがあらかじめ用意されます。

デフォルトで用意されているもの
  1. 名前(Name)
  2. メール(Email)
  3. コメントまたはメッセージ(Comment or Message)
  4. 送信(Submit)

 

追加したい項目を「標準フィールド」から選んで、ドラッグ&ドロップで追加していきます。

今回は、「単一行テキスト」と「多項選択式」を追加します。

「標準フィールド」から項目をドラッグ&ドロップで追加

「標準フィールド」から項目をドラッグ&ドロップで追加

 

フィールド設定を変更する

続いては、各フィールドのラベルやフォーマットなどの設定を変更していきます。

変更したいフィールドをクリックすることで、左側に「フィールド設定」が表示され、細かい設定ができるようになります。

フィールド設定画面

フィールド設定画面

 

それぞれの項目を下記のように変更していきます。

フィールド設定の変更
スクロールできます
ラベル フォーマット 必須
Name お名前(ハンドルネームでも可) シンプル チェックあり
Email メールアドレス チェックあり
単一行テキスト 件名
多項選択式 お問い合わせの種類 サイトについて
お仕事の依頼
その他
チェックあり
Comment or Message お問い合わせ内容 チェックあり

 

できあがったのが、下記のような状態です。

フィールド設定を変更した後

フィールド設定を変更した後

 

送信ボタンの設定を変更する

続いては、送信の設定を変更していきます。

左側にある「設定」をクリックして、「一般」「通知」「確認」の設定をそれぞれ変更ていきます。

まずは、「一般」の設定画面で、送信ボタンのテキストが「Submit」「Sending…」となっているので、「送信」「送信中…」に変更します。

「一般」の設定画面

「一般」の設定画面

 

次に、「通知」の設定画面で、「送信先メールアドレス」、「メール件名」、「メールメッセージ」を下記のように変更します。

「通知」の設定画面

「通知」の設定画面

通知の設定
スクロールできます
変更内容
送信先メールアドレス {admin_email},{field_id=”1″}
メール件名 お問い合わせいただきありがとうございます。
メールメッセージ 改めて担当者よりご連絡致しますので、今しばらくお待ちください。
{all_fields}

 

「{field_id=”1″}」は、お問い合わせした訪問者に自動返信メールを送信するための設定です。
また、「{admin_email}」はWordPressに登録している管理者メールアドレスにメールを送る設定です。

 

続いて、「確認」の設定画面で、「確認メーッセージ」などを下記のように変更します。

また、「確認メッセージまで自動的にスクロールする」のチェックをはずします。

「確認」の設定画面

「確認」の設定画面

設定に問題がないことを確認して、右上にある「保存」をクリックします。

 

以上で、お問い合わせフォームの設定は完了です。

続いて、固定ページの作成をしていきます。

固定ページの作成

ここでは、さきほど作成したお問い合わせフォームを使って、固定ページを作成する方法をご紹介していきます。

まずは、WordPressの管理画面から、「WPForms」をクリックして、作成したお問い合わせフォームのショートコードをコピーします。

作成したお問い合わせフォームのショートコードをコピーする

作成したお問い合わせフォームのショートコードをコピーする

 

次に、WordPressの管理画面から、「固定ページ」→「新規追加」をクリックして、固定ページを作成して「ショートコード」を貼り付けます。

ショートコードを貼り付ける

ショートコードを貼り付ける

 

ショートコードの貼り付けができたら、右上にある「プレビュー」でうまく設定ができているか確認します。

「プレビュー」で確認する

「プレビュー」で確認する

 

確認して問題なければ、右上にある「公開」をクリックします。

「公開」をクリック

「公開」をクリック

固定ページのパーマリンクは、「contact」と入力するのが一般的です。

 

以上で、固定ページの作成は完了です。

続いて、Google reCAPTCHAの設定をしていきます。

Google reCAPTCHAの設定方法

ここでは、お問い合わせフォームにGoogle reCAPTCHAを設定する方法をご紹介していきます。

Google reCAPTCHAとは、Googleが無料で提供しているスパム対策ツールになります。

この設定をしないと、大量の迷惑メールが送られてきてしまうので、必ず設定するようにしましょう。

Google reCAPTCHAに登録

まずは、Google reCAPTCHAにアクセスします。

Google reCAPTCHAにアクセス

 

表示された画面から、「v3 Admin Console」をクリックします。

「v3 Admin Console」をクリック

「v3 Admin Console」をクリック

 

続いて、reCAPTCHAの設定画面が表示されるので、「ラベル」「reCAPTCHAタイプ」「ドメイン」などを設定していきます。

Google reCAPTCHAの設定画面

Google reCAPTCHAの設定画面

reCAPTCHAの設定

  1. ラベル:サイト名などを入力します。(なんでもOK)
  2. reCAPTCHAタイプ:「reCAPTCHA v2」と「非表示 reCAPTCHA バッジ」を選択します。
  3. ドメイン:サイトのドメインを入力します。
  4. reCAPTCHA 利用条件に同意する:内容を確認してチェックします。
  5. 入力ができらら、「送信」をクリックします。

 

reCAPTCHAの登録ができると、「サイトキー」と「シークレットキー」が表示されます。

後ほど使用するので、画面はそのままにしておきましょう。

「サイトキー」と「シークレットキー」が表示される

「サイトキー」と「シークレットキー」が表示される

 

以上で、Google reCAPTCHAの登録は完了です。

続いて、WPFormsにGoogle reCAPTCHAの設定をしていきます。

取得したキーをContact Form by WPFormsに設定

続いて、WordPressの管理画面から、「WPForms」→「設定」→「CAPTCHA」のタブを選択して、「reCAPTCHA」をクリックします。

「CAPTCHA」のタブを選択して「reCAPTCHA」をクリック

「CAPTCHA」のタブを選択して「reCAPTCHA」をクリック

 

reCAPTCHAの設定画面が表示されるので、「Invisible reCAPTCHA v2」を選択して、コピーした「サイトキー」と「シークレットキー」を入力して、「設定を保存」をクリックします。

「サイトキー」と「シークレットキー」を入力

「サイトキー」と「シークレットキー」を入力

お問い合わせフォームにGoogle reCAPTCHAを設定

続いて、お問い合わせフォームに「reCAPTCHA」を設置していきます。

WordPressの管理画面から、「WPForms」→「すべてのフォーム」を選択して、「お問い合わせ」をクリックします。

作成した「お問い合わせ」をクリック

作成した「お問い合わせ」をクリック

 

フィールド画面が表示されるので、標準フィールドから「reCAPTCHA」をクリックして、右上にreCAPTCHAの有効マークが表示されていることを確認して、「保存」をクリックします。

Google reCAPTCHAの設定

Google reCAPTCHAの設定

 

最後に、作成したお問い合わせのページが、きちんとできているか確認しましょう。

作成したお問い合わせのページを確認

作成したお問い合わせのページを確認

 

以上で、Google reCAPTCHAの設定は完了です。

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

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

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

ここでは、WordPressでお問い合わせフォームを設置する場所について解説していきます。

お問い合わせフォームの設置
  1. ヘッダーやフッター
  2. サイドバー

ヘッダーやフッターに設置

お問い合わせをページの最上部である「ヘッダー」や、ページの最下部である「フッター」に設置する方法をご紹介していきます。

WordPressの管理画面から、「外観」→「メニュー」を選択して、「メニュー名」を入力して「メニューを作成」をクリックします。

すでに作成しているメニューがあるなら、それに追加していきます。

メニューの作成

メニューの作成

 

メニュー項目追加の固定ページから、「すべて表示」をクリックして、表示したい固定ページにチェックを入れて、「メニューに追加」をクリックします。

メニュー構造」に追加されたメニューの並び順を入れ替えて、「お問い合わせ」の位置を調整します。

お問い合わせなどのメニューを表示したい「ヘッダー(グローバルナビ)」や「フッター」にチェックを入れて、「メニューを保存」をクリックします。

メニュー項目の追加

メニュー項目の追加

 

以上で、ヘッダーやフッターの設置は完了です。

サイドバーに設置

お問い合わせをサイドバーに設置する方法をご紹介していきます。

WordPressの管理画面から、「外観」→「ウィジェット」を選択します。

「外観」→「ウィジェット」を選択

「外観」→「ウィジェット」を選択

 

カスタムHTML」をウィジェットに追加して、Contact Form by WPFormsの「ショートコード」を貼り付けて、「保存」をクリックします。

ウィジェットの追加

ウィジェットの追加

 

以上で、サイドバーの設置は完了です。

まとめ(WordPressでお問い合わせフォームの作り方)

どうですか、お問い合わせフォームをうまく作ることはできましたか?

この記事を通して、少しでもあなたのブログライフが有意義なものになったら幸いです。

それでは、まったです。 (‘◇’)ゞ

 

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

 

こちらの記事もどうぞ

Amazonギフトカード チャージタイプ
Amazonギフトカード チャージタイプ

Amazonでお買い物するなら、Amazonギフトカード チャージタイプの利用がおすすめ!

キャンペーンにエントリーして、コンビニ・ATM・ネットバンキング・クレジットカードのいずれかで1回5,000円以上チャージすると0.5%ポイント還元ます。

また、本キャンペーンは「プライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まる」キャンペーンとの併用が可能となっています。

\ TRY NOW!! /

 

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

30代の元開発エンジニア。本の書評多め(ミステリ、ファンタジー、気になった本を読む雑食系)。現在は、自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづっています。

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次(タップできます)