WPBeginner - 初心者のためのWordPressチュートリアル

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でお問い合わせフォームを作成する方法（ステップバイステップ）

最終更新日 by Editorial Staff | レビュー Syed Balkhi

シェア フェイスブックメッセンジャー WhatsApp
編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

お問い合わせフォームを作成し、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,700以上のフォームテンプレートが用意されており、必要なフォームを素早く作成することができます。

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

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

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

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

WPForms Full Page Conversational Forms Example

詳しくは、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で人気 今すぐだ！

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

Avatar

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 says

    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. Shamli says

    Hi, I’ve done all the steps as mentioned above, but I cannot see the Contact page when I preview.

    Please help me to solve.
    Thank you.

    返信

  3. Brenda says

    HI – We are using this contact form and it’s fine but I would like to add Captcha and, more importantly, some text that can be overwritten in the message box. There is a local company with a very similar name so we are constantly receiving messages which relate to this other company. We want to have some text, that has to be overwritten, to reiterate what our company is to try and reduce these messages. Is this possible?

    返信

    • Brenda Donovan says

      I redid the form and rechecked the add recaptcha on the confirmation settings and it worked this time. I had done it before but somehow didn’t take.

      now on to the mail problem. thanks

      返信

  4. safi says

    sir how can i know which email system notify or receive message i did everything but don,t which i will receive the email from client i am beginner with wp

    返信

  6. Sarah Zubair says

    So how do I access the library of media (if I’ve an option of attaching some files in my WP forms) then where do they all get stored?

    返信

    • WPBeginner Support says

      Hi Sarah,

      By default, the user-uploaded files are stored in the WPForms folder inside the Uploads directory of your site.

      If you’d prefer to upload the files to the WordPress Media Library, click on the File Upload field in the form builder. Then, under Advanced Options, check the box next to Store file in WordPress Media Library.

      For more details see this guide.

      返信

      管理者

  7. marypeter says

    This is truly helpful. I can say it is my first time to leave a review in any website. The information you have provided has prompted me to do this. Thank you a thousand times!!

    返信

  8. Eston says

    Hi
    how do i set it up that i recieve emails in Gmail, and be able to reply to customers right there in Gmail.com?

    返信

  9. Cathy says

    I found this very helpful in setting up, however, after completion I ran a test, so did a friend of mine, I cannot figure out why we are not receiving the email tests sent from the web site? Although I’ve gone through the steps a second time to be sure all was correctly set up, I am not receiving messages from the web site, I hope you can assist with constructive suggestions to aid in problem solving, much appreciate the assistance…

    返信

  10. Lori Jo says

    I am very new, easily confused! Regarding the assigned admin email address in my WP blog site, can that actually be used to receive messages from the contact form? I think the address looks more professional and it would be nice to have all site messages responding back to the actual site instead of an outside email like my Gmail. I did a test and I could not find the reply, installed Flamingo and I did see it but there is no reply option like regular email.

    Please let me know, thanks!

    返信

  12. Yoshi says

    I’m looking to build my own contact form plugin because the contact forms in the market I’ve tried slow down my site. Is this the best alternative?

    返信

  16. gigi says

    hi, i have key in my email address in the notification but i’m yet to get any notification from my email even though i have done few testing.. how do i solve this matter? please guide, thanks

    返信

  17. Al Kadam says

    I have contact form plugin installed but customization is very limited and the code is too long and complicated. Now I plan to copy a simpler .php code and install it myself. is it better to do it this way? is there security issue accessing the .php file from the page where the contact form is placed?

    返信

  18. Ashley says

    Hi, I have tried several different forms and this keeps happening. Whenever I go to the contact page, under the title it says “>contact”. I can remove the word “contact” by removing the page title, but that little carrot ( > ) is still there. how do I get rid of that? Thanks.

    返信

  19. Joe Tittiger says

    The mail does not arrive from this form.
    Is there a video on how WP handles email so that I can fix this?

    返信

  20. Keith says

    Thanks guys, a real easy process that let me set up my first contact form in like 10 minutes; tested and works

    返信

  21. olx says

    Hello
    i tried inserting form after creating it but on the add page the form did not insert. my wordpress seems to be limited and cant add and form. please help

    返信

  22. pratima Shrivastav says

    Hi,
    I have created the Wp form as mentioned but when I test it out I am receiving any email notifications. i have turned on the notifications by clicking on email Notification section of the form. Am I missing any other settings? Please guide me to this

    返信

  23. Yvonne says

    I have set up the form, just like it was explained, but it isn’t showing up on the page I told to add the form.

    返信

  26. Rebecca Yurkanin says

    WP forms is super easy to set up, but DOES NOT work. I tried several times to send an email to myself. It worked once! The other 20 times did not. I went back and tried to change things around. It still did nothing. I am familiar with shortcodes, so that wasn’t the problem. And never saw a recaptcha. And wpforms doesn’t even have a contact form to fill out so I can contact them! What a joke!

    返信

  27. Brenda says

    My blog isn’t even launched yet. I have a Coming Soon Page. I have been working on getting a Contact Form to appear for what seems like hours. I had added a new Contact Page on my menu. I saved the code on my Contact Page. Published. And, The Contact Form is not showing up when I live preview Contact on my primary menu. I’m following your tutorial. This seems so easy, and yet…not so much! Does this work with Genesis child? I’ve tried WPForms and Contact Form. I don’t know what I’m doing wrong. Since I’m a newbie, I’m having trouble with menu + page connection and menu category drop downs. This blog setup is more difficult than I thought. Any advice?

    返信

  28. zelda zerafa says

    When I go on SETTINGS it looks different to your video.
    I get 3 tabs : General, Integrations and System Info as follows:

    General > Form Styling/ Email/Re Captcha/Validations
    Integrations > Integrate Constant Contact with WP forms
    System info

    I have no idea what to fill in for Validations and Email.
    Under validations there are also two mysterious fields : Number and Confirm Value

    Please help!

    返信

    • WPBeginner Support says

      Hey Zelda,

      The screen you are viewing is for the plugin settings. Click on WPForms » All Forms and then edit a form or go to WPForms » Add New to launch the WPForms’ form builder interface. There you will see a screen like the screenshot above with a Settings tab. These settings are specific to the form you are creating.

      返信

      管理者

  32. Myri says

    Is this setup (Form plugin) recommended for creating a form with ~500 entries per month where users upload images + complete payments. Eg. Now I am using contact form 7 plus cc7 paypal addon to create a “submit your images + pay” type form. Is this sustainable or is it better to use a professional form builder service?

    返信

  34. Dock says

    excellent blog, very rich in content and correctly thought out, personally I found

    here much interesting and useful…..Well! let know my friend as well.

    返信

  35. Heather Pooley says

    I followed this tutorial and I got the contact form working. But when I tried to send a test email through it to my blog email address from my personal one, it didn’t get to me. Any advice on how I can fix this?

    返信

  36. Prats says

    Unable to add contact form as sidebar. Already created form using WPforms, added to WordPress widgets (Appearance-widgets) but unable to see the form on page (But getting the title form the form on the sidebar widget area). Tried several times, so frustrated, Can you help ?
    FYI, I am using live composure and beaver page builder to design page.

    Thanks in advance

    返信

  37. Kathy Broyles says

    Hi! created the form and linked the page – works great! but… when i do a test and hit submit, I get this:

    how do I fix that?
    thanks,
    Kathy

    返信

  38. Calli Jacobs says

    Hello,

    For some reason, the shortcode doesn’t work, and the “add form” button doesn’t, either. It just gives me the shortcode in both “text” and “visual.” What am I doing wrong?

    Asking you because I used the suggested plugin.

    返信

  40. Joe Andrews says

    How long does it take for the wpforms contact me plugin to work? I set it up on my wordpress site and the submit appears to work and the reply message appeared as expected. I have tested it 3 times (now an hour later on the last one) and have yet to receive any of the notices. I tried it first to the admin, and then changed it to my regular email. 0-3 have been received. I have checked the spam folder.

    返信

  42. stephen thomas says

    how do I use the same form but know what page it has come from automatically. I want to design a simple form and have custom made a few for every page I place it on. I’d rather it just emailed me and somewhere tells me ‘came from contact us page’ or ‘enquiry came from price list page’

    返信

  43. Kevin says

    Hello thanks for the post. Is there away to change the font color? The font is black and our web page, thus you can’t see the words.
    Thanks

    返信

  45. Neil Hanes says

    I’m brand new to blogging and this guide is fantastic! Thank you. I have a couple of follow up queries:

    – If I fill in a custom email address, can I respond to the inquiry through my website? If so, how?
    – Is there any way to change the font of the form to be more in line with my website theme? I’m thinking maybe I just want to unbold the title and field headings.

    Thanks

    Neil

    返信

  46. Alicia says

    After building up the contact form, (yes, i did add the email address for notification) do not receive any notification. I had trouble with Contact Form 7 so I am now trying WPForms and it shows the same problem! How to make WPForms work? Thx.

    返信

  47. Saher says

    From:domain name [mailto:info@domain name]
    Sent: Sunday, May 15, 2016 4:53 AM
    To: info@domain name
    Subject: Contact from domain name

    Name : XYZ
    Email :]xyz@gmail.com
    Message :This is testing email

    Hi ,
    when I used short code of contact form & send testing email to check I got email with 1st paragraph . I don’t need this info can you help how can I stop it ?

    返信

  48. Harsha says

    I installed. I filled info in the form to test it and clicked “sumbit”. It said “Thank you, will be in touch with you” And nowhere it appeared in the mail. Where to see that info???

    返信

      • Harsha says

        I have set up email using go daddy C panel. Is it same for WordPress also? Or Do I have to setup a different admin email id in WordPress? Please guide me.

        However I have included all email ids in the notification settings separated by commas (Cpannel id & personal gmail id)

        But nowhere I received any mail regarding the info I filled in the contact form for testing purpose.

        Also, I went through the link “how to fix WordPress not sending email issue” and installed Gmail SMTP it didn’t work either. I tried troubleshooting by configuring port with 587 (with TLS encryption), 465 (with SSL encryption). 25 with TLS first and then SSL. Nothing worked.

        返信

  49. Lesley Jackson says

    Hi,
    This all looks very useful but when I want to use some of this I can’t seem to find it on my admin site. I wanted to create a contact form but can’t find any way to add a new plug in. Are these tips and suggestions just for people who have a self hosted WordPress blog?

    返信

  50. jo dewberry says

    Thank you so much. I am new to blogging and your step by step information was easy to understand and I installed my Contact plug in first time.

    返信

返信を残す

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

著作権 © 2009 - 2024 WPBeginner LLC.無断複写・転載を禁じます。WPBeginner®は登録商標です。

Awesome Motiveが管理する｜WordPressホスティングがSiteGroundが管理する

を手伝ってほしい。…

人気のある検索

ブログの開始 ワードプレス SEO WordPress パフォーマンス WordPress エラー WordPress セキュリティ オンラインストアの構築