The JetFormBuilder plugin provides the JetForm block for Block Editor, JetForm widget for Elementor, and JetForm element for Bricks Builder to help you display a ready form on the front end. Let’s take a closer look at their settings. 

JetForm Block in Block Editor

The Form Settings tab of the JetForm block consists of the following options:

jetform block settings
  • FIELDS LAYOUT — defines the positioning of the input field and its label. The layout can be set to the default “Column” or the “Row” option. In the first case, the label will be displayed over the input, while in the second one, they will be in the same row;
  • REQUIRED MARK — sets a symbol that will mark mandatory fields. The field can be left empty to mark required fields with an asterisk symbol;
  • FIELDS LABEL HTML TAG — one can select between “DIV” and “LABEL” HTML tags for the representation of the field label. The default tag is “LABEL”;
  • SUBMIT TYPE — defines how to process the Post-Submit Actions after the Action Button (formerly Submit Field) is pressed. If the “Page Reload” option is selected, the page will be reloaded after form submission; if “AJAX” is set, the page won’t be reloaded, and the post-submit message will appear immediately;
  • Enable form pages progress — this toggle can be enabled to display a progress bar with a step indicator at the top of the form. It is recommended to enable form page progress if the form is divided into several steps with the Form Break Field.

The Advanced tab presents the default WordPress settings:

advanced settings of the jetform block of jetformbuilder
  • BLOCK NAME — sets the block name;
  • HTML ANCHOR — allows a text string without spaces. An anchor makes it possible to link a specific section where the current block is located, so when the users follow the URL, the page is scrolled down or up to this block;
  • ADDITIONAL CSS CLASS(ES) — here, one can input one or several CSS classes to target the block easily with custom code.

The “Form Block Style Settings” guide explains how to style JetFormBuilder blocks with the help of the JetStyleManager plugin.

JetForm Widget in Elementor

The widget presents a Form Settings tab with a list of settings:

jetform widget settings in elementor
  • Choose Form — a drown-down list of form titles. Here, one should select the form to display;
  • Fields Layout — defines the positioning of the input field and its label. One can opt for the “Column” layout, the default setting, or choose the “Row” layout. In the first case, the label will appear over the input field, while in the second, they will align within the same row;
  • Required Mark — sets the symbol to indicate mandatory fields. By default, required fields are marked with an asterisk symbol;
  • Fields label HTML tag — one can select between “DIV” and “LABEL” HTML tags to represent the field label. The default tag is “LABEL;”
  • Submit Type — the “Page Reload” option makes the page reload after form submission, and the “AJAX” option prevents page reloading;
  • Enable form pages progress — shows a progress bar featuring a step indicator at the top of the form. Enabling form page progress is appropriate if the form is segmented into multiple steps using the Form Break Field.

JetForm Element in Bricks Builder

The FORM SETTINGS toggle unfolds the following settings:

jetform element settings in bricks builder
  • Choose Form — here, one should select the title of the form, which should be displayed;
  • Fields Layout — defines how the input field and its label will be positioned. The “Column” layout is the default option, which makes the field label display over the input field. The “Row” option aligns them within the same row;
  • Required Mark — in this field, one can specify a symbol to mark the required fields in the form. By default, required fields are marked with an asterisk symbol;
  • Fields label HTML tag — the HTML tag, which will represent the field label — “DIV” or “LABEL.” The default tag is “LABEL”;
  • Submit Type — defines the behavior of the form after the Action Button (formerly Submit Field) is clicked. The “Page Reload” option reloads the page after form submission, and the “AJAX” option prevents page reloading;
  • Enable form pages progress — shows a progress bar with a step indicator at the top of the form. Enabling form page progress is recommended for multi-step forms that use the Form Break Field.

That’s all about the JetForm settings available with the JetFormBuilder plugin for your WordPress website.

WordPress form block style settings

If you have installed the free JetStyleManager plugin, you will see the WordPress Block Style button in the top right corner of the editing window. Every field of the WordPress form can be styled separately during the process of form creation. However, you can also define some general design settings. Be aware that the settings you choose separately for the field have a higher priority than the general design settings.

The Form Row, Label, Required Mark, and Description sections contain styling features that will change the general look of the form.

The appearance of the Form Break Field can’t be set during the form creation process, you can define it only here, in the Form style settings tab. The Form Break Row, Form Break Next Button, Form Break Prev Button, Form Break Disabled Message sections are responsible for that.

The form progress bar can also be styled only in the WordPress Form style settings tab, in the Form Progress – Wrapper and Form Progress – Pages sections.

You can style the success message in the Message Success section, whilst the error message can be styled in the Message Error section.

Here are the WordPress form styling settings you can meet there:

The JetFormBuilder plugin offers wide flexibility in displaying a form on the front end. After a form is created in WordPress Dashboard > JetFormBuilder > Forms, it can be shown anywhere on the website. 

To display a form in Elementor, Block Editor, or Bricks Builder, a JetForm widget, block, or element can be used, respectively. Outputting a form in other WordPress page builders is possible with a shortcode. Below, we will go into this process in detail. 

Adding the JetForm Block in Block Editor

If the page is built in Block Editor, a form can be displayed using the JetForm block. 

To add a new block, edit the needed page in Block Editor or create a new one. Click the blue plus-shaped icon in the left corner of the top toolbar or the black plus-shaped icon to the right of an empty block to open the Block Inserter. Search for “JetForm.”

find the jetform block in the block inserter

Once the JetForm block is added to the canvas, proceed to configure the block settings. Select the needed form in the CHOOSE FORM drop-down menu in the Form Settings section. Then, configure the rest of the settings according to the “JetForm Overview.” 

choose the form in the jetform block settings

To style the appearance of the form with the help of the JetStyleManager plugin, follow the “Form Block Style Settings” guide.

Once finished, click the “Publish” button to save the changes.

Adding the JetForm Widget in Elementor

To add the JetFormBuilder form in the Elementor Page Builder, edit the needed page or template with Elementor or create a new one. Find the JetForm widget. Drag and drop the widget onto the canvas.

find the jetform widget in elementor

Then, select the needed form in the Choose Form drop-down menu. Configure the rest of the settings by following the “JetForm Overview.”

choose the form in the jetform widget settings

After configuring the Form Settings, proceed to the Style tab to customize the form appearance.

Once finished, don’t forget to save the changes by hitting the “Update” button.

Adding the JetForm Element in Bricks Builder

To display a form in Bricks Builder, open the needed page or template in Bricks or create a new one. Search for the JetForm element. Drag and drop it on the canvas.

find the jetform element in the bricks builder

Unfold the FORM SETTINGS tab to configure the JetForm settings. Start by selecting the needed form in the Choose Form drop-down menu.

choose the form in the jetform element settings

Set up the rest of the settings by following the “JetForm Overview.”

After configuring this part, go to the STYLE tab to customize the form.

Displaying a Form in Any Page Builder Using a Shortcode

It is possible to add a JetFormBuilder form in any page builder, including the ones mentioned above, using a shortcode. This JetFormBuilder feature is available with Divi, Oxygen, Blocksy, and other page builders. 

To locate the form shortcode, go to WordPress Dashboard > JetFormBuilder > Forms and find the needed form. The shortcode is in front of the form name.

finding the form shortcode in the jetformbuilder tab of wordpress menu

Follow our video tutorial to learn how to place a JetFormBuilder form shortcode in the page builders mentioned above.

That’s all about adding the JetForm block/widget/element to the WordPress page with the help of the JetFormBuilder plugin.