How To Build Your Own WordPress Contact Form in 5 Minutes for Free

How To Build Your Own WordPress Contact Form in 5 Minutes for Free

Every website NEEDS a contact form. Whether you’re selling products or services, or you’re running an informational blog, your website needs to have an easy way for anyone to contact you. That’s where a contact form comes in handy!

In this post, you’ll 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.

We’ll be doing this using Forminator, the easiest form maker plugin for WordPress.

Prefer a video instead? We’ve got you covered.

Now, before we get started…

Why Have a Contact Form At All?

  1. They can act as an easy first point of contact between you and your clients/readers.
  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.
  3. They help reduce spam, since your email address is not exposed publicly. It blocks spammers from harvesting your email address through bots.
  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’s consistent across all the entries received.
  5. They’re the best and most cost effective way of generating leads.

“74% 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.”
HubSpot Report

Convincing enough? Now let’s move on to the more practical stuff!

Step 1: Installing Forminator

First, let’s install Forminator by going to WordPress Dashboard > Plugins > Add New Plugins. Search for Forminator here, click the Install Now button and wait for it to finish. Once done, press the Activate button.

Note: If you prefer manual to automatic, you can also download Forminator directly from the WordPress repo and upload it to your site.

WPMU DEV members can also install Forminator Pro quickly through their WPMU DEV dashboard.

Step 2: Creating Your Contact Form

Now that we have Forminator installed and activated, it’s time to create your contact form.

To do that, go to Forminator > Forms and press the blue Create button. Alternately, you can also do this directly via Forminator’s dashboard.

Once you click the Create button, a popup will appear wherein you must enter your new form’s name. Keep it memorable so that you can recall it later. Don’t fret, you can change the form name later if needed.

After entering your form’s name, hit the blue Create button again.

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

The First Name and Email Address fields are marked as required by default. This is highlighted by a red asterisk symbol (*) beside them.

You can set whether an input field is Required or Optional. Let’s set the Message field as Required so that the form doesn’t submit if it’s left blank by the user.

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

Save the changes and preview the form to make sure that it looks picture perfect.

You’ve finished configuring your form’s layout now. It’s now time to move on to its settings.

Step 3: Configuring Form Appearance and Behavior Settings

Forminator also lets you edit and configure your form’s appearance to the smallest details.

Under the Appearance settings, you can set various parameters such as the form’s style, color, fonts, paddings, border, and pagination styles if any. Additionally, you can also add any custom CSS styles here for advanced customization.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Likewise, the Behavior 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.

For this basic contact form, we can leave the default Appearance and Behavior settings as is.

Step 4: Setting Email Notification Settings

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.

You can even include the form fields data in these emails with handy shortcodes.

Through the advance email delivery settings, you can configure the email sender’s name and address, the reply address, and any CC/BCC addresses.

Once you’re finished with the Email Notifications settings, it’s time to hit the blue Publish button on the top right.

You’ll be presented with a popup containing the new form’s shortcode. You can copy this to embed the form in a widget, a template, or a page (if you’re using the classic WordPress editor). Else, you can just ignore this now.

Congrats, you just created your contact form.

Step 5: Adding the Form to Your Site

It’s 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.

So, let’s head over to our contact page’s editor, click the Add Block button and insert the Form block from the list. Once inserted, just select a form from the dropdown list and it’ll be auto-inserted for you.

Once finished, Update or Publish the page. Head over to your contact page to confirm that it looks and behaves properly.

And that’s it! You now know how to build your own simple contact form in WordPress.

You can build on top of this and take your form to the next level. Forminator is completely expandable, letting you extend your form’s features as you like.

Viewing Submissions and Adding Third-Party Integrations

Forminator stores all the form submissions in an easy-to-access database. Here, you can view/manage/export all submissions you’ve received.

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.

If you want to learn more about how integrations work, the Forminator docs are a great place to start.

Extra Credits: Other Considerations

And that’s not all Forminator does. You can set reCAPTCHA to reduce spam entries, make your contact form GDPR compliant, redesign your form’s layout and style to the minutest details, and much much more!

Want even more? Forminator’s Pro version is packed full of extra features that’ll impress you even greater. And don’t forget to view our roadmap to know the awesome updates we’ve lined up for it in the near future.

Easy Powerful Forms for All

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, Forminator can handle them all with no sweat.

With Forminator, you can start building forms in minutes. No coding knowledge required whatsoever!

So, what are you waiting for? New opportunities await. Get started!

Tried Forminator already? Do you have any further questions on how to add a contact form to your WordPress site? Please let us know in the comments below. We’ll be happy to help!

Tags:

Salman Ravoof Salman was formerly a Technical Editor at WPMU DEV. He's a self-taught web developer, writer, creator, and a massive admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter