Author: Tetiana Pryhorovska

The tutorial explains how to work with JetFormBuilder forms on a free WordPress sandbox site by InstaWP.

• Preliminary Preparations
• Creating JetFormBuilder Forms
• Block Fields and Patterns
• Form Settings
  • Adding field blocks
  • Adding pre-made patterns
• Form Settings
• Adding the Form to Pages/Posts
• Collaboration With JetPlugins

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.

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

• Sign up on the InstaWP site.

• Press the “Create Site” button on the site configuration page.

• Navigate to the Forms tab, select JetFormBuilder, and press the “Create Site” button.

• Press the “Magic Login” button on the created sites page.

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

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.

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.

Adding field blocks

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

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

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

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.

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

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

Adding pre-made patterns

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

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.

Press the “Publish” button to publish the form.

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

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

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.

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.

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

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.

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.

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.

To add fields inside the Repeater, press the plus icon and drag-n-drop the necessary 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.

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.

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.

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).

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

Find the JetForm widget and select the form you need.

The added form on the front end looks as follows.