- お問い合わせフォームってどうやって作るんだろう…
- 無料のプラグインで簡単に作れるって聞いたけど、どれがいいの？
そんな悩みをお持ちではありませんか？
じつは、多くのWordPressユーザーが最初にぶつかる壁の一つが『お問い合わせフォームの設置』です。複雑な設定や使いにくいプラグインに悩まされ、途中で諦めてしまう方も少なくありません。
『WPForms』を使えば、その悩みは一瞬で解決できます！
この記事では、初心者でも簡単にお問い合わせフォームを作る方法について解説していきます。
- WPFormsの設定方法
- 迷惑メール対策
- お問い合わせページの作り方
お問い合わせで使うメールアドレスの設定から、お問い合わせページを設置する方法まで、丁寧に解説しているので、ぜひ最後までご覧ください。
おもち迷惑メール対策もしっかりやっていこう！
STEP1.独自ドメインのメールアドレスを取得しよう
お問い合わせページを作る前に、お問い合わせのやり取りで使うための専用メールアドレスを取得しましょう。
メールアドレスは、
- 文字列
- ＠マーク
- ドメイン
の３つから構成されています。
③のドメイン部分に、あなたのウェブサイトのドメインが入っていると、プロフェッショナルな印象を与えることができますよ。
- contact@gmail.com
- contact@designhack-labo.com
Gmailを使ってもいいのですが、独自ドメイン入りのメールアドレスを使った方が信頼性もあがるのでおすすめです。
エックスサーバーなら、独自ドメイン入りのメールアドレスが無料で作れるので、こちらの記事を参考に取得してみてください。
おもちメールアドレスが取得できたら、お問い合わせフォームを作っていこう！
STEP2.管理者メールアドレスを変更しよう
まずは、ウェブサイトの管理者メールアドレスを、STEP1で作った独自ドメインのメールアドレスに変更していきましょう。
画面左側のメニューにある『設定』にカーソルをもっていき、表示された『一般』をクリック。
管理者メールアドレスに、STEP1で取得した、独自ドメインのメールアドレスを入力。
ページを下にスクロールして、画面左下にある『変更を保存』ボタンをクリック。
画面上部に『設定を保存しました』と表示されたらOKです。
登録した独自ドメインのメールアドレス宛に、メールが届きます。
メッセージ内にあるURLをクリック。
これで管理者メールアドレスが変更できました。
STEP3.『WPForms』プラグインをインストールしよう
画面左側のメニューにある『プラグイン』にカーソルをもっていき、表示された『新規プラグインを追加』をクリック。
プラグインの新規追加画面がひらきました。
画面右上にある検索窓に『WPForms』と入力。
『WPForms』が表示されました。
『今すぐインストール』ボタンをクリック。
『有効化』ボタンをクリック。
おもちこれで『WPForms』が使えるようになったよ！
STEP4.お問い合わせフォームを作成しよう
フォームに名前を付けてテンプレートを選ぼう
『最初のフォームを作成』ボタンをクリック。
メッセージを確認して『行きましょう！』ボタンをクリック。
フォーム作成画面がひらきました。
画面右下に表示されているポップアップの『×』マークをクリック。
フォームに名前を付けていきましょう。
フォームに名前を付けるに『お問い合わせフォーム』と入力。
つづいて、テンプレートを選択していきます。
『簡単なお問い合わせフォーム』の上にカーソルをもっていくと、
『テンプレートを使用』ボタンが表示されるので、そちらをクリック。
フィールド設定画面がひらきました。
お問い合わせフォームの内容を設定しよう
『名前』フィールドをクリック。
左側に『名前』フィールドの設定画面が表示されました。
ラベルに表示されている『名前』を削除して『お名前』に変更。
フォーマットの下向き矢印をクリック。
『シンプル』をクリック。
必要があれば、説明にテキストを入力。
- お名前やニックネームをご入力ください
- ニックネーム可
- ご記入いただいたお名前でご連絡します
説明にテキストを入力すると、お問い合わせフォームの『お名前』フィールドに、説明文が表示できます。
おもち必要な人のみでOKだよ！
あとは必須がONになっていることを確認。
おもちお名前入力を必須にするかどうか選べるスイッチだよ！
つづいて『メールアドレス』フィールドをクリック。
メールアドレスのフィールド設定画面がひらきました。
ラベルはそのままでOK。必要があれば、説明にテキストを入力。
- ご入力いただいたアドレスに自動返信メールをお送りします
- 返信先のメールアドレスをご入力ください
- 半角英数字でご入力ください
説明にテキストを入力すると、お問い合わせフォームの『メールアドレス』フィールドに、説明文が表示できます。
あとは必須がONになっていることを確認してください。
さいごに『コメントまたはメッセージ』フィールドをクリック。
左側に『コメントまたはメッセージ』フィールドの設定画面が表示されました。
ラベルに表示されている『コメントまたはメッセージ』を削除して『お問い合わせ内容』に変更。
必要があれば説明にテキストを入力。
- お問い合わせ内容をご記入ください
- お問い合わせ内容をできるだけ詳しくご記入ください
- 具体的にお書きいただくとスムーズにご対応できます
説明にテキストを入力すると、お問い合わせフォームの『お問い合わせ内容』フィールドに、説明文が表示できます。
おもちこちらも必要な人のみでOK！
あとは必須のスイッチをONにしてください。
必須がONにできたらOK。
すべての設定が終わったら、画面右上にある『保存』ボタンをクリック。
これでお問い合わせ内容が設定できました。
お問い合わせフォーム送信後に通知される返信メールを設定しよう
お問い合わせフォーム送信後、お問い合わせ者に届く自動返信メールの設定をしていきましょう。
画面左側のメニューにある『設定』をクリック。
『通知』をクリック。
通知設定画面がひらきました。
送信先メールアドレスの右側にある『スマートタグを表示』をクリック。
『メールアドレス』をクリック。
『{field_id=”2″}』と『{admin_email}』の間に、半角カンマを入力。
これで送信先メールアドレスはOK。
メール件名は『お問い合わせありがとうございます』と入力。
画面を下にスクロールして、メールメッセージにテキストを入力。
この度はお問い合わせいただき、誠にありがとうございます。
以下の内容でお問い合わせを受け付けました。
{all_fiels}
内容を確認の上、折り返しご連絡いたします。
通常、お問い合わせから３営業日以内にご返信いたしますので、今しばらくお待ちください。
※このメールは自動送信されています。このメールに返信されましても対応できかねますのでご了承ください。
おもちテキストは変更してOK！『{all_fiels}』は質問者さんがフォームに入力したテキストをそのまま記載してくれるコードだよ！
すべて入力できたら、画面右上にある『保存』ボタンをクリック。
お問い合わせフォーム送信後に表示されるメッセージを設定しよう
つづいて、お問い合わせフォーム送信後、お問い合わせ者の画面に表示されるメッセージを設定していきましょう。
画面左側にある『確認』をクリック。
確認設定画面がひらきました。
必要があれば、確認メッセージの内容を変更してください。
お問い合わせありがとうございます。通常３営業日以内を目安にご返信させていただきます。確認のメールをお送りしましたのでご確認ください。
おもちテキストは変更してOKだよ！
画面右上にある『保存』ボタンをクリック。
保存できたら『×』マークをクリックして、設定画面を閉じます。
お問い合わせフォームにreCAPTCHAを設定しよう
さいごに、お問い合わせフォームにreCAPTCHAを設定して迷惑メール対策していきましょう。
Google reCAPTCHAをひらきます。
reCAPTCHAがひらいたら、あなたのサイト情報を入力していきましょう。
ラベルには、サイトのドメイン名『〇〇.com』を入力。
おもち『https://』はいらないよ！
reCAPTCHAタイプは『スコアベース（v3）』が選択されていることを確認。
ドメインには、サイトのドメイン名『〇〇.com』を入力。
おもちこちらも『https://』はいらないよ！
すべて入力できたら『送信』ボタンをクリック。
『設定が完了しました』と表示されたらOKです。
ページを下にスクロールすると、サイトキーとシークレットキーが表示されているので、WPFormsと紐づけていきましょう。
まずは『サイトキーをコピーする』をクリック。
おもちあとでシークレットキーもコピーするので、画面は閉じないでね！
ワードプレスにもどって、画面左側のメニューにある『WPForms』にカーソルをもっていき、表示された『設定』をクリック。
画面上部のメニューにある『CAPTCHA』をクリック。
『reCAPTCHA』を選択。
reCAPTCHA設定画面がひらいたら、タイプで『reCAPTCHA v3』を選択。
サイトキーに、コピーしたコードを貼り付けます。
reCAPTCHAにもどり『シークレットキーをコピー』をクリック。
ワードプレスにもどり、シークレットキーにコピーしたコードを貼り付けます。
ページを下にスクロールして、画面左下にある『設定を保存』ボタンをクリック。
画面左側のメニューにある『WPForms』をクリック。
『お問い合わせフォーム』をクリック。
『reCAPTCHA』ボタンをクリック。
メッセージを確認して『OK』ボタンをクリック。
お問い合わせフォームに、reCAPTCHAマークが表示されたらOKです。
『保存』ボタンをクリック。
画面右上にある『×』マークをクリック。
お問い合わせフォームの右側にあるショートコードをコピー。
おもちお問い合わせページを作っていこう！
STEP5.お問い合わせページを作成しよう
画面左側のメニューにある『固定ページ』にカーソルをもっていき、表示された『新規固定ページを追加』をクリック。
固定ページがひらきました。
『タイトルを追加』をクリックして『お問い合わせフォーム』と入力。
『ブロックを選択するには「/」を入力』をクリック。
『お問い合わせはこちらのフォームよりお願いいたします。』と入力して『Enter』キーをクリック。
再度『ブロックを選択するには「/」を入力』をクリックして、コピーしたショートコードを貼り付けます。
これでお問い合わせフォームが設置できました。
画面右上にある『設定』マークがONになっていることを確認。
『固定ページ』タブをクリック。
リンクの右側にある『/お問い合わせフォーム』をクリック。
リンクのポップアップが表示されたら『/お問い合わせフォーム』を削除して『/contact』に変更。
『/contact』に変更できたら『×』マークをクリック。
これでお問い合わせページのパーマリンクはOK。
すべて設定できたら、画面右上にある『公開』ボタンをクリック。
再度『公開』ボタンをクリック。
お問い合わせページが完成しました。
固定ページのアドレスの右側にある『コピー』ボタンをクリック。
おもちお問い合わせページをブログサイトに配置していこう！
STEP6.お問い合わせページのURLをSNS情報に追加しよう
画面左上にある『カスタマイズ』をクリック。
『SNS情報』をクリック。
SNS情報設定画面がひらいたら、画面を下にスクロール。
『お問い合わせページ ページURL』にコピーしたお問い合わせページのURLを貼り付けます。
URLがコピペできたら、画面右上にある『公開』ボタンをクリック。
設定が保存できたら、左向き矢印をクリック。
おもちフッターにお問い合わせページを載せていこう！
STEP7.フッターにお問い合わせページのリンクを追加しよう
『フッター』をクリック。
フッター設定画面がひらいたら、画面を下にスクロール。
『フッターにSNSアイコンリストを表示する』にチェック。
画面右上にある『公開』ボタンをクリック。
これでフッターにお問い合わせページのリンクが追加できました。
STEP8.サイドバーにお問い合わせページのリンクを追加しよう
画面左側のメニューにある『外観』にカーソルをもっていき、表示された『ウィジェット』をクリック。
『［SWELL］プロフィール』の下向き矢印をクリック。
『共通サイドバー』をクリック。
『ウィジェットを追加』ボタンをクリック。
画面右側の共通サイドバーに『［SWELL］プロフィール』が追加されたので、そちらの下向き矢印をクリック。
必要な情報を入力してください。
入力できたら画面を下にスクロールして『SNSアイコンリストを表示する』にチェック。
『保存』ボタンをクリック。
これでサイドバーにプロフィールが表示できました。
プロフィールにあるメールマークが、お問い合わせページへのリンクとなっています。
WordPressテーマ『SWELL』におすすめなプラグイン７選
