DEV Community

Lana Miro
Lana Miro

Posted on • Originally published at lanamiro.Medium on

How to Build Free WordPress Contact Us Form with JetFormBuilder? (Step-by-step)

To create a free WordPress contact form, you definitely can go with Contact Form 7, but I want more customization, so I’ll proceed with the JetFormBuilder plugin.

💡Before creating the form, we need to set up a custom post type to store form responses. So, don’t hesitate to follow the tutorial to set everything up.

Table of Contents:

#1 Download JetFormBuilder free form plugin

#2 Create New WordPress Contact Us Form

#3 Create the needed form fields

#4 Configure post submit actions

#5 Adding WordPress Contact Us form to the page

#6 What’s next? Form styling

#1 Download JetFormBuilder Free Form Plugin

Firstly, we need to download & activate JetFormBuilder free form plugin. You can download directly from jetformbuilder.com, wordpress.org, or search for the plugin in your plugins dashboard.

I’ve already downloaded and activated JetFormBuilder using the official website.

And now we can start creating my Contact form.

#2 Create New WordPress Contact Us Form

Create New WordPress Contact Us Form

To start with, go to JetFormBuilder -> Add New tab. Name your form as you wish:

name wp contact form

#3 Create the Needed Form Fields

To simplify the process, I’ll use the Contact us form pattern. For this, press “plus” icons, go to Patterns, and choose JetForm:

choose wordpress form pattern

Then pick the needed form pattern (in my case, the Contact Us Form). After selecting the form pattern, it adds the form to your editing area:

edit wordpress contact form

Now I need to delete unnecessary fields and duplicated Submit button (just select the block and press delete block). After this, I want to add one more option for the preferred method of communication (messenger).

Choose the needed block, press Manage items , add the item, and update:

customize wordpress contact form

I also want to edit the Submit button text, and I’m done with creating my form fields.

#4 Configure Post Submit Actions

I want this contact form to send responses to my custom post type , so I chose the Insert/Update post submit action:

Configure post submit actions

#5 Adding WordPress Contact Us Form to the Page

When the form is ready, press Publish button and go to the page where you want to add the form. In my case, it’s the Contact Me page.

To add the form to the Gutenberg editor, just choose the JetForm block, and select your form:

Adding WordPress Contact Us form to the page

I’m using Elementor, so I’ll add my form (created in JetFormBuilder) to Elementor with the JetForm widget:

JetForm widget

Drag and drop the JetForm widget to the page, and choose the Contact me form:

choose contact form in jetform widget

Update or publish the page, and your form is ready.

publish the wp form to the page

#6 What’s Next? Form Styling

Next, let’s have some fun and style our WordPress form via free JetStyleManager for Gutenberg:

style wordpress form in gutenberg

or with Elementor page builder (style tab):

add jetform widget to elementor page builder

I’ve made some general styling (change button style, checkboxes, and messages):

wordpress contact form styling

Conclusion

That’s it, our form is ready. I have some fun creating the WordPress contact form and hope this tutorial will help you make yours.

Don’t hesitate to leave comments below.👇

Discussion (0)