Category: Form Fields

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.

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.

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.