フェニックContact Form by WPFormsでサクッとお問い合わせフォームを作る方法が知りたいぞ。
今回はこのようなお悩みにお答えします。
ブログ運営をするためには、お問い合わせフォームの設置は必須となります。
- Google Adsenseに合格するため
- ASPから高単価案件を紹介してもらうため
- 読者とコミュニケーションをとるため
ただしお問い合わせフォームを作るのは面倒ですよね。
そこで今回はWPFormsを使い、お問い合わせフォームを簡単に設置する方法を解説します。
解説画像を40枚以上用意したので、真似するだけでOKです。
WPFormsでサクッとお問い合わせフォームを作ってしまいましょう。
追記です。
WordPressを立ち上げたばかりの人にはWordPressの初期設定の記事もおすすめです。
Contact Form by WPFormsのインストール方法
ダッシュボードからプラグインを選択します。
検索窓に「Contact Form byWPForms」と入力すれば、熊のアイコンが表示されたプラグインが表示されます。
【今すぐインストール＋有効化】のボタンを押せば、 Contact Form by WPformsのインストールは完了です。
WPForms LiteはContact Form by WPFormsの無料版のことです。
WPForms Liteでも高い機能を持つお問い合わせフォームを作れるので安心してください。
Contact Form by WPFormsの使い方
画像を入れたおしゃれなお問い合わせフォームを作ります。
WPFormsではHTMLやCSSの知識がなくても、簡単にお問い合わせフォームを作成できます。
カスタマイズは、ドラッグ＆ドロップと文字の書き換えだけで完了します。
Shota超簡単なので15分で作れますよ。
お問い合わせフォームの雛形を選択する
まずは雛形を選びましょう。
ダッシュボードから【WPForms】を選択します。
上図のような画面が表示されたら【フォームの作成】をクリックします。
クリックするとお問い合わせフォームの作成画面が表示されます。
入力画面が表示されたら【フォームの名前を付ける】という項目に「お問い合わせフォーム」と入力します。
以前のお問い合わせフォーム作成画面は日本語表記でしたが、プラグインのバージョンアップにより英語表記に変更されました。
Contact Form by WPFormsでお問い合わせフォームをカスタマイズする
お問い合わせフォームの雛形は英語表記になっています。
雛形を日本語表記にカスタマイズします。
【フィールド】⇒【フィールド設定】⇒【一般】へとページを進めましょう。
名前入力欄を日本語に修正する
名前入力欄をクリックして、修正画面を表示させます。
名前入力欄を以下のように修正します。
| 項目 | 修正方法 |
|---|---|
| ラベル | 「name」を「お名前」に修正 |
| フォーマット | 「シンプル」を選択 ⇒名前入力欄が2つから1つになる |
| 説明 | 「ご担当者のお名前を入力ください」と入力 |
| 必須 | 「ON」にする ⇒名前の入力が必須になる |
これで名前入力欄の修正は完了です。
メールアドレス入力欄を日本語に修正する
メールアドレス入力欄をクリックして修正画面を表示させます。
メールアドレス入力欄を以下のように修正します。
| 項目 | 修正方法 |
|---|---|
| ラベル | 「Email」を「メール」に修正 |
| 必須 | 「ON」にする ⇒メールアドレスの入力が必須になる |
| 確認メールを有効化 | 「ON」にする ⇒確認用のメールアドレス入力項目が追加される |
これでメールアドレス入力欄の修正は完了です。
お問い合わせ内容入力欄を日本語に修正する
お問い合わせ内容入力欄をクリックして修正画面を表示させます。
お問い合わせ内容入力欄を以下のように修正します。
| 項目 | 修正方法 |
|---|---|
| ラベル | 「Comment or Message」を「お問い合わせ内容」に修正 |
| 説明 | 「ご不明点やお問い合わせ内容をご記入ください」と入力 |
| 必須 | 「ON」にする ⇒お問い合わせ内容の入力が必須になる |
これでお問い合わせ内容入力欄の修正は完了です。
法人名記入欄を作成する
【フィールドを追加】をクリックし、画面が切り替わったら【一行のテキスト入力】を選択します。
次にお問い合わせフォームの一番上の部分に、ドラック＆ドロップします。
【一行のテキスト入力】という入力欄が追加されます。
【フィールドのオプション】⇒【一般】 の画面に戻りましょう。
【一行のテキスト入力】 をクリックして修正画面を表示させます。
【一行のテキスト入力】を以下のように修正します。
| 項目 | 修正方法 |
|---|---|
| ラベル | 「法人名（屋号）」と入力 |
| 必須 | 「OFF」にする |
法人名（屋号）記入の必須をOFFにしないと、個人でお問い合わせしてきた人が困ります。
これで法人名記入欄の作成は完了です。
送信ボタンを日本語化する
送信ボタンの日本語化は設定項目の一般画面から行います。
【設定】⇒【一般】へとページを進めましょう。
送信ボタンを以下のように修正します。
| 項目 | 修正方法 |
|---|---|
| 「送信」ボタンのテキスト | 「Submit」を「送信」に修正 |
| 「送信」ボタン処理テキスト | 「Sending…」を「送信中…」に修正 |
これで送信ボタンの日本語化は完了です。
いったん右上に表示されている保存ボタンをクリックしましょう。
お問い合わせフォームを保存ができない場合の対処法
これは使用しているレンタルサーバーが誤って発動したセキュリティ機能によるものです。
あなたがお使いのレンタルサーバーのWAF設定を一時的にOFFにしましょう。
ロリポップの場合サイト管理画面から、ドメインごとにWAF設定を無効にすることができます。
保存ボタンを押してエラーが発生した場合は、レンタルサーバーのWAF設定をOFFにしましょう。
フェニックお問い合わせフォームが完成したらONに戻してね。
Contact Form by WPFormsで自動返信メールを作成する
自動返信メールの設定は設定項目の通知画面から行います。
【設定】⇒【通知】へとページを進めましょう。
自動返信の宛先が自分だけに設定されているからです。
自動返信メールの設定は、以下のように設定しましょう。
| 項目 | 記入内容 |
|---|---|
| メールアドレスに送る | {field_id=”1″},{admin_email} |
| メールの件名 | お問い合わせありがとうございます。 |
| 送信者名 | ※メディア名 |
| 送信元メールアドレス | {admin_email} |
| 返信先メールアドレス | {field_id=”1″} |
| メールメッセージ | お問い合わせにありがとうございます。 ３日以内にご返信させていただきます。 {all_fields} |
【メールアドレスへ送る】の項目には{field_id=”1″},{admin_email} と入力しますが、以下の手順で入力します。
- デフォルトで記入してある{field_id=”1″} の後ろにカンマ（,）を記入
- 【スマートタグを表示】をクリック
これで自動返信メールを設定は完了です。
フェニック{field_id=”1″} やら{all_fields}やら意味が分からない文字列が多すぎる。
Shotaここは解説が必要ですね。
| 文字列 | 文字列の意味 |
|---|---|
| {admin_email} | WordPressに登録している自分のメールアドレスにも、自動返信メールを送信する |
| {field_id=”1″} | お問い合わせをくれた読者に自動返信メールを送信する |
| {all_fields} | 読者がお問い合わせフォームに入力した全ての内容を送信する |
また【メールアドレスを送る】の項目に {field_id=”1″},{admin_email} と入力すると、自動返信メールを読者と自分に送信することができます。
Contact Form by WPFormsで送信完了の確認画面を作成する
確認画面の設定は設定項目の確認画面から行います。
【設定】⇒【確認】へとページを進めましょう。
日本語に修正しましょう。
以下のように設定してください。
| 項目 | 選択または記入内容 |
|---|---|
| 確認タイプ | メッセージ |
| 確認メッセージ | お問い合わせにありがとうございます。 ３日以内にご返信させていただきます。 サイト名、サイト管理者の名前 |
| 確認メッセージまで自動的にスクロールする | ONにする |
これで確認画面の設定は完了です。
確認タイプの設定について
【確認タイプ】は「メッセージ」「ページを表示」「URLに移動(リダイレクト)」の3つから選択できます。
| 確認タイプの種類 | 送信後の確認画面の表示内容 |
|---|---|
| メッセージ | メッセージ送信後、作成した確認画面が表示される |
| ページを表示 | メッセージ送信後、設定した固定ページを表示させる |
| URLに移動(リダイレクト) | メッセージ送信後、設定したURLページを表示させる |
読者に見て欲しいキラーページがある場合は「URLに移動(リダイレクト)」を選択し、表示させたいURLを設定してください。
お問い合わせフォームのショートコードを固定ページに貼り付ける
ダッシュボードに戻り【WPForms】⇒【すべてのフォーム】 の画面を表示させます。
先ほど作ったお問い合わせフォームのショートコードをコピーします。
ダッシュボードから【固定ページ】⇒【新規追加】を選択します。
題名に「お問い合わせ」と入力し、お問い合わせフォームのショートコードを貼り付けます。
ShotaこれでもOKですが、画像を貼っておしゃれにしました。
ショートコードの上部に好きな画像を貼り付けます。
URLスラッグにcontact-formと入力し、お問い合わせページのURLを決定します。
最後にお問い合わせページをnoindex指定し、公開すれば完了です。
フェニックどうしてお問い合わせページにnoindex指定するんだ？
Shotaお問い合わせページには価値ある情報が書かれていない。だからindexさせるとGoogleに低品質コンテンツと評価されるよ。
お問い合わせページをnoindex指定する方法は、以下の記事でも解説しています。
お問い合わせフォームをグローバルメニューに設置する
WPFormsで作ったお問い合わせフォームを、グローバルメニューに設置する方法を解説します。
ダッシュボードから【外観】⇒【メニュー】を選択します。
画面が表示されたら【新しいメニューを作成しましょう。】をクリックします。
新しいページが開いたら、以下の手順で作業を進めます。
- メニュー名に「ヘッダーナビゲーション」と入力
- グローバルナビ（現在の設定：ヘッダー）にチェックを入れる
- メニューの作成をクリック
メニュー作成ページが表示されます。
- 固定ページの項目の【お問い合わせ】にチェックを入れる。
- 【メニューの追加】をクリック
- お問い合わせがメニュー名に追加される
- メニュー設定の【グローバルナビ】にチェックを入れる
- 【メニューの保存】をクリック
これでグローバルメニューへのお問い合わせフォームの設置は完了です。
Contact Form by WPFormsでお問い合わせフォームにreCAPTCHAを設定する
Word Pressでお問い合わせフォーム運用していると、英語のスパムメールが送られてきます。
そこでスパムメールからブログを守る機能を持つ、reCAPTCHAの設定方法を解説します。
ShotareCAPTCHAはGoogleの無料サービスなので安心して利用できますよ。
Google reCAPTCHAにアクセスし、サイトキーとシークレットキーを入手
まずはGoogle reCAPTCHAにアクセスします。
【v3 Admin Consile】をクリックします。
サイト登録する画面が表示されるので【＋】をクリックします。
次にサイト情報を入力します。
以下のように入力、選択をしてください。
| 入力、選択項目 | 入力、選択方法 |
|---|---|
| ラベル | ドメイン名を入力 |
| reCAPTCHA | reCAPTCHA v3を選択 |
| ドメイン | ドメイン名を入力 |
| reCAPTCHA利用条件に同意する | チェックを入れる |
| アラートをオーナーに送信する | チェックを入れる |
送信を押してサイト登録は完了です。
なお、ドメイン名入力で「https://」を間違えて入力するとエラーが発生します。
reCAPTCHAにはいくつか種類がありますが、今回はreCAPTCHA v3を使用します。
reCAPTCHA v3はサイトのバックグラウンドでスパムメールを判定することができます。
reCAPTCHAv2以前のバージョンでは「画像のタイル」を選択させたり「私はロボットではありません」をチェックさせることで、スパムメールを判定していました。
フェニック階段のタイルを選択する問題が難しすぎて、お問い合わせメール送信できなかったぞ。
ShotareCAPTCHA v3なら、読者さんを困らせることはありません。
サイト登録が終わったら、サイトキーとシークレットキーが発行されます。
両方ともコピーしましょう。
Contact Form by WPFormsにサイトキーとシークレットキーを貼り付ける
Word Pressのダッシュボードに戻ります。
WPFormの【設定】を選択し【CAPTCHA】をクリックします。
CAPTCHAの登録画面が表示されるので、以下のように入力、選択をしましょう。
| 項目 | 入力、選択方法 |
|---|---|
| CAPTCHA | reCAPTCHA画像を選択 |
| タイプ | reCAPTCHA v3を選択 |
| サイトキー | Google reCAPTCHAで取得したものを入力 |
| シークレットキー | Google reCAPTCHAで取得したものを入力 |
【設定を保存】をクリックすれば作業完了です。
Contact Form by WPFormsにreCAPTCHAを反映させる
WordPressダッシュボードから【WPForms】⇒【すべてのフォーム】をクリックします。
作成したお問い合わせフォームをクリックしましょう。
【フィールド】⇒【フィールドを追加】⇒【reCAPTCHA】をクリックします。
reCAPTCHAの確認画面が表示されます。
【OK】をクリックしてください。
画面右上に「reCAPTCHA有効」と表示されたら設定完了です。
reCAPTCHA v3の設定が反映されているか確認する
お問い合わせページを表示させます。
画面右下にreCAPTCHA画像が表示されていれば、reCAPTCHA v3の設定が反映されています。
締めに入る前にお知らせです。
SWELLユーザーの方にはSWELLプラグインの記事もおすすめです。
Contact Form by WPFormsを導入した後は
ブログツールを導入すると、より確実に稼げます。
以下の記事では、開設14ヶ月で「月間28,000PV、月間収益5万円」を実現させた神ツールを紹介しています。
ぜひチェックしてみてください。
＞＞ブログアフィリエイト収益化を加速させるおすすめツール20選
Contact Form by WPFormsのまとめ
今回は簡単にお問い合わせフォームを設置できる、Contact Form by WPFormsの使い方について解説しました。
以下の手順で簡単にお問い合わせフォームを作成できます。
- お問い合わせフォームの雛形を選択する
- お問い合わせフォームをカスタマイズする
- 自動返信メールを作成する
- 送信完了の確認画面を作成する
- ショートコードを固定ページに貼り付ける
- グローバルメニューに設置する
Contact Form by WPFormsを使えばHTMLやCSSの知識がなくても、おしゃれなお問い合わせフォームを作成できます。
本記事を参考にお問い合わせフォームを作ってください。
Contact Form by WPFormsの質問集
Contact Form by WPFormsについてよくある疑問点をまとめました。
Contact Form by WPFormsで作った自動返信メールが読者に届かない
WordPressの一般設定で、管理者メールアドレスをgmailに設定した場合を例に解説します。
自動返信メールはgmailから送信されますが、レンタルサーバーを経由します。
レンタルサーバーはメールの配信を専門的に取り扱っているわけではありません。
そのため自動返信メールが適切に処理されず、迷惑メール扱いされるのです。
WP Mail SMTP by WPFormsを使用すると、自動送信メールがSMTPサーバーを経由して読者に送信されます。
WP Mail SMTP by WPFormsについてはWP Mail SMTP by WPFormsの使い方【無料】で解説しています。
Contact Form 7とContact Form by WPFormsのどちらがおすすめ？
結論はContact Form by WPFormsがおすすめです。
HTMLやCSSの知識がなくても、お問い合わせフォームをカスタマイズできるからです。
Contact Form 7でお問い合わせフォームを作る場合、入力項目を増やすにはHTMLとCSSの知識が必要となります。
カスタマイズが簡単なため、Contact Form by WPFormsがおすすめです。
Contact Form 7からContact Form by WPFormsへ引っ越しする方法
ダッシュボードから【WPForms】⇒【ツール】を選択します。
【他のプラグインフォームからのインポート】の項目をクリックすると、Contact Form 7が表示されるため選択します。
インポートをクリックします。
フォームインポートの画面が表示されたら、コンタクトフォーム1と記載された項目が表示されるので、チェックを入れインポートをクリックします。
ダッシュボードに戻り【WPForms】⇒【すべてのフォーム】を選択します。
コンタクトフォーム1が表示されていたら引っ越し完了です。
WPFormsで引っ越ししたお問い合わせフォームをカスタマイズしてみてください。
Contact Form by WPFormsを有料プランにするメリットは？
Contact Form by WPFormsの有料プランでは以下のサービスが追加されます。
- 有料テンプレートの使用できる
- 有料のフィールドを使用できる(電話番号、住所、サイトURLの入力欄)
- 異なる自動返信メールを、自分と読者に分岐して通知できる
ただこれらの機能は、個人ブロガーには必要ないので気にしなくてOKです。
Contact Form by WPFormsでお問い合わせフォームを作った後にすることは？
以下の画像のようにプライバシーポリシーの連絡先にお問い合わせフォームへのリンクを貼りましょう。
フェニックこれでGoogleアドセンス審査への準備はばっちりだね。
なおプライバシーポリシーの作り方は以下の記事で解説しています。
コメント
コメント一覧 （2件）
突然のご連絡失礼いたします。株式会社Hub Worksの山田と申します。
弊社は、コンテンツ制作BPO事業やウェブマーケティング支援事業を行っております。
貴社サイトで発信されている情報が弊社サイトとの関連性が高いと感じ、
相互リンクという形で連携をお願いしたく、不躾ながらご連絡させていただきました。
◆ご依頼したいこと
貴社サイトと弊社サイトでの相互リンクのご掲載。
コーポレートサイト「株式会社Hubworks」 （https://wehubworks.com/）マーケティング事業
◆相互リンクのメリット【SEOへの効果】
関連性の高いページやサイトからリンクを受けることで、
Googleからの評価（ドメインパワー）が上がり、検索順位の向上が期待できます。
◆HubWorksについて
業界最安値クラスで記事制作・ホワイトペーパー制作の代行サービスを提供しております。また、動画制作、漫画制作の支援も行っております。さまざまな業界の企業様にご利用いただいています。
ご興味・ご検討いただけるようでしたら、
山田（m.yamada@wehubwork.com）までお返事いただけますと幸いです。
何卒宜しくお願いいたします。
ご担当者 様
突然のご連絡失礼いたします。
「@next（アットネクスト）」を運営しております、
株式会社インタラクティブパートナーズの小山と申します。
貴社サイトで発信されている情報が弊社サイトとの関連性が高いと感じ、相互リンクという形で連携をお願いしたく、不躾ながらご連絡させていただきました。
◆ ご依頼したいこと
貴社サイトと、弊社サイト「@next(https://www.at-next.jp/)」での相互リンクのご掲載。
◆ 相互リンクのメリット
①SEOへの効果
関連性の高いページやサイトからリンクを受けることで、Googleからの評価が上がり、検索順位の向上が期待できます。
②流入数の増加
リンク先からの流入により、貴社サイトへのアクセス数向上が見込まれます。
◆@nextについて
@nextは、お金の疑問や悩みをわかりやすく解決する、オールインワンサービスです。
資産運用や家計の見直し、住宅ローンの比較などお金に関するさまざまな悩みを解決するための総合的なサービスを提供しています。
お金に関する情報を発信している「@nextマガジン」ではお金を「見直す」、「増やす」、「借りる」というカテゴリー毎に、ファイナンシャルプランナーなどの専門家が分かりやすく解説しています。
ご興味・ご検討いただけるようでしたら、t.koyama@interactive-partners.comまでお返事いただけますと幸いです。
何卒宜しくお願いいたします。
―――――――
株式会社インタラクティブパートナーズ
小山 智朗
〒141-0031
東京都品川区西五反田七丁目9番2号 KDX五反田ビル5階
―――――――