How to Build Free WordPress Contact Us Form with JetFormBuilder? (Step-by-step)
Tags: wordpress, contactform, wordpressform
Published: 2022-01-21 14:30:17

---
title: How to Build Free WordPress Contact Us Form with JetFormBuilder? (Step-by-step)
published: true 
date: 2022-01-18 07:33:11 UTC
tags: wordpress,contactform, wordpressform
canonical_url: https://lanamiro.medium.com/how-to-build-free-wordpress-contact-us-form-with-jetformbuilder-step-by-step-bf72ab6f07e2
---

To create a free WordPress contact form, you definitely can go with [Contact Form 7](https://wordpress.org/plugins/contact-form-7/), but I want more customization, so I’ll proceed with the [JetFormBuilder plugin](https://jetformbuilder.com/).

💡Before creating the form, we need to [**_set up a custom post type_**](https://lanamiro.medium.com/how-to-display-wordpress-form-submission-with-jetformbuilder-ce7ec1fe1e7d) 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](#3b1e)

[#2 Create New WordPress Contact Us Form](#f558)

[#3 Create the needed form fields](#1be5)

[#4 Configure post submit actions](#8afe)

[#5 Adding WordPress Contact Us form to the page](#c7b3)

[#6 What’s next? Form styling](#d1eb)

### #1 Download JetFormBuilder Free Form Plugin

Firstly, we need to download & activate JetFormBuilder free form plugin. You can download directly from [jetformbuilder.com](https://jetformbuilder.com/), [wordpress.org](https://wordpress.org/plugins/jetformbuilder/), 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](https://cdn-images-1.medium.com/max/1024/1*4GE0Y2N0b325Z32Cmp-GJQ.png)

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

![name wp contact form](https://cdn-images-1.medium.com/max/1024/1*rLATVZ-cnWLy7suW1l818A.png)

### #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](https://cdn-images-1.medium.com/max/370/1*4WNV8fV4qm2obvUNQmqPkg.png)

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](https://cdn-images-1.medium.com/max/1024/1*td4wqDhUGHwSSoUeffdKzw.png)

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](https://cdn-images-1.medium.com/max/1024/1*_HYRnVtFMMHOSPZX5ukmIw.png)

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](https://cdn-images-1.medium.com/max/286/1*SR6nYF-O54vcV3HxaCGHqg.png)

### #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](https://cdn-images-1.medium.com/max/1024/1*QvZ2ZOpg9JEWvZMH01Uqvw.png)

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

![JetForm widget](https://cdn-images-1.medium.com/max/1024/1*byTOEb4DKYP3D024gfMWyA.png)

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

![choose contact form in jetform widget](https://cdn-images-1.medium.com/max/1024/1*OPEIKqV7ih946l4rUi4XNA.png)

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

![publish the wp form to the page](https://cdn-images-1.medium.com/max/1024/1*LkmFbD6Jp06M8KAzO-O7bg.png)

### #6 What’s Next? Form Styling

Next, let’s have some fun and style our WordPress form via free [JetStyleManager for Gutenberg](https://crocoblock.com/plugins/jetstylemanager/):

![style wordpress form in gutenberg](https://cdn-images-1.medium.com/max/285/1*hgRnzFyVEBlWmbcpS6VrRg.png)

or with Elementor page builder (style tab):

![add jetform widget to elementor page builder](https://cdn-images-1.medium.com/max/1024/1*VKBDeyFuuWkq9GA7vgGs7w.png)

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

![wordpress contact form styling](https://cdn-images-1.medium.com/max/1024/1*oZ7sLGh0kMtWeQjJhdPyRA.png)

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