Overview

By default, WordPress and Gutenberg Editor have no tools that allow you to create forms. JetFormBuilder is a free plugin that can fix that problem. Not only allows it to build the WordPress forms of any layout you need but also adds the functionality to change the form’s design and adapt it to the template of your website.

To create a form with the help of the JetFormBuilder plugin, you’ll have to:

  • Install the plugin;
  • Build the form layout;
  • Choose the fields and customize their look;
  • Add the form to the page;
  • And – finally – define the style settings of the Form block.

Let’s dive deeper into each of the steps.

Installation

JetFormBuilder plugin is completely free, and you can easily download and install it on your computer. It is available on the WordPress.org website, therefore, you can download it from that page or from our website.

We have a detailed tutorial that will help you go through the installation process, so check it if you need a hint.

Creating a form

According to its purpose, there are different types of forms. For example, there are contact or order forms, as well as the forms for booking or appointment. All of them can have different layouts, various numbers of columns, and specific fields. The JetFormBuilder plugin gives you the vast toolset to create any type of form you need.

In JetFormBuilder, you have to create a form first and then add it to the page as one piece. This will allow you to use the once-created form on different pages. Check the form creation guide if you need some help.

Like the puzzle that is pieced together of little parts, the form is built of fields. The list of available options is big enough to satisfy the most refined tastes. All the fields are listed in the Form Fields section, so you can check there what they are meant for and what settings you can use it for.

When you set the form, you will also have to define the Post-Submit Actions. Actually, there you choose what the form will do after the user fills it and clicks the “Submit” button. It can save the data as an item of a Custom Post Type, send the confirmation emails to the address the user left in the form, add a new user, etc. Check out the list of Post-Submit Actions to know what the form is capable of.

Adding the form to the page

It is as easy as adding any of the blocks to the WordPress page. You just have to find the Form block and click on it. There is a detailed overview of the Form block settings, so you will have a document to take a peek at. The process itself is quite easy but if you meet any issues, go through the form addition guide to overcome them.

Creating the form’s design

Gutenberg Editor doesn’t provide the users with any means of styling the blocks. After creating the page or post, it is always styled according to the design settings of the website’s template. However, JetFormBuilder blocks can be customized if you have also downloaded and installed the JetStyleManager plugin. 

That extension adds a “Block Style” button to the upper right corner of the editing window. Clicking on that button opens the style menu. Features listed in that menu allow you to change the look of each of the form’s fields, as well as the entire form. For more details, check out the Style settings guide.

Receiving Form Records

You can access the submitted forms right from the JetFormBuilder dashboard in the Form Records tab. There you will find all form submissions carried out through your website. 

When you open an entry, there will be a Form Record page displaying Form Fields with the values submitted by the user, as well as the field types. However, to make the form values be stored, you’ll need to set a Store Form Record action. 

This action holds complete information regarding the forms submitted by a user. It will also include the data entered into the form fields, executed post-submit actions, and errors.

If you have any questions after reading the documentation, please contact our tech support team.

Related Docs