{"id":140773,"date":"2015-05-13T08:00:34","date_gmt":"2015-05-13T08:00:34","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=140773"},"modified":"2019-08-23T04:32:43","modified_gmt":"2019-08-23T04:32:43","slug":"build-contact-form","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/build-contact-form\/","title":{"rendered":"How To Build Your Own WordPress Contact Form in 5 Minutes for Free"},"content":{"rendered":"

Every website NEEDS a contact form. Whether you\u2019re selling products or services, or you\u2019re running an informational blog, your website needs to have an easy way for anyone to contact you. That\u2019s where a contact form comes in handy!<\/p>\n

In this post, you\u2019ll learn how to build your own contact form and add it to your WordPress website. All without touching a single line of code, in under 5 minutes. And completely for free.<\/p>\n

We\u2019ll be doing this using Forminator<\/a>, the easiest form maker plugin for WordPress.<\/p>\n

Prefer a video instead? We’ve got you covered.<\/p>\n

JiBEJWe2xg4<\/span><\/span><\/p>\n

Now, before we get started…<\/p>\n

Why Have a Contact Form At All?<\/h2>\n
    \n
  1. They can act as an easy first point of contact between you and your clients\/readers.<\/li>\n
  2. Users on the net have very short attention spans, and contact forms are a quick and easy way to get in touch with you.<\/li>\n
  3. They help reduce spam, since your email address is not exposed publicly. It blocks spammers from harvesting your email address through bots.<\/li>\n
  4. You get to define the input fields in your contact form, thereby controlling what type of information you get from users and ensuring that it\u2019s consistent across all the entries received.<\/li>\n
  5. They\u2019re the best and most cost effective way of generating leads.<\/li>\n<\/ol>\n

    \u201c74% of marketers are using web forms for lead generation, and 49.7% of marketers say that web forms are their highest converting lead generation tool.\u201d
    \n\u2014     HubSpot Report<\/a><\/p><\/blockquote>\n

    Convincing enough? Now let\u2019s move on to the more practical stuff!<\/p>\n

    Step 1: Installing Forminator<\/h2>\n

    First, let\u2019s install Forminator by going to WordPress Dashboard > Plugins > Add New Plugins<\/em>. Search for Forminator <\/em>here, click the Install Now<\/em> button and wait for it to finish. Once done, press the Activate <\/em>button.<\/p>\n

    Note:<\/strong> If you prefer manual to automatic, you can also download Forminator directly from the WordPress repo<\/a> and upload it to your site.<\/p>\n

    \"Post <\/div>\n

    WPMU DEV members can also install Forminator Pro quickly through their WPMU DEV dashboard.<\/p>\n

    \"Post <\/div>\n

    Step 2: Creating Your Contact Form<\/h2>\n

    Now that we have Forminator installed and activated, it\u2019s time to create your contact form.<\/p>\n

    To do that, go to Forminator > Forms<\/em> and press the blue Create<\/em> button. Alternately, you can also do this directly via Forminator\u2019s dashboard.<\/p>\n

    \"Post <\/div>\n

    Once you click the Create<\/em> button, a popup will appear wherein you must enter your new form\u2019s name. Keep it memorable so that you can recall it later. Don\u2019t fret, you can change the form name later if needed.<\/p>\n

    \"Post <\/div>\n

    After entering your form\u2019s name, hit the blue Create<\/em> button again.<\/p>\n

    Your new form is now created. Every form in Forminator comes with 4 default input fields: First Name, Email Address, Phone Number, <\/em>and Message<\/em>. These input fields are good enough for a basic contact form, so we\u2019re right on the button here.<\/p>\n

    \"Post <\/div>\n

    The First Name<\/em> and Email Address<\/em> fields are marked as required by default. This is highlighted by a red asterisk symbol (*) beside them.<\/p>\n

    You can set whether an input field is Required<\/em> or Optional<\/em>. Let\u2019s set the Message<\/em> field as Required<\/em> so that the form doesn\u2019t submit if it\u2019s left blank by the user.<\/p>\n

    To do that, click on the Message<\/em> field, and then in the popup head over to its Settings<\/em> tab. Under here, select the Required<\/em> option. Once selected, an additional Error message<\/em> option will open underneath. Here you can enter the error message that the user sees if they leave this field blank.<\/p>\n

    \"Post <\/div>\n

    Save the changes and preview the form to make sure that it looks picture perfect.<\/p>\n

    \"Post <\/div>\n

    You\u2019ve finished configuring your form\u2019s layout now. It\u2019s now time to move on to its settings.<\/p>\n

    Step 3: Configuring Form Appearance and Behavior Settings<\/h2>\n

    Forminator also lets you edit and configure your form\u2019s appearance to the smallest details.<\/p>\n

    Under the Appearance <\/em>settings, you can set various parameters such as the form\u2019s style, color, fonts, paddings, border, and pagination styles if any. Additionally, you can also add any custom CSS styles here for advanced customization.<\/p>\n

    \"Post <\/div>\n
    \"Post <\/div>\n

    Likewise, the Behavior <\/em>settings allow you to set what happens after the form is submitted. You have options to hide the form, display a custom message, or redirect your users to a different page.<\/p>\n

    \"Post <\/div>\n

    For this basic contact form, we can leave the default Appearance<\/em> and Behavior<\/em> settings as is.<\/p>\n

    Step 4: Setting Email Notification Settings<\/h2>\n

    Forminator also lets you configure and send automated emails to users who filled out the form and\/or to you (the admin). Both these emails can be fully customized with a Subject, Body text, etc.<\/p>\n

    You can even include the form fields data in these emails with handy shortcodes.<\/p>\n

    Through the advance email delivery settings, you can configure the email sender\u2019s name and address, the reply address, and any CC\/BCC addresses.<\/p>\n

    \"Post <\/div>\n

    Once you\u2019re finished with the Email Notifications<\/em> settings, it\u2019s time to hit the blue Publish<\/em> button on the top right.<\/p>\n

    \"Post <\/div>\n

    You\u2019ll be presented with a popup containing the new form\u2019s shortcode. You can copy this to embed the form in a widget, a template, or a page (if you\u2019re using the classic WordPress editor). Else, you can just ignore this now.<\/p>\n

    \"Post <\/div>\n

    Congrats, you just created your contact form.<\/p>\n

    Step 5: Adding the Form to Your Site<\/h2>\n

    It\u2019s now time to add the contact form you just created to your website. A contact page is the most appropriate place to add this form.<\/p>\n

    So, let\u2019s head over to our contact page\u2019s editor, click the Add Block <\/em>button and insert the Form<\/em> block from the list. Once inserted, just select a form from the dropdown list and it\u2019ll be auto-inserted for you.<\/p>\n

    \"Post <\/div>\n

    Once finished, Update<\/em> or Publish<\/em> the page. Head over to your contact page to confirm that it looks and behaves properly.<\/p>\n

    And that\u2019s it! You now know how to build your own simple contact form in WordPress.<\/p>\n

    You can build on top of this and take your form to the next level. Forminator is completely expandable, letting you extend your form\u2019s features as you like.<\/p>\n

    Viewing Submissions and Adding Third-Party Integrations<\/h2>\n

    Forminator stores all the form submissions in an easy-to-access database. Here, you can view\/manage\/export all submissions you\u2019ve received.<\/p>\n

    \"Post <\/div>\n

    In case you want to connect your form with third-party applications, Forminator also supports integrations with your favorite apps like MailChimp, Zapier, Trello, AWeber, Slack, ActiveCampaign, Google Sheets, and Campaign Monitor.<\/p>\n

    If you want to learn more about how integrations work, the Forminator docs<\/a> are a great place to start.<\/p>\n

    Extra Credits: Other Considerations<\/h2>\n

    And that\u2019s not all Forminator does. You can set reCAPTCHA to reduce spam entries, make your contact form GDPR compliant<\/a>, redesign your form\u2019s layout and style to the minutest details, and much much more!<\/p>\n

    Want even more? Forminator\u2019s Pro version<\/a> is packed full of extra features that\u2019ll impress you even greater. And don\u2019t forget to view our roadmap<\/a> to know the awesome updates we\u2019ve lined up for it in the near future.<\/p>\n

    Easy Powerful Forms for All<\/h2>\n

    We created Forminator with a single goal in mind: to be the easiest yet most feature-rich form plugin for WordPress. Whether you want to create a simple contact form or a complex order form with payment collection<\/a>, Forminator can handle them all with no sweat.<\/p>\n

    With Forminator, you can start building forms in minutes. No coding knowledge required whatsoever!<\/p>\n

    So, what are you waiting for? New opportunities await. Get started!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Having a contact form on your site is a must. Learn why that’s the case and how to add one to your site using code or a plugin right here. <\/p>\n","protected":false},"author":761786,"featured_media":177422,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4,263,11260],"tags":[9974,390,10507,9976],"tutorials_categories":[],"class_list":["post-140773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-tutorials","category-wpmu-dev-products","tag-wordpress","tag-code","tag-forms","tag-plugins-3"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/140773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/761786"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=140773"}],"version-history":[{"count":32,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/140773\/revisions"}],"predecessor-version":[{"id":224283,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/140773\/revisions\/224283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/177422"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=140773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=140773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=140773"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=140773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}