Category: Form Fields

The Time Field allows the user to enter the desired time. It is possible to type the time manually or choose it from the drop-down menu.

An input mask is added automatically and displays to the user how to fill in the field. The time the user chooses in the timer is immediately added to the field.

Settings

The Settings section lets users configure key options for the Time Field.

General

The General tab settings allow users to customize the Time Field by configuring the following set of fields:

• FIELD LABEL — a field that sets the visible name of the input on the form;
• FORM FIELD NAME — a field that defines the technical name used in the form data;
• FIELD DESCRIPTION — a field that provides extra guidance or context under the input field.

Value

The Value tab settings allow one to define the default time, set time limits, and apply dynamic or conditional values using macros and filters, or attributes.

• DEFAULT VALUE — a field that sets a pre-filled time that is shown when the form loads. This field accepts “hh:mm” format, macros, or filters;
• STARTING FROM TIME — a field that defines the earliest time a user can select. This field supports static times or dynamic values via macros/filters;
• LIMIT TIME TO — a field that sets the latest selectable time in the field. This field also accepts macros or filters for flexible control.

Time Field macros allow one to retrieve values from existing fields or predefined variables that can be used for form operations:

• %CT::CurrentDate% — a macro that inserts the current date in “Y-m-d” format;
• %CT::Min_In_Sec% — a macro that returns the number of seconds in one minute (60);
• %CT::Hour_In_Sec% — a macro that returns the number of seconds in one hour (3600);
• %CT::Day_In_Sec% — a macro that returns the number of seconds in one day (86400);
• %CT::Month_In_Sec% — a macro that returns the number of seconds in 30 days (2592000);
• %CT::Year_In_Sec% — a macro that returns the number of seconds in 365 days (31536000).

Check this article for more information on the Time Field macros.

Time Field filters allow one to modify values (like converting timestamps, formatting dates, or performing calculations), which can be used together to manipulate data within the form fields:

• ifEmpty — a filter that replaces the value with a fallback if it’s empty;
• length — a filter that returns the length of the input value;
• toDate — a filter that converts a timestamp into a date string;
• toDateTime — a filter that converts a timestamp into a date and time string;
• toTime — a filter that converts a timestamp into a time string;
• addMin — a filter that adds minutes to a timestamp or date value.

Check this article to discover more Time Field filters.

Validation and Advanced

For the Validation tab settings, users can select validation types (“Inherit,” “Default,” or “Advanced”) to determine how time inputs are validated in the Time Field.

For the Advanced tab settings, users can configure additional options, including:

• Add Prev Page Button — a toggle that enables the use of the “Previous” button in multi-step forms for easier navigation;
• FIELD VISIBILITY — a field that sets visibility conditions. By default, the field is shown to all users; 
• CSS CLASS NAMES — a field for adding custom CSS classes to style the Time Field as needed.

Style Settings

If one has a JetStyleManager plugin installed and activated, the “Block Style” button will appear in the top right corner of the editing window.

Here are the styling settings one can find there:

• Alignment;
• Border;
• Color;
• Margin;
• Padding;
• Typography.

That’s all about the Time Field available with the JetFormBuilder plugin for WordPress forms.

• Create the CPT and Taxonomies
• Create a Form
  • Insert the form’s fields
  • Configure the Post Submit Action settings
• Place the Form on a Page
• Test the Flow

Create the CPT and Taxonomies

Since we intend to get the ads of a specific design, we create the CPT, name it “Vehicle Ads,” and add the following meta fields: “User Name” Text field, “Email” Text field, “Model” Text field, “Engine Type” Checkbox field, “Mileage” Number field, “Engine Capacity” Number field, and “Price” Number field to collect the corresponding data.

NOTE

To add the featured image to CPT posts, select the needed options in the Supports drop-down list in the Advanced Settings.

Read the How to Create Custom Post Types in WordPress tutorial to learn how to organize the site’s content.
After that, in order for the ads to be inserted, we create the “Vehicle Type” taxonomy for the previously built “Vehicle Ads” CPT.

NOTE

When creating a taxonomy, the Hierarchical toggle in the Advanced Settings should be activated.

The taxonomy includes the “Cars,” “Motorcycles,” “Buses and Trucks,” and “Special Machinery” categories with child subcategories. For example, the “Cars” Category includes the subcategories “Audi,” “BMW,” “Toyota,” etc., and the “Motorcycles” Category includes the subcategories “Kawasaki,” “Ducatti,” etc.

Read the WordPress Taxonomy Explained: Categories, Tags, Custom Taxonomies article to learn the differences between these groups.

Create a Form

Insert the form’s fields

Navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to create a new form. The form will be opened in the Block editor, and the Welcome block, which allows the application of pre-created or AI-generated forms, will be displayed.

Learn how to build forms from the form creation tutorial.

In this case, we delete the Welcome block and type the form’s name (here, “Hierarchical Select Form”). After that, we divide the layout into two Columns and insert Text Fields to enter the user’s name and email, respectively.

NOTE

If you intend to allow users to update posts on the front end, add the Hidden Field.

After that, we add the Hierarchical Select Form Field and adjust the following settings. First, unroll the TAXONOMY TYPE drop-down list and select the needed taxonomy (the “Vehicle Type” taxonomy, in this case). Next, choose the “Term ID” option in the TERM VALUE FROM drop-down list and the “Hide all children levels until parents level selected” option in the ACCESS TO CHILD LEVELS drop-down list. After that, navigate to the block settings and enter the text in the FIELD LABEL field (“select the vehicle type and manufacturer” in this tutorial). The FORM FIELD NAME field will be filled out automatically (“select_the_vehicle_type_and_manufacturer”).

Second, press the “Edit Levels” button and complete the newly-appeared Edit Levels pop-up. Here, put the cursor in the NAME field, and it will be filled out using the default text (the “select_the_vehicle_type_and_manufacturer_level_0”, in this case). Then insert the text that will be displayed as the level’s LABEL and in the PLACEHOLDER (here, we type the same “Vehicle Type” and “Any…” texts, respectively). Next, scroll this pop-up down and press the “+Add new level” button. 

In the next step, press the “Edit Levels” button and complete the newly-appeared Edit Levels pop-up. Here, we add the following texts: “select_the_vehicle_type_and_manufacturer_level_1” in the NAME field, “Make” in the LABEL, and “Any…”  in the PLACEHOLDER field. After that, press the “Update” button in the Edit Levels pop-up.

In the last step, we divide the layout into two Columns and insert the block fields to fill out the needed fields of the created “Vehicle Ads” CPT: “Model” Text field, “Photo” Media field, “Engine Type” Checkbox field, “Mileage, km” Number field, “Engine Capacity, l” Number Field, and “Price” Number field to collect the corresponding data. Next, we add the Action Button block.

NOTE

To add the data inserted via the form’s Media field to the featured image in the CPT posts, set the “Any registered user” USER ACCESS, enable the Insert attachment toggle, and select the “Attachment ID” FIELD VALUE.

Configure the Post Submit Action settings

Navigate to the JetForm settings tab and open the Post Submit Actions tab. Since we deleted the Welcome block, the “Save Form Record” Post Submit Action was not set by default. We press the “+ New Action” button and add this action to collect and manage data via the JetFormBuilder dashboard.
Then, press “+Add New Action” and select the “Insert/Update Post” action in the newly-appeared Add new action pop-up. The Edit Insert/Update Post pop-up will then appear. First, in this pop-up, in the POST TYPE field, choose the post type for which posts will be created (the “Vehicle Ads” CPT in this case). Second, select the “Published” POST STATUS and head to the FIELDS MAP setting block.

Second, assign the form fields to the corresponding post field names. In this case, we select the “Post Meta” options and specify the CPT‘s meta fields in the pop-up fields.

After that, we select the “Post Term” option in the drop-down related to the parent taxonomy field and the needed taxonomy (the “Vehicle Type” taxonomy, in this case) in the newly-appeared drop-down list near the parent taxonomy (the “(select_the_vehicle_type_and_manufacturer) Vehicle Type” text). Next, select the same options for the child taxonomy: choose the “Post Term” option in the drop-down related to the taxonomy field (the “Vehicle Type” taxonomy, in this case) in the newly-appeared drop-down list near the parent taxonomy (the “(select_the_vehicle_type_and_manufacturer) Make” text).

Also, we set the data inserted in the form’s Model field as the “Post Title” and the Insert a photo form field as the “Post Thumbnail.” 

Once completed, click the “Update” button. To improve the form’s usability​​, you can add another Post Submit Action, for example, the “Send Email” or “Redirect to Page.”

NOTE

If you intend to allow users to update posts on the front end, configure the form’s Preset Settings.

Finally, publish the form.

Place the Form on a Page

Create a page or open a page/post you need in the editor you prefer (we use Elementor) and add the JetForm widget/block/element to it. Learn about its settings from the JetForm Overview. Select the built form in the Choose Form drop-down list.

Read the Displaying a JetFormBuilder Form in Any Page Builder tutorial to learn how to add the JetForm widget/block/element in Elementor, Block Editor, and the Bricks theme. Press the “Publish” button to save the page.

Test the Flow

Navigate to the front end and fill out the form. Since we selected the “Hide all children levels until parents level selected” option in the ACCESS TO CHILD LEVELS drop-down list of the Configure Hierarchical Select Form field settings, the drop-down list displaying the child taxonomy (the “Manufacturer” in this case) is not visible.

After selecting the needed option in the parent taxonomy drop-down list, the child taxonomy drop-down will be displayed. Add the required data and press the “SUBMIT” button.

After selecting the needed option in the parent taxonomy drop-down list, the child taxonomy drop-down will be displayed. Add the required data and press the “SUBMIT” button.

After that, the “Form submitted successfully.” notice will appear. In the next step, move to the WordPress Dashboard and observe if a post was created.

Finally, open the post and check if all data was added correctly.

That’s it. Now you know how to use the Hierarchical Select Form Field to insert Custom Post Type posts of the prespecified taxonomy (including a child taxonomy) using the JetFormBuilder plugin for WordPress.

• General Settings
• Usage Instructions Settings
• Saved Image Settings
• Canvas Settings
• Advanced Settings

The Signature Field can be added using the block inserter. It can be accessed by pushing the “+” button on the top toolbar. Here, the block can be found by typing the corresponding characters in the search bar.

Settings of the Signature Field are divided into the General, Usage Instructions, Saved Image Settings, Canvas Settings, and Advanced groups of settings.

General Settings

Among the General settings are the following fields:

• FIELD LABEL 一 a text field that is intended to insert the field label;
• FORM FIELD NAME 一 a text field that is used to insert an ID of this field. By default, this value is added from the FIELD LABEL value, but it can be changed if needed;
• FIELD DESCRIPTION 一 a non-required text field that is intended to insert a description displayed under the field;
• DEFAULT VALUE 一  a non-required text field that is meant to insert a default value of the field, select it from the metadata, or add it using an extra macro.

Usage Instructions Settings

Saved Image Settings

These settings are intended to configure images generated when submitting the form. Among the Saved Image Settings are the following fields:

• IMAGE FORMAT 一 a drop-down list that sets in what format to generate the final image: “PNG,” “PNG with Background,” “JPG,” “SVG,” or “SVG with background”;

NOTE

Since some email clients may block SVG content, we do not recommend using SVG files with the “Send Email” Post Submit action.

• STORAGE TYPE 一 a drop-down list that sets how to save the generated image: “File in a hashed folder without WP attachment,” “File in a hashed folder without WP attachment,” or “Data URL string.”

If the “File in a hashed folder without WP attachment” and “File in a hashed folder without WP attachment” options are selected, the Delete created file on form error toggle will be displayed under the STORAGE TYPE list. This toggle, if activated, saves only the forms submitted successfully and stores them in the WordPress Dashboard > JetFormBuilder > Form Records tab.

Canvas Settings

This tab is presented by the following fields:

• CANVAS WIDTH 一 a text field that allows inserting the canvas width in percents or pixels;
• CANVAS HEIGHT 一 a text field that allows inserting the canvas height in pixels;
• CANVAS BACKGROUND 一 a field that allows selecting the canvas background’s color instead of the default white;
• Pen Color 一 a field that allows selecting the pen’s color instead of the default black;
• CLEAR BUTTON LABEL 一 a text field that allows adding the text on the signature-clearing link instead of the “Clear” default.

Advanced Settings

These settings are:

• PLACEHOLDER 一 a text field that is intended to insert the placeholder’s name;
• Add Prev Page Button 一 a toggle that, if enabled, activates the PREV PAGE BUTTON LABEL text field;
• PREV PAGE BUTTON LABEL一 a text field that is intended to insert the text displayed on the “Prev Page” button;
• FIELD VISIBILITY一 a drop-down list that allows selecting who can observe the block: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
• CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

That’s it. Now you know how to manage the Signature Field settings of the Signature PRO add-on of JetFormBuilder for WordPress.

The Switcher Field block is a horizontal toggle form field for switching between two states of the same form. The Switcher Field block functionally can be replaced by the Checkbox, Radio, or Advanced Choices Field blocks. This block can be used in contact forms, registration forms, order forms, etc. (for example, while selecting the email or mobile method of communication, preferred services, and more).

• Field Settings
• Settings Tab
  • General settings
  • Value settings
  • Advanced settings
• Style Settings Tab
• JetStyleManager Style Settings

Field Settings

To add the Switcher Field block to a JetFormBuilder form, navigate to WordPress Dashboard > JetFormBuilder and open a new form or edit a previously built one.
Find the Switcher Field block and drag and drop it into the form.

The Switcher Field block has two settings tabs 一 Settings and Style.

Settings Tab

The Settings tab includes the General, Value, and Advanced settings.

General settings

The tab contains the following fields: FIELD LABEL, FORM FIELD NAME, and FIELD DESCRIPTION:

• the FIELD LABEL field allows typing the text to be displayed over the switcher;
• the FORM FIELD NAME field allows typing the form’s ID text;
• the FIELD DESCRIPTION field is for the text about the field or to enter a shortcode. 

Value settings

The Value settings include the DEFAULT VALUE, VALUE, and CALCULATED VALUE fields:

• the DEFAULT VALUE field allows typing or selecting the default value for the on/off switcher: If the default value is not empty or does not equal the string “false,” the switcher will be turned on. Pressing the “Dynamic Tag” icon allows users to select dynamic data (i.e., data from posts, user data, queries, option pages, or related terms). If the “Restrict access” toggle is enabled, it sets the default value from preset only for users allowed to edit this value; if disabled, it sets the default value from preset for all.

• the VALUE and CALCULATED VALUE fields allow typing/selecting data for the enabled switcher. Pressing the “Dynamic Tag” icon turns on the Edit Preset pop-up with the SOURCE drop-down menu to select data from posts, user’s data, queries, option pages, or related terms).

Advanced settings

The Advanced tab consists of two fields: the BLOCK NAME and CSS CLASS NAME fields intended to type the block name and a custom CSS class to style the block.

Style Settings Tab

The Style Settings tab manages the background colors of the Track (for the enabled and disabled switcher) and Thumb.

JetStyleManager Style Settings

In contrast to the default block Style settings, the JetStyleManager plugin allows customization of the block’s Alignment, Border, Color, Margin, Padding, and Typography.

Click the pencil icon in the top right corner of the page and apply the necessary settings to the block’s Content, Label, Required Mark, and Description.

That’s all about the Switcher Field’s settings from the JetFormBuilder plugin.

The Change Render State block is a form button that lets users toggle between different states of the same form. For example, the first render state can represent a form for registration, while the second render state can represent a login form. The user will be able to switch between these two states by toggling the “Change Render State” button.

• Field Settings
  • General settings
  • Change render state settings
  • Advanced settings
• Style Settings

Field Settings

To add the Change Render State block to a JetFormBuilder form, one needs to follow the WordPress Dashboard > JetFormBuilder path and press “Edit” under one of the existing forms or create a new form by pressing the “Add New” button in the top left corner.

One should find the Change Render State block and drop it in the needed place.

The current Change Render State button can be switched to one of the following transformation options:

• Action Button — a button to submit the form;
• Next Page — a button that leads the user to the next page in a multi-step form;
• Prev Page — a button that leads to the previous page in a multi-step form;
• Change Render State — the current state button.

General settings

This tab contains a single field called FIELD LABEL for inserting the text to be displayed on the button.

Change Render State settings

The SWITCH STATE drop-down menu in this tab provides options for changing the button’s state. The default option is “DEFAULT.STATE.”

Additional states can be manually added within the settings of the Conditional Block. When choosing the “Is render state” condition in the Conditional Block field, the plus-shaped button should be pressed to add a new custom state.

Advanced settings

The Advanced tab consists of the following fields:

• Add Prev Page Button — adds the functionality of the Prev Page button, which leads the user to the previous step in a multi-step form;
• CSS CLASS NAME — a custom class can be inserted in this field to style the block further with additional CSS code.

Style Settings

The Change Render State block can be styled with the help of the JetStyleManager plugin. Once the plugin is installed and activated, the brush-shaped icon appears in the top right corner. After clicking the icon, one will see a new section of style settings. 

Two of the styling tabs are the Submit Wrap and Action Button. Inside these tabs, one can customize the block’s Alignment, Border, Color, Margin, Padding, Typography, and more.

That’s all about the Change Render State field available with the JetFormBuilder plugin for WordPress websites.

The Prev Page block allows users to go back to the previous page of a multi-page form. As an attribute of multi-page forms, this block indicates the end of the form section and, together with the Page Break block, manages form navigation, thus contributing to the form’s usability by dividing the form into logical parts.

• Field Settings
  • General settings
  • Advanced settings
• JetFormBuilder Settings
• Style Settings
• Use Case

Field Settings

To add this block to a JetFormBuilder form, go to WordPress Dashboard > JetFormBuilder and press the “Add New” button.

After adding this block to the form, the “Submit” button appears, and the Block settings are available in the right side panel. The Action Button settings section allows switching between the following block variations by clicking the appropriate button:

• Action Button 一 the button to submit the form;
• Next Page 一 the button leading to the next page of the form;
• Prev Page 一 the current button;
• Change Render State 一 changes the render of the form.

The Prev Page block has the General and Advanced settings.

General settings

The General settings tab includes the FIELD LABEL field for customizing the text on the “Submit” button.

Advanced settings

The Advanced settings tab has the “Add Prev Page Button” toggle, which turns on the PREV PAGE BUTTON LABEL field to type its label and the CSS CLASS NAME field for customizing the button’s design with a CSS class.

JetFormBuilder Settings

Additionally, the Prev Page block allows applying global settings, particularly the automatic scrolling to the top of the form when switching between form pages. To enable this option, navigate to the JetFormBuilder > JetForm Settings > Options > Form Accessibility tab and activate the Scroll to the top on page change toggle.

Style Settings

To customize the “Prev Page” button, you can use the JetStyleManager plugin. Once the plugin is installed and activated, the brush-shaped icon appears in the top right corner. After clicking the icon, one will see a new section of style settings. 

Two of the styling tabs are the Submit Wrap and Action Button. Inside these tabs, one will find settings for styling the Alignment, Border, Color, Margin, Padding, Typography, and more block options.

The style settings are also available in the Elementor editor.

NOTE

Be aware that the Form Break Buttons tab are only for the Next Page and Prev Page blocks, not for the “Next” and “Prev” buttons. For example, to align the buttons, you need to use the Alignment from the Form Break Buttons tab.

Use Case

Users can place this block field at any place of the form, as the pre-built Application Form pattern shows.

NOTE

Users can apply any pre-made form patterns (i.e., Booking Form, Contact Us, Register Form, and more) for their forms. To add the form pattern, press the plus-shaped icon and click the Patterns > JetForm tab.

The Prev Page block works with the Form Page Break block, indicating the end of the page section.

After publishing the form and adding it to a page/post by the JetForm block/widget, one can check it on the front end.

When users are not on the first page of the form, they can go back to the previous page by clicking the Prev Page button.

That’s all about the Prev Page block settings.

The Next Page feature allows adding the form button, which separates the fields and leads to the following step of the form submission.

• Field Settings
  • General settings
  • Advanced settings
• JetFormBuilder Settings
• Style Settings
• Use Case

Field Settings

This field can be added to the JetFormBuilder form by following the WordPress Dashboard > JetFormBuilder > Add New path.

Once the block is added to the page, the settings are displayed.

Initially, there is a panel with the following transformation buttons:

• Action Button — button for the form submission;
• Next Page — current state of a button;
• Prev Page — button that leads to the previous page of the form;
• Change Render State — changes the render state of the entire form.

General settings

This tab consists of one field called Field Label. It represents the label displayed on the button.

Advanced settings

The Advanced tab consists of the following fields:

• Add Prev Page Button — a switcher that adds a “Prev Page” button to the form;
• CSS CLASS NAME — a field for CSS code to style the button.

JetFormBuilder Settings

The Next Page field settings can be adjusted in the WordPress Dashboard > JetFormBuilder > Settings > Options, in addition to those in the form.

Specifically, there are three toggles presented in the Form Accessibility section:

• Disable “Next” button — if this option is active, the “Next” button will not be clickable until all the required fields are completed;
• Scroll to the top on page change — once enabled, the form will automatically scroll when switching between the form pages;
• Automatic focus — a switcher that indicates the field that has been completed incorrectly and prevents a user from going to the following page or submitting the form without fixing the mistake.

Style Settings

The block can be additionally styled with the help of the JetStyleManager plugin. If it is installed and activated, the brush-shaped icon appears in the top corner of the screen.

Among the styling tabs are: Submit Wrap and Action Button. These tabs include such settings as Alignment, Border, Color, Margin, Padding, Typography, etc.

The style settings are also available in the Elementor editor.

Use Case

The Next Page field can be placed in the desired form to separate the form into parts. The ready-made Application Form pattern can serve as an example.

The Next Page field can be added after the fields to indicate the end of the form section.

Another essential part of this use case is the Form Page Break. It will serve as the end of the current part of the form.

Once the form is published and added to the desired page with the help of the JetForm block/widget, it can be saved and checked on the front end.

After going through the first part of the form (and filling in the mandatory fields, if there are any), the user can proceed to the following part by clicking the “Next Page” button.

That’s all about the Next Page field available with the JetFormBuilder plugin.

This tutorial will provide all information about settings in the JetFormBuilder’s form to update the Repeater field type.

• Check the Repeater Meta Field
• Add the Repeater Field in the Form
• Set Up a Preset in the Form
• Configure the Post Submit Action
• Check Results on the Front End

Check the Repeater Meta Field

Initially, check whether there is a filled-in “Repeater” meta field for some object which can be updated using the front-end form.

For example, we previously created a Meta Box for users, where a user can fill in information about education. Check how to apply Meta Box to users.

Then complete these fields, so the values can be updated later.

Add the Repeater Field in the Form

Now we can work on the form created using the JetFormBuilder plugin to update the user repeater field.

In the form, we added a Hidden Field with the “Current User ID” as a Field Value since the form will update the repeater field values of the current user.

Then add the Repeater Field itself.

By clicking on the plus icon inside of the Repeater Field, the fields can be inserted.

In the user’s “Repeater” meta field, the “Text” and “Date” fields are used. Therefore, we add the fields of these types to the form accordingly. These fields must also have the field names as written in the meta box.
For example, this “Text” field has the “_employee-education-institution” name in the Meta Box.

This is why we copied the meta field name and inserted it into the form field name of the “Text” field in the Repeater in the form. The same was done for other fields in the form.

All the fields are added with the field names as in the user Meta Box, and we can proceed with other settings.

Set Up a Preset in the Form

Now, we should Enable the preset in the Preset Settings of the form. The Preset allows loading of the existing values in the user Meta Box into the fields of the form, so a user can see which values are updated in the fields.

In the Preset Settings, a source should be selected as “User” because we update a user’s data.

The Get User ID From needs to be set to “Current user” so the form pulls the data of a currently logged-in user.

The user_id field is mapped to the “User ID” property.

As for the _education repeater form field, it is mapped to the “User Meta” and “_education” repeater meta field, so the meta data is pulled from there. The inner repeater meta fields do not need fields selected in the preset. Just presetting the repeater field is enough.

Configure the Post Submit Action

Lastly, we should configure the “Update User” post submit action.

To do so, go to the Post Submit Actions tab. Add an “Update User” action, and click the pencil icon to edit its settings.

In the user_id field, select the “User ID (will update this user)” option.

And map the _education field to the User Meta – “_education”.

This way, the values from the form fields will be added to the user meta fields.

Hit the “Update” button to save the action settings and update the form.

Check Results on the Front End

Check the result on the front end. We can see the form presets the data from the “Repeater” field of the current user successfully, and now we can edit this data.

Let us change the dates in the Education start/end “Date” fields and add the country name in the City, country field.

 After editing the fields, we can submit the form.

Check the User meta fields now. We can see the values have been updated in the fields that were edited via a front-end form. The form successfully updates the meta fields in the Repeater in the user Meta Box.

That is it; now you know how to update a JetEngine’s “Repeater” meta field values using the front-end form built with the JetFormBuilder plugin.

Advanced Choices Field block is a feature for more advanced selection options in the form, which can be used instead or additionally to the alternative Checkbox, Select, and Radio fields.

With this block, text, images, or other objects can turn into the object for selection. And now, this block is available for WordPress with the JetFormBuilder plugin.

• Block Layouts
  • Text
  • Images
  • Images with description
  • Images with controls
  • Custom
• Advanced Choices Field Block Settings
  • General
    • Layout
    • General
    • Value
  • Styles
• Advanced Choice Block Settings
  • General
    • Layout
    • General
  • Styles

The Advanced Choices Field block can be found in the Gutenberg block search or by typing the “/” right in the empty spot in the form.

Block Layouts

There are four default layouts available for selection: “Text,” “Images,” “Images with description,” and “Images with controls.” Besides the given layouts, the user can build a custom block by pressing the “Skip” button.

Text

Except for the general Advanced Choices Field block settings, the Paragraph blocks can be customized in every separate choice field.

Images

In this case, the Image block settings can be customized.

Images with description

Once this option is picked, there are both Paragraph and Image block settings are available for every choice box.

Images with controls

The “Images and Controls” layout provides adjusting options for the Image and Choice Control block.

Custom

If the “Skip” button is pressed, two empty options for completing appear. Inside them, different needed blocks can be added.

Advanced Choices Field Block Settings

Once the Advanced Choices Field block is added, a panel with the following toolbar controls appears above the block:

• Transformation button (this block can turn to Conditional Block, Columns, and Group);
• Elements for controlling the position of the block;
• Justification button. The block can be put left, center, or right. Or a space between items can be added;
• Button to make the field required;
• Button for name copying;
• “New Advanced Choice” button to create an additional choice box; 
• Automatic transition button that redirects to the next page when the values are changed;
• Other options.

There are two settings tabs to adjust the Advanced Choices Field block: General and Styles.

General

In this tab, the main customization options of the block are available.

Layout

In the Layout section of the Settings tab, there are the following settings:

• Justification — options to justify a block. It can be put left, center, or right. Additionally, the gap between blocks can be added with the help of the corresponding buttons. Mind that the last option is available only when horizontal Orientation is picked;
• Orientation — the view of the columns, which can be either horizontal (in a line) or vertical (stackable boxes);
• Allow to wrap to multiple lines — toggle that allows putting options in the next line if there is not enough space on the screen. For instance, on mobile devices.

General

The next section is called General:

• Field Label — label for the field that will be displayed in the form before options;
• Form Field Name — unique field name/ID that can be used for further work with the field on the WordPress back end. It should contain only lowercase Latin letters, numbers, and “-” or “_” characters with no spaces;
• Field Description — optional field for the field description. If completed, the description will be displayed under the field.

Value

The Value section includes several settings options:

• Allow multiple choices — a toggle that allows selecting several options in the field (basically, like a Checkbox Field). Otherwise, the field works as a Radio Field, meaning that only one option of the field can be picked.
• Default Value — a field where one can put the Value of one or more fields. If put, this exact value will be selected by default. For instance, “Book Name #1”. If several options are desired to be default, these can be separated by a comma and space.

• Add Dynamic Value — a button that allows setting value under certain conditions. Once clicked, the Edit Dynamic Value pop-up with additional customization options appears.

Styles

In the Styles tab of the settings, by default, the user can alter the Text Choice and Background Choice of the default, hover, and checked states of the choice boxes.

Except for the mentioned text and background settings, there is a three-dots button next to each section. 

By clicking, additional Tools, like Border and Radius of the field, can be added, default Text and Background can be removed, or the selected options can be reset by pressing the “Reset All” button.

Advanced Choice Block Settings

These are the settings of the one particular choice block. For example, in the “Text” layout, there are three boxes by default (but more can be added.) So, clicking on one of the boxes will open the Advanced Choice block settings.

A needed box can also be found in a Document Overview section.

Above the selected box, there is a toolbar with controls located:

• Button to switch to the Advanced Choices Field block;
• Inactive transformation button (the structure cannot be changed);
• Justification button; 
• Button to switch between “Default” and “Checked” states.

General

Layout

Initially, the general Layout settings can be adjusted. These are the same as in the Advanced Choices Field block.

General

In this section, there are two fields displayed:

• Value — value for an option. It will be displayed in the choice box;
• Value for Calculated Field — value that will be used in the Calculated Field if needed.

Styles

Except for the General Settings tab, there is also the one called Styles.

In the Color section, the Text and Background colors for an option can be selected.

The Dimensions section is initially empty. To add settings, the plus-shaped icon should be clicked.

Here, the Width line can be pressed to add its settings.

The “Fit” option is set by default. By picking this option, the option boxes will be displayed as standard, fit options.

The “Fill” Width stretches options to available space.

With the “Fixed” variant, a needed field width can be specified in the appeared field.

It is also possible to choose the desired unit in the selector next to the field: “px,” “%,” “em,” “rem,” “vw,” or “vh.”

That’s all about the Advanced Choices Field block settings available with the JetFormBuilder plugin for WordPress.

Custom templates are a feature to customize forms view. Use JetEngine to build a custom item template and set it for any Form you fancy. In this way, make the Radio and Checkbox fields more appealing on the front end.

• Creating a Custom Item Template in Elementor
  • Create a new listing
  • Build the listing in Elementor
  • Configure the dynamic fields
• Add Template to the Form
  • Choose and edit the form
  • Configure the field settings
  • Add form to the front-end

Creating a Custom Item Template in Elementor

Radio and Checkbox form fields provide a possibility to apply a template to their options. If the source of the field is “Posts” or “Terms”, you can create a Listing Template in JetEngine with the same source and make the Radio or Checkbox field inherit the layout from the template.

Also, it is possible to use a template if the source of the field is a JetEngine custom query.

In our case, we will customize a Checkbox field that lists posts from a custom post type named “Services”.

Since the custom item templates are not pre-made, you’ll have to build them manually.

Create a new listing

Go to WordPress Dashboard > JetEngine > Listings.

Click the “Add New” button to open a Setup Listing Item window.

Make sure to pick the “Posts” as a Listing source, then select the post type to pull the options from; in our case, it’s the CPT named “Services”, and our future Checkbox field in the form will list SPA services as options. 

After that, enter the Listing item name and choose the Listing view. You can work either in Elementor or Gutenberg. Lastly, click the “Create Listing Item” button.

Right afterward, you’ll be redirected to the chosen webpage builder.

Build the listing in Elementor

First of all, select the desired layout for your new section. To do so, press the cross icon, then pick the desired structure:

Now, search for the Check Mark or Check mark widget. Drag and drop it to the first column of the newly-created structure and choose the icon from the library or upload an SVG file.

Then proceed to the left-side toolbar, press Style, and customize the icons’ appearance if needed.

You can adjust the Box Size, Icon Size, and Border Radius, set Background Color for the Default icon, and play around with the Border Type, Width, Color, and Box Shadow of the Checked icon.

Configure the dynamic fields

Let’s configure the second column. We’ll use the Dynamic Field widgets to pull meta data from posts and build the listing layout.

Search for the Dynamic Field widget and drag and drop it to the second column.

We will display the post title and some meta field values with the help of this widget.

Once you are satisfied with your custom item template, click “Publish.”

Add Template to the Form

Now, it’s time to set the template you’ve created for the form.

Choose and edit the form

Go to WordPress Dashboard > JetFormBuilder > Forms.

Find the form you would like to customize and click the “Edit” button.

Configure the field settings

In the newly-opened window, there will be form fields settings. Click on the Checkbox field to edit it.

Scroll down the settings until you see a Use custom template switcher. Tick it, and the new drop-down field will appear. Make sure to pick here the template you’ve created beforehand.

Press the “Apply changes” button and then “Update” the form.

Add form to the front end

After configuring fields settings and updating the form, check out how it looks on the front end.

That’s all; now you know how to build a WordPress custom template for Radio and Checkbox form fields options.

The Map Field block displays maps (Google, Leaflet, and Mapbox) with set zoom parameters (zooming to a specific country). The field block allows:

• inputting coordinates by pinning the needed location on the map;
• storing the data location in three different ways: as a string with location Lat and Lng separated by a comma, as an array, and as a physical address;
• saving its values conveniently in the “Map” meta field of the JetEngine plugin.

NOTE

To use the Map field block, install and activate the JetEngine (v3.0.3 or higher) plugin, enable its Map Listing Module, and set the Maps Settings options.
Read the How to Create Google Maps API Key tutorial to know how to receive the API key and set it in the JetEngine dashboard to display maps on your site.

• Adding the Map Field
• Settings of the Map Field
  • General Settings
  • Value Settings
  • Map Settings
  • Advanced settings
• Post Submit Actions
• Front End View

Adding the Map Field

After creating a new form or opening a previously built one, the Map Field block should be found in the search bar of the block inserter (the “plus” icon) and then inserted where needed.

Settings of the Map Field

This field block has the following settings tabs: General, Value, Map Settings, and Advanced. 

General Settings

The General settings tab includes the FIELD LABEL, FORM FIELD NAME, and FIELD DESCRIPTION fields:

• FIELD LABEL ㅡ a field intended for the field’s label;
• FORM FIELD NAME ㅡ a field intended for the field’s name. This field will be filled out automatically after adding the text in the FIELD LABEL field;
• FIELD DESCRIPTION ㅡ a field for the description of the map.

NOTE

The FIELD LABEL and FIELD DESCRIPTION fields allow the usage of shortcodes.

Value Settings

The Value settings allow for the specification of the location center using coordinates and the zoom setting of the map. The Value tab includes the following settings:

• VALUE FORMAT ㅡ a field that allows choosing how to store the location by clicking the corresponding button (“String,” “Array,” or “Address”):
  • String ㅡ an option that, if selected, stores the coordinates as a string with location latitude and longitude separated by a comma. For example: “46.969686110698525,31.991035188696703”;
  • Array ㅡ an option that, if selected, stores the coordinates as an array of latitude and longitude. For example: “{“lat”:46.969686110698525,”lng”:31.991035188696703}”;
  • Address ㅡ an option that, if selected, stores the location as a physical address, like this: “6 Walnut Road, Manchester SW1A 1AA, UK”.
• DEFAULT VALUE ㅡ a field that allows entering or selecting dynamically the latitude and longitude coordinates.

NOTE

While the location can be stored in three different formats, manual input in the DEFAULT VALUE field is available only in the “String” format, i.e., “50.45,30.53”. This format works regardless of the options set in the VALUE FORMAT field.

The DEFAULT VALUE field allows usage of the dynamical data by pressing the “Dynamic Tag“ icon. 

It opens the Edit Preset pop-up for selecting a data source from the following options: “Post,” “User,” “URL Query Variable,” and “Option Page.” In turn, each selected option turns on the appropriate field, allowing one to choose the needed data. Also, this pop-up includes the Restrict access toggle that allows restricting users who are allowed to edit this value.

The needed settings should be saved by pressing the “Update” button.

After selecting the dynamic data in the Edit Preset pop-up, the ZOOM slider will be added to the Value settings. This field has three buttons to set the “Default,“ “Small,“ and “Custom“ zoom. Clicking the “Custom” button enables a field to type a zoom value ranging from “1” to “18.”

Map Settings

The Map Settings tab has the following settings:

• Show search autocomplete ㅡ a toggle that, if enabled, adds a drop-down field that allows selecting an address from a drop-down list of the proposed five addresses and displaying a picked location on a map. Read the How to Enable Search Autocomplete for Map Field Block tutorial for more details;
• HEIGHT ㅡ a slider that allows setting the map dimensions. The map height can be adjusted between “50“ and “1000“ pixels. Pressing the “Reset” button sets a 300-pixel height.

Advanced settings

The Advanced settings include:

• Add Prev Page Button ㅡ a toggle that, if activated, adds the “Prev Page” button to the form;
• Prev Page Button Label ㅡ a field that allows changing the text to be shown on the “Prev Page” button;
• Field Visibility ㅡ a drop-down list that allows displaying the form for “For all,” Only for logged in users,“ and ”Only for NOT-logged in users”;
• CSS Class Name ㅡ a field for adding the CSS class.

Post Submit Actions

The Map Field block allows storage of the map data inserted on the front end in the WordPress database. In particular, the “Insert/Update Post” Post Submit Action should be added. In this case, the formats of the form Map Field block and the JetEngine’s “Map“ meta field should be of the same type.

Pressing the “Update“ button saves the changes.

Front End View

On the front end, the Map Field will display two fields: the text field with the “Search” text and the map.

After typing three characters in the text field, the drop-down list will appear.

Once the needed address from the list is picked, the map will show this location.

After pressing the “SUBMIT” button, the set address will be added to the specified Custom Post Type.

That’s all about the Map Field block of the JetFormBuilder plugin, which allows one to work with the “Map“ meta field of JetEngine and gives users the ability to select the location on the map.

The Repeater Field can be an advantageous option for your form when content needs to be repeated. One can’t deny that the ability to add as many fields as you need dynamically is really handy when it comes to similar data. Let’s look at how to add new fields to book additional places on tour just with one button click. 

Let’s begin by proceeding to JetFormBuilder > Add New to create a form from scratch. For example, we will build a booking form with the repeater field that lets users register as many travelers as needed.

Initially, we delete the default Hidden Field, Text Field, and Action Button to avoid getting confused.

Next, we give a title to the form and add general fields to create a canvas. Among them are Hidden, Heading, Date, Text, and Radio fields.

Then add the essential part of the form, the Repeater Field. Adjust the settings according to your demands.

Hit the plus-shaped button to add the first block to the Repeater.

We begin with the Heading Field to name the proceeding section.

Then we add a couple of Text Fields specifying the information about the traveler.

And the final fields we create in the Repeater are the Radio Field and one more Text Field.

Besides, don’t forget to change the button’s label located under the fields placed in the Repeater.

Once done, we’ll add an Action Button and two more Hidden Fields to complete the form. One represents the current post title.

And the other one’s Field Type is selected as “Current Post Meta.” Here the Meta Field to Get Value From is also specified. 

Though don’t forget to adjust the JetForm settings. Especially, pay attention to the Post Submit Actions. Set the needed amount of actions taken once the form is submitted.

For instance, we add three post-submit actions, Insert/Update Post, Send Email, and Redirect to Page.

Finishing with all the settings, mind pressing the “Publish” button to make the form live.

Head to the page on which you want to place the form. For instance, we will add the form to a single page. To do so, we open WordPress Dashboard > Crocoblock > Theme Templates and hit the “Edit” button that appears next to the needed template once we hover on it.

Mind that you can use both Gutenberg and Elementor for editing.

Moreover, you can add a new template by pressing the samely-named button.

Find the JetForm block/widget, place it on the page, and work on the settings.

Press the “Update” button once the changes have been applied.

Or, look at the template made with Block Editor. The settings here are pretty much the same.

Check the form on the front end. You can also observe the fields we have added to the Repeater.

And after them, there is a button that duplicates the fields once the button has been pressed.

That’s it; the fields can be repeated as many times as needed. Now you know in which cases and, most importantly, how to add the Repeater Field to the JetFormBuilder form.

Field validation is an automated process of determining that all fields contain correct values before the WordPress form is accepted.

First of all, you need to create a form. Here’s an example of a simple form with a Number field, a Select field, and a Checkbox and Calculated fields combo.

There is no “Submit” button, and if there are any conditions set to the fields, e.g., Min and Max value, it’s impossible to determine whether the user enters a correct value.

The second step is to either copy the post ID from the form’s URL or head back to the JetFormBuilder > Forms folder. Find the necessary form and get its ID from the Shortcode column.

Now, to implement the fields validation without clicking the “Submit” button, you need to go to WordPress Dashboard > Appearance > Theme File Editor.

Then click on the functions.php file in the right sidebar.

Scroll down the file and add the filter where your-form-id will be the ID you previously copied:

add_action( 'wp_footer', function () { ?>
<script>
  jQuery( '.jet-form-builder[data-form-id="your-form-id"] input, .jet-form-builder[data-form-id="your-form-id"] select' ).on( 'blur', function() {
      this.reportValidity();
    } );
</script>
<?php } );

Don’t forget to click the “Update File” button. On the front end, a user will see a certain tooltip if the entered value is incorrect without clicking the “Submit” button.

Now you know the easiest way of implementing field validation without submitting the form.

Render in HTML allows you to make a Hidden field invisible in the HTML markup. With this feature, any Hidden field in the form becomes more secure, which is paramount when using Payment Gateways (PayPal/Stripe). 

Secure field is a field that cannot be modified, read or seen on the front-end even with the help of JavaScript.

Render in HTML is turned on by default. This way, the Hidden field type will be seen in the page’s source code.

If you disable the Render in HTML toggle, the Hidden field will disappear in the HTML markup and be secured. 

The Render in HTML feature works with all Field value types of the Hidden Field although there are two exceptions. The Hidden Field won’t be secure if it is set to URL Query Variable or when using a preset with URL Query Variable set as a source.

If Referer URL is chosen, the Render in HTML toggle won’t be available meaning that this feature is turned on by default.

Make work with JetFormBuilder easier by using the Blocks Transformation feature. Make changes to the WordPress form you create with the JetFormBuilder without effort. 

The feature is already built in the JetFormBuilder’s main functionality, so you don’t need to activate any additional elements.

Just proceed to the JetFormBuilder > Forms and click on the “Edit” button of the form you want to change. 

Or build a new form by pushing the “Add New” button to test the WordPress Blocks Transformation there.

As Gutenberg has been opened, let’s check the Text Field. It is the most telling example, as this field type supports transformation to any other JetFormBuilder fields.

Click on the block and its icon on the appeared panel. Now the transformation list is available.

For instance, we transform this field into the Checkbox Field. As you can see, the Field Label and Form field name are preserved as in the Text Field.

So, the main feature is the transformation of the already adjusted coinciding settings into the new block.

Other JetFormBuilder blocks also transform into different form blocks effortlessly.

All the JetFormBuilder blocks can transform into Conditional Block. When transformed, the selected block or group of blocks are placed inside the conditional block.

Besides, you can place several blocks into the Conditional Block. To do so, initially click on the upper block.

Push the “Shift” button on your keyboard if you are a Windows user or the “Command” button if you are a macOS user, and, without releasing it, click on the lower block.

Then press the block icon above the blocks and transform them into the Conditional Block.

Moreover, not only the JetFormBuilder blocks can be transformed, but also some core Gutenberg blocks.

So, the Buttons can be transformed into the Form Break Field, Action Button, and Conditional Block.

Separator is compatible with Group Break Field and Conditional Block.

And last but not least Paragraph transforms into Heading Field, Text Field, and Conditional Block.

Now you know how to transform form field blocks in Gutenberg with the help of the JetFormBuilder plugin.

Referer URL is a JetFormBuilder feature that allows you to get a hidden field with the user’s address to the current page with the WordPress form, created via the Gutenberg block editor. This feature can help you to collect SEO statistics.

Proceed to JetFormBuilder > Forms and click on to “Edit” or “Add New” form, according to your needs.

Open the Field Value drop-down menu in the Hidden Field block and select the Referer URL option.

Add the form to any post or page, if you haven’t done it yet, hit the “Publish” or “Update” button and proceed to the front end. You can do this by pushing the “View Post” or “View Page” buttons.

Submit the form and open the DevTools page. Here you can see the user’s referer URL.

That’s it. You know now how to get the user referer URL from the JetForm Hidden Field block.

Give your users an opportunity to design your website and pick a certain color in the form with the help of the Color Picker Field.

You will be able to use the default HTML Color Picker and choose a color in HEX, RGB and HSL formats. However, the values can be saved only in seven-character hexadecimal format. 

If you want to get advanced Field Settings and save values in HEX or RGB format, please check our Advanced Color Picker addon that has such an option.

Settings

• General Settings
• Advanced Settings

You can choose a Default Value for Color Picker field by clicking on the cylinder-shaped icon. The Edit Preset window will pop up, where you should choose the Source the information will be taken from. Check this tutorial to get more information about using the Preset.

Style Settings

You may install the JetStyleManager plugin to get the Block Style button in the top right corner of the editing window. Here are the styling settings you can meet there: