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

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

#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:

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:

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:

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:

#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:

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

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

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

#6 What’s Next? Form Styling

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

or with Elementor page builder (style tab):

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

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.👇