ブログやサイト運営において、初心者がサイト作成で悩むことにひとつに、「お問い合わせページの作成方法が分からない」があるのではないでしょうか。「プログラミングの知識がないから難しそう」「どのプラグインを使えばいいのか分からない」と悩んでいる方もいるかもしれません。
ご安心ください。WordPress初心者の方でも、最も簡単かつ効率的にお問い合わせページを作成できる方法があります。それが、高機能フォーム作成プラグイン「WPForms（WPフォームズ）」を使う方法です。
本講座は、WPFormsを使ってWordPressでお問い合わせページを一番簡単に作成する手順を、スクリーンショットを交えながら詳しく解説します。
お問い合わせページがなぜ重要なのか？
ウェブサイトを運営する上で、お問い合わせページは単なる「連絡先」以上の意味を持ちます。ここでは、お問い合わせページがなぜ重要なのか、その多岐にわたるメリットについて掘り下げていきましょう。
- 信頼性の向上
お問い合わせページは、ウェブサイトの信頼性を飛躍的に向上させます。訪問者は、何か質問や困りごとがあった際に、すぐに連絡が取れる窓口があることで、「このサイトはきちんと運営されている」という安心感を抱きます。
- SEO（検索エンジン最適化）への好影響
お問い合わせページを提供することで、サイトの網羅性向上、滞在時間の延長、被リンクの獲得する可能性があります。
- ビジネスチャンスの創出
お問い合わせページの最も大きなメリットですが、新規顧客の獲得、提携やコラボレーションの機会、メディア掲載の依頼があります。実際に当サイトも、月に数回は案件依頼や相談が届きます。
WPFormsとは？なぜWPFormsが一番簡単なのか？
WordPressでお問い合わせフォームを作成するプラグインは数多く存在しますが、その中でもWPFormsは特に初心者におすすめです。ここでは、WPFormsがどのようなプラグインで、なぜ「一番簡単」と言えるのかを詳しく解説します。
WPFormsの概要
WPFormsは、WordPressで直感的にフォームを作成できるドラッグ＆ドロップ式のフォームビルダープラグインです。世界中で600万以上のウェブサイトに導入されており、その使いやすさと高機能性から絶大な人気を誇っています。
お問い合わせフォームだけでなく、アンケートフォーム、メール登録フォーム、決済フォームなど、さまざまな種類のフォームを簡単に作成することができます。無料版の「WPForms Lite」でも基本的なお問い合わせフォームは作成可能ですが、有料版の「WPForms Pro」にアップグレードすることで、より高度な機能やテンプレートを利用できます。
なぜWPFormsが「一番簡単」なの？
WPFormsが「一番簡単」と称される理由は、以下の点に集約されます。
1. 直感的なドラッグ＆ドロップ操作
WPFormsの最大の特徴は、その直感的なドラッグ＆ドロップインターフェースです。コードを一切書くことなく、必要なフィールド（入力項目）をマウスでドラッグしてフォームに追加し、自由に配置することができます。テキストフィールド、メールアドレス、電話番号、チェックボックス、ラジオボタンなど、多種多様なフィールドが用意されており、プログラミングの知識がない方でも思い通りのフォームを視覚的に作成できます。
2. 豊富なテンプレート
WPFormsは、用途に応じた豊富なテンプレートを標準で用意しています。例えば、基本的なお問い合わせフォームであれば、「Simple Contact Form」というテンプレートを選択するだけで、必要最低限のフィールドがあらかじめ設定されたフォームがすぐに利用できます。これにより、ゼロからフォームを作成する手間が省け、時間を大幅に節約できます。
3. レスポンシブデザイン対応
WPFormsで作成されたフォームは、自動的にレスポンシブデザインに対応します。これにより、PC、スマートフォン、タブレットなど、どのデバイスからアクセスしても、フォームが最適に表示され、ユーザーはストレスなく入力を行うことができます。デザイン調整の手間が不要な点も、初心者には嬉しいポイントです。
WPFormsを使ったお問い合わせページの作成手順
ここからは、WPFormsを使ってWordPressでお問い合わせページを実際に作成する具体的な手順を、ステップバイステップで解説します。WPForms Lite（無料版）で基本的なフォームを作成する手順です。
全部下記3ステップに分かれますので、一つずつみていきましょう。
1.WPFormsのインストールと有効化
まず、WPFormsプラグインをWordPressにインストールして有効化します。
まずはワードプレス管理画面にログイン後、左メニュー「プラグイン」→「プラグインを追加」をクリックします。
検索結果一覧に熊キャラクターアイコンの「WPForms」が表示されます。
インストールを押してから数秒で「有効化」ボタンに切り替わりますので、そのままクリックしてWPFormsの導入が完了します。
有効化すると設定画面が表示されますので、続けて下記設定方法をご覧下さい。
2.WPFormsを設定する
続いて、お問い合わせページの内容や通知などに関するWPFormsの初期設定を行います。
上記のように最もシンプルなお問い合わせ用のテンプレートが表示されますので、下の方に表示される「テンプレートを使用」をクリックします。
今回はプルダウンで選択できる「お問い合わせ種別」を追加しますので、左メニューから「ドロップダウン」を選択して表示したい場所に移動させ、追加したドロップダウンをクリックしてから上記のようにラベルと選択肢を変更していきます。
通設定の上に「一般」「スパム対策とセキュリティ」「テーマ」が用意されていますが、初期設定のままで構いません。
ここでは、サイト利用者がお問い合わせページで送信した内容をメールで届ける内容を設定できます。
当サイトの推奨設定は以下の通りとなりますので、画像を見ながら入力してみましょう。
■設定のポイント
・送信先メールアドレス：管理者のメールアドレス,Field #2: メールアドレス
※「Field #2: メールアドレス」とは、お問い合わせ入力フォームに入力されたメールアドレスを指します。ここで追加することにより、利用者にも同様の問い合わせ内容が届くようになります
※設定方法：下記の通り入力窓右にあるタグボタンをクリックし、利用可能なフィールドに表示される「メールアドレス」を選択すると反映されます
Reply-Toについては返信先のメールアドレスになるため、「管理者のメールアドレス」のままでも構いません。メールメッセージ内容については、お問い合わせ者に自動返信されることを考えて以下のような内容に設定しておきましょう。
※{Field #1:}は氏名、{all_fields}は入力内容すべてを出力します
■メールメッセージ文例
{Field #1:} 名前 様
このたびはサイト名●●へお問い合わせいただき誠にありがとうございます。
以下の内容のお問い合わせを受け付けました。
3営業日以内に担当者より折り返しご連絡させていただきます。
尚、お問い合わせ内容によっては、ご返事までにお時間をいただく場合もございます。
あらかじめご了承ください。
━━━━━━ ご入力内容 ━━━━━━━
{all_fields}
※このメールはサイト名●●（https://サイトURL.com/）からお問い合わせいただいた方へ自動送信しております。
お心当たりのない方は、恐れ入りますが下記へその旨をご連絡いただけますと幸いです。
━━━━━━━━━━━━━━━━━━━━
オシリユ
https://サイトURL.com/
MAIL ：メールアドレス
━━━━━━━━━━━━━━━━━━━━
お問い合わせ送信後は初期設定だとメッセージウィンドウが表示され、設定されているテキストが表示されます。特にこだわりがなければ、そのままでも構いません。
なお、当サイトでは表示するテキストだけ下記のように変更しています。
■確認メッセージ
このたびはサイト名●●へお問い合わせいただき誠にありがとうございます。
お問い合わせを受け付けました。
3営業日以内に担当者より折り返しご連絡させていただきますのでお待ちください。
尚、お問い合わせ内容によっては、ご返事までにお時間をいただく場合もございます。
あらかじめご了承ください。
ここまで完了したら、「保存」をクリックして設定完了です。
3.WPFormsで作成したフォームをお問い合わせページに表示する
最後に、先ほど作成したフォームをサイト上のお問い合わせページに表示するための作業です。
お問い合わせページを作成するには、「固定ページを追加」します。
本文に先ほど作成したお問い合わせフォームを反映するため、＋ボタンから呼び出します。
↓↓↓
フォームが選択されていると右側のメニューにWPFormsデザイン設定が表示されますので、枠線の色やボタンの配色などを調整します。
スラッグは特にこだわりがなければ「contact」と記入し、そのあとに「公開」をクリック。最後に公開されたページを確認して問題なければ完了です。
お問い合わせが問題なく送信されるか、確認しよう
お問い合わせページを公開したものの、設定に不備があって届かない、うまく動作しないことも考えられます。
かならず作成した問い合わせフォームが問題なく動作するか、受信されるメール含めて確認しましょう。
お問い合わせフォームの送信ボタンを真ん中に表示したい
初期設定だと、「送信」ボタンは左寄せで表示されてしまいます。気になる方は、ワードプレス管理画面のお問い合わせページ詳細の本文下に表示される「カスタムCSS＆JS」に下記CSSコードをコピペして保存しましょう。
※CSSとは：ウェブサイト上のデザインや装飾を指示するためのコードです
■送信ボタンを中央寄せにするCSS
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
text-align: center;
}
確認メッセージウィンドウの背景色が緑色でださい。変更したい
初期設定だと、上記のように緑色の枠と背景色となっており、正直格好悪いです。上記送信ボタンの中央寄せ同様、下記CSSを追加して登録すると枠線及び背景色を変更できます。
■確認メッセージウィンドウの枠線及び背景色を変更するCSS
.wpforms-confirmation-container-full {
background: #fff !important;
border: 2px solid #773f95 !important;
}
.wpforms-confirmation-container-full {
background: #ffffff !important;
border: 2px solid #773f95 !important;
}
お問い合わせページに関するよくある質問（FAQ）
WPFormsでのお問い合わせページ作成に関して、よくある質問とその回答をまとめました。
お問い合わせページ作成まとめ
本講座では、WordPressで一番簡単にお問い合わせページを作成できるWPFormsを使った方法と手順を詳しく解説しました。
WPFormsは、その直感的なドラッグ＆ドロップインターフェースと豊富なテンプレート、そして分かりやすい設定画面により、プログラミングの知識がない初心者の方でも、わずか数ステップでお問い合わせフォームを設置することが可能です。
実際にやってみるとおもったより簡単に作成できますので、ぜひチャレンジしましょう。
