Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでお問い合わせフォームを作成する方法(ステップバイステップ)

お問い合わせフォームを作成し、WordPressサイトに追加したいとお考えですか?

どのサイトにもお問い合わせフォームが必要です。訪問者が商品やサービスについて簡単に問い合わせることができます。初期設定のWordPressにはビルトインのお問い合わせフォームがありませんが、簡単にサイトにお問い合わせフォームを追加する方法があります。

この投稿では、コードを一行も触ることなくWordPressで簡単にお問い合わせフォームを作成する方法をご紹介します。

How to create a contact form in WordPress (step by step)

なぜ WordPress のお問い合わせフォームが必要なのか?

なぜお問い合わせフォームが必要なのだろう?サイトにメールアドレスを追加するだけで、人々が私にメールを送れるようにすることはできないのでしょうか?

お問い合わせフォームを追加するには、コーディングの知識が必須であることを恐れているためです。

幸いなことに、WordPressプラグインを使えば、コーディングの知識がなくてもWordPressサイトにお問い合わせフォームを追加することができます。

お問い合わせフォームが、ページにメールアドレスを貼り付けるよりも優れている理由のトップ3をご紹介します。

  • スパム対策– スパムボットは定期的にサイトをスクレイピングし、mailto: メールアドレスのタグを探します。サイトにメールアドレスを投稿すると、多くのスパムメールを受信するようになります。一方、お問い合わせフォームは、お問い合わせフォームスパムをブロックし、ほとんどすべてのスパムメールを阻止することができます。
  • 一貫した情報– メールの場合、必要な情報をすべて送ってくれるとは限りません。お問い合わせフォームなら、ユーザーの電話番号や予算、プロジェクトの詳細など、求めている情報を正確に伝えることができます。
  • 時間の節約– お問い合わせフォームは、想像以上に多くの方法で時間の節約に役立ちます。一貫した情報はもちろんのこと、フォームの確認を利用してユーザーに次のステップを伝えることもできます。例えば、動画を見てくださいとか、レスポンシブが来るまで24時間待ってくださいとか。

それでは、WordPressで簡単にお問い合わせフォームを作成する方法を順を追ってご紹介しましょう。

動画チュートリアル

Subscribe to WPBeginner

文書による指示がお好きな方は、このまま読み進めてください。

ステップ 1.最適な WordPress お問い合わせフォームプラグインを選ぶ

まず最初にWordPressのお問い合わせフォームプラグインを選びます。

WordPressのお問い合わせフォームプラグインは無料、有料を問わずいくつかありますが、私たちのサイトではWPFormsを使用しており、市場で最良の設定であると考えています。

以下はWPFormsがベストだと考える3つの理由です:

  1. 最も初心者向けのお問い合わせフォームプラグインです。ドラッグ&ドロップビルダーを使えば、数クリックで簡単にお問い合わせフォームを作成できます。
  2. WPForms Liteは100%無料で、簡単なお問い合わせフォームを作成することができます(600万以上のサイトで利用されています)。
  3. より強力な機能の準備ができたら、WPForms Proにアップグレードすることができます。

さらに詳しく知りたい方は、WPFormsのレビューをご覧ください。

お問い合わせフォームプラグインを決めたので、あなたのサイトにインストーラしましょう。

ステップ2.WordPress にお問い合わせフォームプラグインをインストールする。

このチュートリアルでは、無料で使いやすいWPForms Liteを使用します。

WordPressダッシュボードにログインし、プラグイン ” 新規追加に進むことで、あなたのサイトにこのプラグインをインストールすることができます。

次に、検索フィールドに’WPForms’と入力し、’Install Now’ボタンをクリックします。

Install WPForms plugin

これで自動的にプラグインがサイトにインストールされます。

次に、「有効化」ボタンをクリックしてプラグインを有効化する必要があります。

Activate WPForms plugin

プラグインメニューが表示されない場合や、より詳しい説明が必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

ステップ3.WordPressでお問い合わせフォームを作成する

WPFormsを有効化したので、WordPressでお問い合わせフォームを作成する準備ができました。

これを行うには、WordPress 管理画面のWPForms ” すべてのフォームに移動します。そして ‘新規追加’ ボタンをクリックします。

Add new WPForms form

これでWPFormsのドラッグ&ドロップフォームビルダーテンプレートライブラリが開きます。お問い合わせフォームに名前を付けて、お問い合わせフォームのテンプレートを選択します。

テンプレートを選択するには、マウスオーバーして「テンプレートを使用」ボタンをクリックします。

WPForms Liteには20種類以上のフォームテンプレートが用意されています。これらを使って好きなタイプのお問い合わせフォームを作成することができます。

この例では、’Simple Contact Form’ テンプレートを選択します。これで自動的に名前、メール、メッセージフィールドが追加されます。

Choose WPForms form template

フォームフィールドをクリックして編集することができます。

フォームフィールドをクリックすると、左側に「フィールドオプション」パネルが表示され、変更することができます。

Make edits in field options panel

マウスを使ってフィールドをドラッグ・アンド・ドロップして順番を変えることもできます。

Change form fields order

新規フィールドを追加したい場合は、左サイドバーで利用可能なフィールドから選択するだけです。

フォームにドラッグするか、フォームをクリックすると、自動的にフォームに追加されます。

Drag and drop new form fields

フォームのカスタマイズが終わったら、必ず「保存」ボタンをクリックしてください。

ステップ 4.WordPress フォームの通知と確認を設定する

お問い合わせフォームを作成したら、フォーム通知とフォーム確認のオプションを適切に設定することが重要です。

フォームの確認は、サイト訪問者がフォームを送信した後に表示されるものです。これはシンプルなお礼のメッセージでも、ダウンロード可能なPDFをアップロードしたページでも、何でもかまいません。

お問い合わせフォームは、WordPressブログのお問い合わせフォームに送信された後に届くメールです。

確認メッセージをカスタマイズするには、フォームビルダー内の「設定」タブをクリックし、「確認」タブをクリックします。

すでに初期設定のお礼メッセージがあります。

ただし、「確認メッセージ」ボックスでカスタマイズすることもできます。

Go to form confirmation message

フォーム送信に成功した後、メッセージを表示する代わりにユーザーをリダイレクトさせたい場合は、「確認タイプ」のドロップダウンから「URLへ移動」を選択してください。

次に、ユーザーをリダイレクトさせたいURLを入力します。

Redirect to page after confirmation

ここで変更した場合は、必ず「保存」ボタンをクリックしてください。

その後、フォームの通知設定が正しいかどうか確認してください。同じ’設定’メニューから’通知’タブをクリックするだけです。

WPFormsの最も良いところは、初期設定が初心者にとって理想的であることです。通知設定に行くと、すべてのフィールドがあらかじめ動的に入力されます。

Go to form notifications tab

初期設定では、サイト作成時に設定した管理者メールに通知が送信されます。

カスタマイザーメールアドレスに送信したい場合は、変更することができます。複数のメールに通知を送りたい場合は、各メールアドレスをカンマで区切ってください。

メールの件名」にはあらかじめフォーム名が入力されています。差出人名」にはユーザー名が自動的に入力されます。

Change form email notifications

お問い合わせフォームへの返信先: ユーザーがお問い合わせフォームに入力したメールに返信されます。

ここで変更した場合は、本当に〜してもよいですか?

フォームメールを複数の人や異なる部署に送信したい場合は、複数の受信者を持つお問い合わせフォームの作成方法をご覧ください。

フォームメールの受信に問題がある場合は、WordPressでメールが送信されない問題の解決方法をご覧ください。

ステップ 5.WordPress お問い合わせフォームをページに追加する

WordPress のお問い合わせフォームの設定が完了したら、次はそれをページに追加しましょう。

既存のお問い合わせページに追加するか、WordPressで新規ページを作成します。

新しいお問い合わせフォームページを作成したい場合は、ページ ” 新規追加と進み、ページに名前を付けるだけです。

WPFormsブロックを使ってページにフォームを追加します。Plus’ブロック追加ボタンをクリックし、’WPForms’を検索してください。

次に、’WPForms’ ブロックをクリックします。

Create new contact page and add WPForms block

WPFormsブロックがページのコンテンツエリアに表示されます。

ドロップダウンメニューをクリックして、先に作成したフォームを選択する必要があります。

Select contact form from drop down

WPForms はエディター内にお問い合わせフォームのプレビューを読み込みます。これで ‘公開’ または ‘更新’ ボタンをクリックしてフォームを保存することができます。

さあ、あなたのサイトを訪れて、その動きをご覧ください。

WordPressのお問い合わせページのサンプルはこんな感じです:

WordPress contact form example

お問い合わせフォームをページに追加したいだけなら、ここで完了です。おめでとうございます。

WPForms には WordPress のお問い合わせフォームのショートコードも付属しています。WPForms ” すべて のフォームにアクセスして、フォームの横にあるショートコードをコピーすることで使用できます。

Copy form shortcode

あとはすべて、追加したいページを開き、「プラス」追加ブロックボタンをクリックして「ショートコード」を検索するだけだ。

次に、「ショートコード」ブロックをクリックする。

Add shortcode block

次に、上記でコピーしたショートコードをボックスに貼り付けます。

その後、’更新’または’公開’をクリックすると、上記のようにあなたのサイトにお問い合わせフォームが表示されます。

Paste form shortcode and save

ショートコードについてさらに詳しく知りたい方は、WordPressでショートコードを追加する方法についての究極のガイドをご覧ください。

ステップ 6.WordPress お問い合わせフォームをサイドバーに追加する

WPFormsにはWordPressのお問い合わせフォームウィジェットも付属しており、サイドバーやWordPressテーマのウィジェット対応エリアにお問い合わせフォームを追加することができます。

これを行うには、外観 ” ウィジェットに移動し、フォームを追加したいウィジェットエリアの「プラス」追加ブロックアイコンをクリックする必要があります。

Add new widget block

次に「WPForms」を検索する。

次に、’WPForms’ ブロックをクリックしてサイドバーに追加します。

Add WPForms widget block

その後、ドロップダウンからお問い合わせフォームを選択する必要があります。

これで自動的にフォームのプレビューが読み込まれます。

Select form from drop down

次に、「更新」ボタンをクリックして変更を保存します。

これで、サイドバーやその他のウィジェットエリアにお問い合わせフォームが表示され、サイトを訪問することができます。

Sidebar contact form example

ウィジェットについてさらに詳しく知りたい方は、WordPressでウィジェットを追加・使用する方法をご覧ください。

WordPress お問い合わせフォームを次のレベルへ

WPForms Proには 1,800以上のフォームテンプレートが用意されており、必要なフォームを素早く作成することができます。

条件付きロジック、アンケート&投票、電子署名収集、フォーム放棄、ジオロケーションデータ、カスタマイズ可能なクーポンコードなどの強力な機能があります。

さらに、Stripe、PayPal、Authorize.Net、Square経由のオンライン決済を簡単に受け付けることができます。WPFormsの無料版でもStripeの支払いを受け取ることができます。

もちろん、GoogleシートやHubSpotなど、何千ものマーケティングツールやビジネスツールと統合し、ワークフローを効率化することもできる。

WPFormsはまた、フォームランディングページ、会話フォーム、リードフォーム、電卓フォームのようなフォームカスタマイザーツールを追加し、高いコストをかけずにサイトにインタラクティブなフォームを追加することができます。

WPForms Full Page Conversational Forms Example

詳しくは、WordPressでよりインタラクティブなフォームを作成する方法をご覧ください。

お問い合わせフォームのエラーにお困りですか?WPBeginnerプロサービスに問題を解決してもらいましょう!お問い合わせフォームのエラーを素早くトラブルシューティングし、修正するWordPress緊急サポートを低価格で提供しています。時間を節約し、安心して、カスタマイザーにご連絡ください。WordPress サポートサービスを今すぐご予約ください!

この投稿がWordPressでシンプルなお問い合わせフォームを作成するのにお役に立てば幸いです。また、メールマガジンの正しい作り方や、専門家が選ぶ中小企業に最適なビジネスフォンサービスもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

162件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Will Beadenkopf

    I used the basic contact form from WPForms on my wife’s blog and website, but we get more spam replies from people trying to sell something than we do real replies.
    Can we put more validation in the basic form, or do we have to go to the Pro version?

    • WPBeginner Comments

      The free version of WPForms has a couple CAPTCHA options available. These can be very powerful in blocking spam.

  3. Jiří Vaněk

    I use WP Forms since I won a full license in your giveaway. I’ve never won anything before, and then I received a full license for WP Forms from you for free. I have to say, it’s a great plugin.

    • WPBeginner Support

      Glad you liked the plugin :)

      管理者

  4. susan

    Hello, I followed the steps howevert he contact page does not appear on the webite. How should I proceed as I have attempted it numerous times now.

  5. Bryan

    Hello, thanks for the help. You mentioned that the email address can be changed. Can you please share how this is done and where?

    Thanks

  6. Karolina

    I followed all the steps but for whatever reason, this form doesn’t work. I uninstalled and installed it few times. I followed exactly as on video but when sending a test contact form I don’t receive any emails or notifications.

  7. Eric

    I followed your video to put a contact form on my site and you made it easy and enjoyable. I noticed that you had your address and contact information on the side. How do I put my contact information there? Thank you in advance.

    Eric

    • WPBeginner Support

      If you mean from the video, we placed another block on the page and manually added the text :)

      管理者

  8. Natalia

    hi, how to edit buttons and typeface in the form?

    • WPBeginner Support

      It would depend on the form plugin you decide to use and there are different locations for that customization.

      管理者

  9. Amaka obi

    I fid all these but when I tried to test it, I didn’t get any notification in my mail from my website. Please what could be the cause?

    Thank you

  10. Saiqa

    Thank you so much! it really helped me:)

    • WPBeginner Support

      Glad our guide was helpful :)

      管理者

  11. JITEN PATIL

    Thanks! this plugin is nice. i am using it and it is very simple & easy to build forms in less time.

    • WPBeginner Support

      Glad you found the plugin helpful :)

      管理者

  12. Brian Leggero

    Wow! It sure doesn’t get any easier than that!

    Great instructions! Nice slow talking too, easy to understand.

    Keep up the GREAT work!

    • WPBeginner Support

      Thank you, glad you found our guide helpful :)

      管理者

  13. Geoff Anderson

    I’ve installed WPForms Lite and activated it but it doesn’t show up in the side menu bar in WordPress. I can see it in the Plugins but I don’t have an option to select settings just deactivate.
    So I’m unable to access the plugin at all. Any suggestions?
    Cheers, Geoff

    • WPBeginner Support

      You may want to try reinstalling the plugin in case there was a hiccup with your download. Otherwise, please reach out directly to WPForms’ support and they would be able to assist.

      管理者

  14. Flora tony

    please when i click on submit, i go to my mail and i dont see any mail

    i have tried it several times

  15. Daniel Putman

    I am getting very frustrated with your tutorials. They seem to be out of date because the view that I get is different than what you are showing. Please update these tutorials.

  16. Court

    This no longer works as your need a business plan to have a contact form.

  17. Chris

    I just installed WPForms and created a contact form for my website.

    When I visit the contact page, I see two contact forms; the one from WPForms and another one. I don’t have any other form plugin except WPForm.

    How can I resolve this?

    • WPBeginner Support

      By default, WordPress does not have a contact form tool, you would want to check through your plugins again for plugins that add a contact form tool.

      管理者

      • Chris

        I later found out that the problem was from my theme. I contacted support and they gave me a code to disable it.

        Thanks for your feedback.

  18. Marguerite F Cleveland

    I have my form set up but when I test it in my site and click the submit button nothing happens. I set it up using the block editor.

  19. Luz Manalo-Cruz

    Hi. I am unable to add the contact form in Pages. When I click on Pages in my dashboard, there is no Add Forms field. Is there another way? I am on localhost.

    • WPBeginner Support

      You’re likely using the block editor, you would want to check for the WPForms block to add the form to your page :)

      管理者

      • Luz Manalo-Cruz

        That worked, thanks!

        • WPBeginner Support

          Glad we could help :)

  20. Sakshi Kaushik

    I have installed the WPforms plugin. but where do i check my form entries from? I am unable to see the entries that my viewers are giving. Please help.

    • WPBeginner Support

      Under the WPForms menu item, there should be entires as an option. If you are unable to see the entires, you would want to reach out to WPForms’ support and they would assist with your specific issue.

      管理者

  21. Adepoju Olaide

    Thanks for this post. i hope this would work for me! :)

    • WPBeginner Support

      You’re welcome, our guide should work for every WordPress.org site so it should work for you as well :)

      管理者

  22. Ainjel M

    Great post! Thank you. Was so simple!

    • WPBeginner Support

      You’re welcome, glad we could simplify the process for you :)

      管理者

  23. Jennifer Preissler

    I am using divi theme and I am not finding the add form button…

    • WPBeginner Support

      If you are editing a post/page with the block editor you would want to add the WPForms block instead of looking for a button :)

      管理者

  24. santoshrana

    informative detail. That list has helped a lot in my task.

    • WPBeginner Support

      Glad our guide could help :)

      管理者

  25. brenda s

    I need help, I have created a form and would like to know how I can receive the information once submit button is pressed, where does my information go.

    • WPBeginner Support

      It would depend on what form you are using but the default is to email the submissions to the email under Settings>General

      管理者

  26. beth pross

    I have made my contact form too many times to count. I have tried to upload it also several times. it will be in the preview. It will NOT publish.
    I have followed your directions every time. I have invested over ten hours on this one edit.
    What am I doing wrong?

    • WPBeginner Support

      It would depend on which plugin you’re using. If you reach out to your contact form plugin’s support they should be able to assist with what the issue could be.

      管理者

  27. Ranojit Kumar

    Thanks for this post.

    • WPBeginner Support

      You’re welcome :)

      管理者

  28. Kathy Rowland

    Thanks for the great tutorial! Off to update and activate my Contact Form. Let the emails begin :)

    • WPBeginner Support

      You’re welcome, glad you liked our article :)

      管理者

  29. Jochen Gererstorfer

    Do we have to install another plugin, if we upgrade from the lite version to WPForms Pro?

    • WPBeginner Support

      When you add your license key the lite version should replace itself with the pro version for you.

      管理者

  30. Kathleen

    This is great…sounds easy enough. I’m going to try it with my granddaughters website. Thanks…

    • WPBeginner Support

      You’re welcome, glad our guide is helpful :)

      管理者

  31. Burhan

    The contact form is one of the must have elements of a website.
    This article is all you need to learn making the best and proffessional contact form.

    • WPBeginner Support

      Thank you for your recommendation of our article :)

      管理者

  32. Henry Bartimus

    when I click “confirmation and an empty box opens with no content, thank you

    • WPBeginner Support

      That’s quite strange, you could start by disabling your other plugins to see if it is a plugin conflict. Otherwise, please reach out to WPForms’ support directly and they should be able to assist with the issue :)

      管理者

  33. Susan

    I’ve installed WP forms Lite, but can’t see the configuration options anywhere in settings – there isn’t much at all there. Any clues?

    • WPBeginner Support

      It would depend on what specific option you’re looking for as some options are in the forms themselves. If you reach out to the plugin’s support they can help point you to what you’re looking for :)

      管理者

  34. Greg

    I created the Simple contact form and the problem I am having is the email that is sent goes into the Junk Email folder. I have tried adding the domain and sender as safe but it still goes to Junk Email. How can I stop this?

  35. Clement

    Great tutorial for anyone who wants to create a contact form in an easy-to-follow manner

    • WPBeginner Support

      THank you :)

      管理者

  36. Khan

    Nice post Bro. I want to ask, does this form comply with GDPR?

  37. Jess

    Hi there, thank you for your insightful articles, they have helped me a lot!
    I am wondering if you know how to insert a code that allows the user to remove a file that has been uploaded to a Contact 7 form? Say it was uploaded by mistake and they want to remove it and try again. At the moment my form doesn’t allow me to delete any uploaded files… Appreciate your help.

    • WPBeginner Support

      For a question specific to contact form 7, you would want to reach out to the plugin’s support and they should be able to assist.

      管理者

  38. Eucharia

    Thanks for the wonderful article, I have been following it to create my site but I have problem with adding my Form to the contact page. When I click on add page it opens a bar to add title but I don’t see the add form option. I have not been able to add my contacts form to my contacts page.
    Please I need you to help me. Thanks

  39. John

    When I make a new page, I don’t see an “add form” button. This is WP 5.0.2, freshly reset.

    • WPBeginner Support

      For the new blocks editor you would want to add a WPForms block and that would allow you to add the form :)

      管理者

  40. Himanshu

    Thank you for your hard work and the videos. I learn a lot from your videos. However, one thing I noticed consistently is that often you skip some steps or zip past a simple action that confuses the newcomers, especially when you are ‘WPbeginner’ instructors. Example. While tutoring the making of a Contact Us form, before publishing/updating it, you zipped past the text We’d Love to Hear From You text. This is the text you entered but did not show and that confused me a lot as to how come that text did not show up in my form because I have been following you step by step to create the form on my new website while I am watching your video. I went back and forth and created 4 forms to no avail–the text just would not show up. Then I said to my self, what the heck! and entered it on my own and proceeded to remaining video. I noticed the same issue in your other videos as well. Could you be a little slower and specific? Please note, this is not a criticism; this is a constructive suggestion. You folks do a great job and without you, I would not have my website created on my own and I would not be writing to you here. Thanks a million for doing this

    • WPBeginner Support

      Hi Himanshu,

      Thank you for your kind feedback, we really appreciate it. We are aware of the issue you are referring to, and our team is continuously working on improving the videos. We will put more effort into it.

      Meanwhile, if you are unable to follow instructions shown in a video or one of our tutorials, then please do not hesitate to ask us. You can do so by leaving a comment or sending us a message using the contact form on our website. We try our best to answer all user questions.

      管理者

  41. Brenda Donovan

    The simple form is all I need and it looks good and is looking good on cell phone too.

    I set the reCaptcha up but it doesn’t show up on the contact page where the form code is.

    Is there a short code for that also? and if so where in the settings is it?

    Thanks…

  42. Michel Kapteijns

    Hello,
    I followed al the steps, I see the contact form on my site. I can fill in a message, and after I submit the message I neatly see the ‘thank you’ message. Butt.. I do nog receive the mesage in my e-mail account. What am I doing wrong?
    Thank you very much for your answer on this.
    Regards, Michel

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。