Category: How to start?

This settings section allows you to define some general layout and appearance features. They are set for the whole form, which means they will be valid for all the fields you add to the form.

Settings

It defines how the field bar and the field label correspond to each other.

• Column – the label is placed over the field bar;
• Row – the label is placed in one row with the bar, to the left.

Required Mark

The fields with the “required” mark are the ones that the user can’t leave empty. They won’t be able to submit the form without filling in those fields. If you want to make the field required, turn on the Is Required toggle in the top options panel. In that case, you will be able to set the appearance of the “required” mark in the Required Mark bar.

Fields Label HTML Tag

The <label> tag is used to specify a label for an <input> element of the form. It adds a label to a form control such as text, password, email, text area, etc.

Fields Label HTML Tag can be set to DIV or LABEL. These are field name wrappers, and <label> can provide focus on the Text, Number, Textarea fields, and the other default form elements. When the “Default” option is selected, Fields Label HTML Tag will be set to DIV.

Submit Type

In this drop-down menu, you can choose how the page will behave after the user hits the “Submit” button.

• Page Reload – the page will be reloaded;
• AJAX – the page won’t be reloaded because the data was transferred without interrupting its work.

Enable form pages progress

This toggle can be useful if you divide the form into several parts using the Form Break Field. In that case, if you enable this toggle, the form progress bar will be added above. It will show the user the part of the form they are currently on. Here’s what it will look like by default on the front end:

Enable Form Safety

This option is used when there are form caching or conflict issues. It protects the form with a WordPress nonce. Toggle this option off if the form page’s caching can’t be disabled.

JetFormBuilder plugin adds a separate menu tab to your website’s dashboard – JetForms. To create a new form, login to the WordPress dashboard and go to JetForms > Add New.

You will be redirected to the blank editing window with the default form fields – Hidden, Text, and Submit Fields. Just like in any other Gutenberg editing window, there is a bar for the form’s title at the top, and all the settings are placed in the right-side column.

Fields

You can add any blocks that are available to you. To create a layout with several columns, you can add a Column block. To add a new field, simply click on the “Add Block” button that is located on the page under the default blocks and select the necessary field. Or, you can open the blocks menu by hitting the “Add Block” button that is placed in the left upper corner of the editing page. All the form field blocks are in the Jet Form Fields section.

Settings

Besides the default Status & Visibility menu tab, every form of the JetFormBuilder plugin has the following settings sections:

• Form Settings
• Captcha Settings
• Post-Submit Actions
• Preset Settings
• General Messages Settings

Method 1. From the Plugins dashboard tab

• Open your WordPress dashboard and go to Plugins > Add New;
• In the search bar in the right upper corner of the page, type in “JetFormBuilder”;
• Click the “Install Now” button on the plugin’s tile;
• When the installation is over, press the “Activate” button.

Method 2. Download to PC and Upload to the website

• Download the plugin to your PC;
• Login to your website’s dashboard and go to Plugins > Add New;
• Click the “Upload Plugin” button in the left upper corner of the window;
• Choose the plugin’s file from the PC. Be aware that it has to be in .zip format;
• Hit the “Install Now” button;
• When the installation is over, press the “Activate Plugin” button.

Method 3. Manually on your PC

• Download the plugin to your PC;
• Open the folder where you store the WordPress files and go to wordpress > htdocs > wp-content > plugins;
• Open the downloaded plugin’s .zip archive;
• Drag and drop the jet-form-builder file from the archive to the “plugins” folder;
• Login to your website’s dashboard and go to the Plugins menu tab;
• Find the JetFormBuilder in the list and click the “Activate” button.

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.