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

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.

adding the switcher field block

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

Settings Tab

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

switcher field block settings

General settings

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

general settings of the switcher field block
  • 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:

value settings of the switcherfield-block
  • 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.
edit preset popup window
  • 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.

advanced settings of the switcher field block

Style Settings Tab

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

style settings of the switcher field block

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.

jetstylemanager applied to the switcher field block


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

To display Google Maps, Leaflet Maps, or Mapbox via the Map block field of the JetFormBuilder plugin, install and activate the JetEngine plugin (at least 3.0.3 or higher versions) and enable its Map Listing Module.This tutorial explains how to display Google Maps.

For additional information, read the following tutorial: Using Different Maps and Geocoding Providers for Map Listings.

Getting an API Key

Getting an API Key is necessary for all map providers.

Navigate to the Google Cloud Platform Console. Register or log in to your account.

Fill in the appropriate fields of the Account Information and Payment Information Verification windows.

Navigate to the APIs & Services tab of Google Cloud Platform Console and press the “Create Project” button. Scroll down, select the Maps Javascript API (and other necessary services), and press the “Enable” button.

google maps platform dashboard

Navigate to the Keys & Credentials tab and press the “SHOW KEY” button to get the API key.

ggoogle maps platform api and credentials

Copy the data from the Your API Key field.

getting google maps api key

JetEngine Settings

Navigate to the WordPress Dashboard. Open the JetEngine > JetEngine > Maps Settings tab. Paste the copied API Key into the API Key field.

etengine maps settings

Map Field Usage

Navigate to the JetFormBuilder tab and create a form.

Open the form and add the necessary fields.

Find the Map Field block and drag-n-drop it onto the form. Unroll the VALUE FORMAT settings and type/paste the coordinates that define the center of the map.

jetformbuilder map field settings

Unroll the ZOOM settings and select the necessary zoom option.

Zoom settings determine how much the map will zoom in after the user specifies a location (via coordinates, address, or point on the map), which is then used as the center of the map. The zoom settings range from “1” to “18,” with a value of “1” providing the least amount of zoom and “18” showing the most area in the map field.

map field zoom settings

Unroll the Map Settings and toggle the necessary map size.

map dimensions settings

Add the form to a post or a page to see how the map looks on the front end.

map field on front end

That’s all about setting map zoom by a specific area.

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

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

prev page field transform buttons

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:

The Prev Page block has the General and Advanced settings.

prev page settings

General settings

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

prev page general settings

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.

prev page advanced settings

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.

scrolling to the top of the form 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. 

scrolling to the top of the form toggle

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.

previous page field in the form

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

form page break field added

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

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.

prev page block of the front end

That’s all about the Prev Page block settings.

Preliminary Preparations

Navigate to the InstaWP site and select the usage mode. To get access for eight hours, press the “Try For Free” button, complete the Email field, select the necessary Configuration, and press the “Launch Site Instantly” button.

setting up new instawp site

To get a 7-day access covering three WordPress sites, follow these steps: 

  • Sign up on the InstaWP site.
signing up on the instawp site
  • Press the “Create Site” button on the site configuration page.
site configuration page
  • Navigate to the Forms tab, select JetFormBuilder, and press the “Create Site” button.
form configuration page
  • Press the “Magic Login” button on the created sites page.
created site list page

After a few seconds, the JetFormBuilder plugin will be installed automatically on the created site.

jetformbuilder installed on instawp

Creating JetFormBuilder Forms

Navigate to the JetFormBuilder > Forms tab and press the “Add New” button.

The WordPress block editor will open a default form with Hidden and Text field blocks and a “Submit” button. Type the form’s name instead of the Add title default text.

jetformbuilder installed on instawp

Block Fields and Patterns

The current tutorial explains creating a booking form, which collects data on the user’s name, email, booking date, meal plan information, and number of guests and calculates the total cost of the event.

jetformbuilder blocks

Adding field blocks

Press the plus icon and click the Column field block to set the necessary custom columns layout for the form.

column field block

Add the required form field blocks to each column. Here, the Text, Date, and Media field blocks were used.

field block added

Use the Radio field block with manual data input to allow choosing among several options.

radio field block

To apply unique settings for a field, press the Form Settings tab and set the necessary options. For the current tutorial, we set the minimal and maximal length for the Text (E-Mail) field block.

setting minimal and maximal length for the text field

To provide further calculations, use the Number field block to get data on the number of guests.

number field block

The Calculated field block allows macro usage and calculates data from other fields.

calculated field block

Adding pre-made patterns

JetFormBuilder allows adding pre-made form patterns (i.e., Contact Us, Registration Form, etc.).

pre made patterns of forms

Form Settings

Navigate to the Form Settings tab and unroll the sections where you want to make changes:

  • Form Settings;
  • Validation;
  • Captcha Settings;
  • Post Submit Actions; 
  • Form Schedule;
  • Limit Form Responses;
  • General Message Settings, etc.

Read the tutorial to learn about Form Settings in more detail.

pre made patterns of forms

Press the “Publish” button to publish the form.

Adding the Form to Pages/Posts

Open a page or post, find the JetForm widget (in Elementor), and find your form in the Choose Form field.

jetform widget added

In the WordPress Block editor, open a page or post, find the JetForm block, and choose your form in the Choose Form field.

jetform block added

Press the “Publish” button to publish the page/post.

Users can embed the JetFormBuilder form using a shortcode, so this plugin is compatible with almost any builder that supports shortcode output.

Collaboration With JetPlugins

JetFormBuilder focuses on form functionality by providing 18+ blocks, multi-column layouts, custom HTML addition, inline field editing, and more. Users can further improve the user experience and make their site fully-fledged by integrating this plugin with other tools:

  • use JetPlugins to style the form and enrich the form functionality:
    • JetStyleManager to style the form blocks in WordPress Block editor for free;
    • JetEngine to work with dynamic content;
    • JetAppointment and JetBooking to use the Appointment Date field block, set prices, build the “Appointment – Provider” system, and integrate the form with WooCommerce;
    • JetThemeCore to add forms to single and archive pages, WooCommerce templates, CPTs, and/or CCTs;
  • install the JetFormBuilder Pro add-ons for sales, marketing, or payment processing purposes and enrich the forms by:
    • outputting multi-level Select field groups;
    • applying dynamic auto-fill to the Select or Address field blocks;
    • allowing users to log in by the provided email/login & password;
    • adding color picker functionality to forms;
    • displaying the form autosave progress;
    • scheduling the form availability;
    • limiting form response number per user.

That’s all about the usage of the JetFormBuilder’s forms on a free WordPress sandbox site by InstaWP and combining JetFormBuilder’s functionality with other JetPlugins.

The Repeater Field from JetFormBuilder allows users to add as many repeated entries as needed using the predefined JetFormBuilder fields (i.e., to add information on required additional services, guests, team members, photos, files, etc.).

Adding the Repeater Field to the Form

Open the form, find the Repeater Field block, and drag-n-drop it into the form.

jetformbuilder repeater field block

The Repeater Field Settings

The Repeater Field has the following groups of settings: General, Field, and Advanced.

The General settings are: 

  • Field Label field to type the field label shown on the form; upper and lower cases, spaces, commas, etc. are available;
  • Form Field Name field to type the field name for further use this name in calculations; this field should contain only lowercase Latin letters, numbers, ‘-’ or ‘_’ chars, and no spaces;
  • Field Description field to type a text to explain something to users;
  • Default Value field to type a default value or to select it from a source as Post, User, URL Query Variable, or Option Page.
repeater field settings

The Field settings are:

  • Manage Repeater Items Count drop-down menu allows selecting the items count way: Manually or Dynamically (get count from form field)
    • If set, the default Manually option will enable users to add as many entries as they need; this option turns on the Add New Item Label bar to click the button for adding a new entry. 
    • If selected, the Dynamically (get count from form field) option turns on the Field Items Count drop-down menu to choose the form field to get the count.Calculate Repeater Row Value drop-down menu has two options: Default (returns rows count) and Custom (calculate a custom value for each row). The Custom option sets a math formula to calculate field value if selected.
calculated field in repeaters

The Advanced settings are:

  • Add Prev Page Button toggle, if enabled, turns on the Prev Page Button Label field to type the appropriate text;
  • Field Visibility drop-down menu allows choosing the visibility mode from the For all, Only for logged users, and Only for NOT-logged users options;
  • CSS Class Name field to type the CSS class name to customize the Repeater field appearance.
advanced settings of repeater fields

Adding Nested Fields

To add fields inside the Repeater, press the plus icon and drag-n-drop the necessary fields.

adding nested fields into repeater fields

Adding Calculated Fields

Users can add the Calculated fields into the Repeater field or outside the Repeater for calculations. Find the Calculated Field and drag-n-drop it where you need.

NOTE

Use the JetFormBuilder macros (i.e., booking macros) for price settings such as seasonal prices, rates, and outlet prices. This macro takes all this into account and gives the correct costs.

Navigate to the Repeater field settings to calculate the formulation inside the Repeater field.

Select the Custom (calculate custom value for each row) option from the  Manage repeater items count drop-down menu. This option turns on the Calculation Formula for the Repeater Field on the top of the Repeater Field to add the formula for calculations. For example, the form below calculates the additional service costs for each guest using the Calculated Fields.

calculated fields in repeaters

To use the data calculated by the Repeater field to the Calculated Field, add the Calculated Field and type the needed formulation. Add the Repeater Field name into the formula to use the repeater data.

calculated field outside the repeater

Using Meta-Fields for Calculations

To calculate the total costs for the CPT, use its meta fields. The formulation with meta fields will look as follows:

%FIELD::check_in_out_dates%*%META::booking_price%+%FIELD::repeater%

(here, the booking_price is a CPT meta field).

metafield usage in forms

Adding Forms to a Single Page

Create a Single Page you need, navigate to the settings block, and specify the CPT you need.

single page settings

Find the JetForm widget and select the form you need.

single page settings

The added form on the front end looks as follows.

front end view of the jet form

That’s all about adding and using the Dynamic Repeater Field in forms.