Category: Advanced Features

In this tutorial, we explain how to create a form that allows you to select an address from a drop-down list of the proposed five addresses and display a picked location on a map via the Map Field. 

In particular, we exemplify creating a form that allows choosing a delivery address while placing an order. For better usability, we will insert this form onto a pop-up, which will be opened if clients press a button to order a needed product. 

• Receive the API Key
• Adjust the JetEngine Settings
• Create a Form
• Add the Form to a Page
  • Create a pop-up
  • Build a Listing Item
  • Add the Listing Grid to a page
• Check the Result

Receive the API Key

Navigate to Google Maps Platform. After confirmation of your Google Account, you will be redirected to the Google Cloud Console. 

Here, unroll the navigation menu and move to APIs & Services > Credentials. Also, you can enter your Google Cloud Console directly.

In the Credentials tab, press the “+CREATE CREDENTIALS” button and select the “API Key” option from the drop-down.

Then copy the API key from the newly-appeared API key created pop-up.

If you have previously created your API key, move to the API Keys section, press the “SHOW KEY” link, and copy this API key from the Your API key field.

Check the How to Create Google Maps API Key tutorial to gain an in-depth understanding of this process. 

Adjust the JetEngine Settings

Install and activate the JetEngine plugin. Then, navigate to WordPress Dashboard > JetEngine > JetEngine. 

Here, in the JetEngine dashboard, unfold the Modules tab and activate the Maps Listings toggle. Finally, press the “Save” button.

In the next step, move to the newly-appeared Maps Settings tab and keep the default “Google Maps” Map Provider. Then, paste the copied API key into the corresponding field and keep the “Google” Geocoding Provider.

To learn more about managing JetEngine’s Map Settings, follow the How to Choose Different Front-end and Geocoding Map Providers for Map Listings tutorial.

Scroll the tab down and press the “Validate Google maps API key” button. If the validation is successful, the following text will appear near the button: “We successfully get coordinates for random address with your API key. You can use this key for address geocoding!”.

Create a Form

Move to the WordPress Dashboard > JetFormBuilder > Add New tab and create a new form. 

The newly opened default form contains the Welcome block. As we decided to make the form from scratch, we pressed the “Start from scratch” button on this block.

Read the Creating a Form tutorial to learn how to build forms from scratch and customize their settings.

Then, the Welcome block will disappear, and the default Hidden Field, Text Field, and Action Button blocks will be added. Type the form’s title (in this case, we typed the “Delivery Address” text). 

Add the fields you need. We create a form to get the client’s address and display it on the map, so we customize the default Text Field and then add another one (for the client’s name and contact information). Then, we unroll the settings of the first Text Field and type its FIELD LABEL (the “Name” text). The FORM FIELD NAME field will be filled out automatically. For the second Text Field, we type the “Telephone” FIELD LABEL and set the “Tel” FIELD TYPE, respectively. 

In the next step, find and drag-n-drop the Map Field block. Unroll the Block settings and insert the FIELD LABEL (the “Map” text in this tutorial).

After scrolling down the Block settings, pick the Address tab of the VALUE FORMAT field in the Value tab. Also, in the Map Settings tab, enable the Show search autocomplete toggle to display the autocomplete drop-down list.

If needed, change the FIELD LABEL of the Action Button. In this tutorial, we delete the default “Submit” text and type the “Order” text. 

Finally, save the form by pressing the “Publish/Save” button. 

Add the Form to a Page

You can place this form on a page, Single Post Page, or an Archive template using the JetForm widget/block/element according to your requirements and preferences. 

In this case, we use Elementor.

To learn how to add your form on pages using Elementor, Block Editor, or the Bricks theme, read the Displaying a JetFormBuilder Form in Any Page Builder tutorial.

Create a pop-up

First, install and activate the JetPopup plugin.

Then, navigate to the WordPress Dashboard > JetPopup > All Popups tab and press the “Create New Popup” button.

In the newly-appeared window, select the “Elementor” Content Type, type the pop-up’s Name, and tick the “Classic” Choose Preset.

Press the “Create” button. 

Second, after redirection to the selected editor, customize the form as you need. In this tutorial, we delete the default content.

Find the JetForm widget and drag-n-drop it to the pop-up. Then, pick the created form in the Choose Form drop-down list. Finally, press the “Publish” button to save the pop-up.

Read the How to Set Up a WordPress Pop-up Form tutorial to learn more details about how to create the pop-up, add the form to it, set the needed conditions, and customize the form’s settings.

Build a Listing Item

To create a Listing Item, navigate to the WordPress Dashboard > JetEngine > Listings/Components and press the “Add New Listing Item” button. 

Fill out the fields of the Setup Listing Item pop-up. Then, select the “Posts” Listing source, pick the needed CPT in the From post type drop-down, type the Listing item name, and choose the “Elementor” Listing view. 

After that, click the “Create Listing Item” button.

For more details on how to build listings, add dynamic content, and place the listing on pages, read the How to Create Listing Template for Post Types in Elementor tutorial.

Build the listing item and add the required fields using the Dynamic Field and Dynamic Image widgets. 

Then, insert the Button widget. Unroll the General settings and type the text in the Text field to be shown on this button (the “ORDER” field, in this case).

In the last step, move to its Advanced settings tab, unroll the JetPopup section, and choose the pop-up in the Attached Popup drop-down list. Then, set the “Click On Widget” Trigger Type and activate the JetEngine Listing popup toggle.

The How to Build a Dynamic Popup for JetEngine Listings tutorial explains this process in more detail.

Finally, save the Listing Item by pressing the “Publish” button.

Add the Listing Grid to a page

Open a page, insert its name (the “Pizza and More” text in this tutorial), and add the Listing Grid widget.

Unroll the General settings and choose the pre-created Listing item in the Listing drop-down list.

Save the page by pressing the “Publish” button.

Check the Result

Navigate to the front end and open the page you added the form. 

In this tutorial, we linked the form with the Button widget to simulate the ordering of the needed products. Therefore, we open the page with the Listing Grid widget (the “Pizza and More” page includes the product data and the “ORDER” buttons). Here, we press the “ORDER” button near the corresponding item.

Fill out the fields of the form and then type the first three characters in the text field of the Map Field block. In this tutorial, we fill out the fields in the newly appeared pop-up and type the first characters in the Map field (“Lviv”, in this case). 

Then, the text field of the Map Field block will offer five addresses in the drop-down list. Select the needed variant, and the map will show you the location.

In this case, we pick the “Lviv National Opera, Svobody Avenue, Lviv, Lvivska Oblast, Ukraine” variant from the proposed ones.

After that, the Map field will display the corresponding location.

That’s it. Now you know how to activate the autocomplete drop-down list to the Map Field block of the JetFormBuilder plugin for WordPress to display a selected from the list location.

Tutorial requirements:

• Elementor (Free version), Block editor (Gutenberg), or Bricks;
• JetAppointment plugin installed and activated;
• JetEngine plugin installed and activated;
• JetFormBuilder plugin installed and activated.

Combining the JetAppointment and JetEngine plugins, you can build a custom item template with the Check mark block/widget/element and then set it for the “Service” and “Provider” fields of the checkbox and radio types in the appointment booking forms.

Before you start, ensure to complete the JetAppointment setup. During this process, you can create appointment forms via JetFormBuilder in the Additional Settings tab.

The appointment forms can be placed on the Static pages and Single Provider and Service templates.

You can create custom item templates for the “Services” and “Providers” Custom Post Types (CPTs) and attach them to the form fields in such ways:

• For the Static Page Booking Form, you can add templates to the “Service” and “Provider” fields;
• For the Single Service Booking Form, you can add a template to the “Provider” field;
• For the Single Provider Booking Form, you can add a template to the “Service” field.

In this tutorial, we will create a custom item template with the Check mark block for the “Service” field in the Single Provider (Teams) Booking Form. The form will be placed on the Single Provider page template.

Contents:

• Creating a Custom Item Template
  • Customizing the Check mark widget/block/element
  • Configuring the Dynamic Fields
• Setting the Template for the Services Field
  • Choosing and editing the form
  • Configuring the “Service” field settings
• Checking the Result
  • Placing the form on the Single page
  • Proceeding to the front end

Creating a Custom Item Template

Go to WordPress Dashboard > JetEngine > Listings/Components and press the “Add New Listing Item” button.

In the Setup Listing Item pop-up, pick the “Posts” option as the Listing source, set the required post type in the From post type field (“Services” in our case), enter the Listing item name, and choose the Listing view (for this case we choose “Blocks (Gutenberg),” but it can also be “Elementor” or “Bricks”).

Afterward, click the “Create Listing Item” button.

Customizing the Check mark widget/block/element

On the editor page, choose the desired layout for your new section, such as adding three columns.

Search for the Check mark widget/block/element and place it in the first column.

This block has two CONTROL TYPE options:

• HTML input — keep this option if you want the default look for the checked and unchecked states;

• Image — pick this option if you want to add a custom Default icon and Checked icon.

To set the custom icons, hit the “Choose” button next to the required fields.

Configuring the Dynamic Fields

Now, you can use the Dynamic Blocks, e.g., the Dynamic Field for the second and third columns, to pull the metadata for the service posts.

For the first Dynamic Field, we keep the “Post/Term/User/Object Data” SOURCE and “Title” OBJECT FIELD.

For the second, we choose the “Meta Data” SOURCE, keep the META KEY option unselected, and enter the “_app_price” in the OBJECT FIELD / META FIELD / REPEATER KEY / COMPONENT PROP field.

To customize the displayed value, we enable the Filter field output toggle and select the “Format number” Callback. Other settings we keep by default: the “.” Decimal point and “2” Decimal points.

Then, we enable the Customize field output toggle and enter the “$%s” into the FIELD FORMAT, where “$” is the currency and “%s” stands for the pulled value.

With the free JetStyleManager plugin installed and activated, you can alter the style settings of the Dynamic Field blocks by hitting the “pencil” button.

Once you finish adjusting the custom item template, hit the “Save” button.

Setting the Template for the Services Field

Choosing and editing the form

Go to WordPress Dashboard > JetFormBuilder, hover over the form you want to customize, and hit the “Edit” link. In our case, we edit the “Single Teams Booking Form” that is placed on the Single Provider page.

Configuring the “Service” field settings

On the form editing page, open the “Service” form field settings.

Enable the Use custom template toggle, and the CHOOSE CUSTOM TEMPLATE drop-down will appear. Select the just-built Listing template here and “Save” the form settings.

The form fields can also be edited with the JetStyleManager plugin. For example, for the Appointment Date block, we hit the “pencil” icon, open the Calendar tab, and set the CALENDAR WIDTH to “100” %.

Checking the Result

Placing the form on the Single page

If you haven’t placed the form yet, proceed to the Static page or Single Provider or Service template, depending on the form. For example, we opened the Single Provider template in the WordPress block editor.

Before the form, you can add a title and description with the Heading and Paragraph blocks.

Find the JetForm widget/block/element in the search bar and drag and drop it to the page.

Select the created form in the CHOOSE FORM drop-down list.

For an in-depth understanding of the JetForm settings, read the Displaying a JetFormBuilder Form in Any Page Builder tutorial.

Once the page customization is completed, click the “Save” button.

Proceeding to the front end

Now, you can proceed to the front end to check if the Check mark widget/block/element works correctly by ticking one or several options.

That’s all. Now you know how to create a custom item template with the Check mark block to use it in the appointment booking forms created with the JetAppointment, JetEngine, and JetFormBuilder plugins for the WordPress website. 

Radio and Checkbox Fields are multi-optional form fields that allow users to pick one or more options. You can manually add options to these fields or use pre-made lists. Also, you can allow users to add their custom options from the front end by applying the custom feature to the needed fields of the JetFormBuilder form.

As an example, we added the Radio Field and Checkbox Field blocks with the enabled custom feature to the job application form. 

Keep in mind that all the following steps are an illustration of how the feature works and you can create an entirely different form with other fields and submit actions that suit your needs.

Contents

• Form Creation
  • Adding form fields
  • Setting a post-submit action
• Placing the Form on the Page
• Checking the Results

Form Creation

Adding form fields

To create the form, we proceeded to the JetFormBuilder > Add New tab and got to the form editing page.

We entered the form name and added four Text Fields (for the first and last names, email, and phone number) and the Action Button as the “Submit” button.

Then, we added a Radio Field, set the FIELD LABEL and FORM FIELD NAME values, selected the “Glossary” from the FILL OPTIONS FROM drop-down menu, and picked the “Language” glossary. Such settings will let users choose their working language.

Glossaries is the JetEngine feature that allows you to create a list of the options and use it for different custom meta fields and form fields. Instead of “Glossary,” you can choose the “Manual Input” option and set the desired options manually.

We hit the “three dots” and click the “Enable custom option.”

Next, we added the Checkbox Field, set the FIELD LABEL and FORM FIELD NAME values, selected the “Glossary” from the FILL OPTIONS FROM drop-down menu, and picked the “User Skills” glossary so that users can set their working skills. Options for this field can also be set via the “Manual Input” option.

We pressed the “Enable custom option” for this field, too.

After enabling this option, the BUTTON LABEL can be set in the Value tab of the Checkbox Field. 

Setting a post-submit action

Next, we proceeded to the JetForm > Post Submit Actions tab, kept the “Send Email” action, and hit the “pencil” icon.

You can learn more about the “Send Email” action and its options from this tutorial.

In the Edit Action pop-up, the CONTENT field specifies the body of the message that will be sent by email. Insert the text or HTML code into this text area. Also, you can put values from the fields of the submitted form by clicking the “wrench” icon and selecting macros. We set such a text with inserted macros:

Hi admin!

There is a new application from %first-name% %last-name%.

Details:
Phone: %phone-number%
Work language: %working_language%
Work skills: %skills%

We configured the needed settings and hit the “Update” button.

Also, we clicked the “+ New Action” button in the JetForm > Post Submit Actions tab and selected the “Save Form Record” option that stores the form entries in the database.

After that, we hit the “Publish/Update” button to save form settings.

Placing the Form on the Page

Then, we navigated to the Pages > Add New Page tab, added the JetForm block to the page, selected the recently created job application form from the CHOOSE FORM drop-down menu, and pushed the  “Publish” button.

Checking the Results

We opened the page with the form on the front end.

For the radio buttons section of the form, the input field appeared as one of the options. When we checked it, the input field was activated, and we entered the custom option (“German”).

For the checkboxes section, the “+ Add New” button appeared (the text label may be different if you changed it in the Checkbox Field settings). By clicking it, we were able to add several input fields and enter the custom options (“Creativity,” “Decision-making,” and “Learning”). If we wanted to delete the unwanted input fields, we would have unchecked their boxes.

Also, we filled in other fields to complete the form and pushed the “Submit” button.

According to the Post Submit Actions settings, we could observe the submitted form in an email and the Form Records list.

As we can see, the custom options are displayed in the email message:

Hi admin!

There is a new application from John Smith.

Details:
Phone: +80(000)000-00-00
Work language: German
Work skills: Administrative skills, Creativity, Decision-making, Learning

To check the form record, we went to the JetFormBuilder > Form Records tab and clicked the needed record.

The record shows the saved values from the fields of the submitted form, including the custom options.

That’s all. Now you know how to allow users to add custom options to the Checkbox and Radio fields of the JetFormBuilder form on the front end.

Select, Radio, and Checkbox Fields are the multi-optional form fields that allow users to select one or more options. Using different field sources, you can add options manually or use the pre-made lists. 

This tutorial describes how to add country, month, and weekday names to the form using the bulk add feature. 

As an example, we added the Select Field with the county list to the Application form. 

Keep in mind that all the following steps are the illustration of how the feature works, and you can create an entirely different form with other fields and submit actions that suit your needs.

Contents

• Form Creation
  • Adding a pattern
  • Adding country list via the bulk-add feature
  • Setting a post-submit action
• Placing the Form on the Page
• Checking Results on the Front End

Form Creation

Adding a pattern

To create the form, we proceeded to the JetFormBuilder > Add New tab and got to the form editing page. We deleted all fields since we added new ones via the pattern.

We gave a title to the form, hit the “+” button, moved to the Patterns > JetForms tab, and picked the Application Form pattern.

Adding country list via the bulk-add feature

The pattern contained the “country” Text field.

We selected this field, hit the “Text Field” icon, and changed the field type to the “Select Field.”

Then, we left the “Manual Input” option in the FILL OPTIONS FROM field and hit the “Manage Items” button.

We hit the “Show bulk options” button in the Edit Manual Options pop-up.

Afterward, we selected the “Countries” option in a drop-down list. Besides that, you can also pick the “Three simple options,” “Days,” and “Months” variants.

Items in the list were displayed in such a way:

label : value

If you display the selected results in an email or meta field, the value will be shown (e.g., AF) instead of the label (e.g., Afghanistan). So, we edited the values to be the same as the labels. For example:

Afghanistan : Afghanistan

You can use any text editor to do this quickly.

Also, be aware that you can input data in the JSON format, for example:

[
{
"label": "Ukraine",
"value": "UA",
"calculate": 1
},
{
"label": "United States",
"value": "US",
"calculate": 2
},
{
"label": "United Kingdom",
"value": "UK",
"calculate": 3
}
]

In the textarea, it’s automatically converted into the proper format:

Ukraine : UA : 1
United States : US : 2
United Kingdom : UK : 3

The third component of every line in this format is the value for the calculated field. 

For our case, we created the option list in the “Afghanistan : Afghanistan” format and pushed the “Add to the options” button.

We hit the “Update” button to save the list of the countries.

Setting a post-submit action

Next, we proceeded to the JetForm > Post Submit Actions tab, ensured the “Send Email” action was selected, and hit the “pencil” button.

In the Edit Action pop-up, we set the “Admin email” option in the MAIL TO field.

In the REPLY TO field, we selected the “Email from submitted form field” variant, and from the REPLY TO EMAIL FROM FIELD drop-down menu, we picked the “Email” form field where a user will enter their email address. With such settings, a user would receive the answer on the email they indicated in the form.

The SUBJECT field defines what text will be displayed in the Subject bar of the received email. It can be plain text where you can also put values from the fields of the submitted form by clicking the “wrench” icon and selecting macros. We changed the text in this field to “New application.”

The FROM NAME field signifies what will be shown in the From bar of the letter. We entered the %first-name% and %last-name% macros to include the sender’s name.

The FROM EMAIL ADDRESS field specifies the email address that will serve as the sender’s in the letter. We entered the %email% macro here.

From the CONTENT TYPE drop-down menu, you can choose if the message will be “Plain Text” or an “HTML” code. We picked the “Plain text” option.

The CONTEXT is the body of the message. Insert the text or HTML code into this text area. Additionally, you can insert values from the fields of the submitted form by clicking the wrench-shaped icon and selecting macros. We set such a text with inserted macros:

Hi admin!

There is a new application from %first-name% %last-name%. 
Country: %country%
City: %city%
Phone number: %phone-number%

The ATTACHMENTS option allows users to attach files to the form and send them via email. Create one or several Media Field blocks and set them here. Since we didn’t create any Media Fields for this form, we left this field empty.

Finally, we hit the “Update” button.

We finished customizing the form and pressed the “Publish/Update” button to save its settings.

Placing the Form on the Page

Then, we navigated to the Pages > Add New Page tab, added the JetForm block to the page, selected the recently created application form from the CHOOSE FORM drop-down menu, and pushed the “Publish” button.

Checking Results on the Front End

We opened the page on the front end, filled in the fields, and hit the “Submit” button.

In the received email, we can see values from the submitted form fields, including the select field with the list of the countries.

That’s all. Now you know how to bulk-add countries, months, and days of the week to the JetFormBuilder form fields, like Select, Radio, and Checkbox.

A Sanitize value feature helps to validate the data put in the form. It works immediately once the form is submitted and is available for Text and Textarea Fields from the JetFormBuilder plugin.

In this tutorial, we will use Text Field as an example. However, feel free to use Textarea Field if needed.

• Create a Form with a Text Field
• Set Up the Form
• Adjust the Sanitize Value Options
  • Sanitize email
  • Sanitize key
  • Sanitize text
  • Sanitize textarea
  • Sanitize title
  • Sanitize url
  • Sanitize user name
  • Custom transform

Create a Form with a Text Field

Initially, the Text Field should be placed in the form. So, proceed to WordPress Dashboard > JetFormBuilder > Add New. 

We will delete the default Hidden Field and search for the Text Field.

The “Sanitize value” button can be found if you click on the Text Field.

After pressing the “Sanitize value” button, a list of sanitizing options is displayed.

Set Up the Form

The next step is adjusting Post Submit Actions in the JetForm settings tab.

Once opened, choose the “Insert/Update Post” option and press the pencil-shaped button to edit the action.

With the help of the newly opened Edit Action pop-up, we can configure the form to add a new post and complete its content with the value we put in the Text Field.

Select the desired POST TYPE. For instance, we pick the default WordPress “Posts.”

Pick the needed POST STATUS.

The FIELD MAP area contains all the fields from the form. Now, we have one Text Field and set it to be connected to the “Post Content” to demonstrate the result of the sanitized value in the post. However, you can choose any desired option.

To save the changes, hit the “Update” button.

That’s all about the basic form adjusting. Now, let’s look through all the “Sanitize value” options.

Adjust the Sanitize Value Options

Select one or several desired options in the Sanitize value list. 

Let’s look through the available options.

Sanitize email

This option clears all the characters that are not allowable in the email address.

Let’s assume you need this option. So, once the form is ready, press the “Publish” button.

Then, we go to WordPress Dashboard > Pages and press “Add New” to create a new page.

Search for the JetForm block and add it to the page. 

After selecting the needed Form from the list and adjusting the form, click the “Publish/Update” button.

Then, open the page you have just built and complete the field with data.

For instance, our email input looks like: “example@email.com!.”

Now we go to WordPress Dashboard > Posts, as here, in our case, the new posts will be displayed. Then, we open the latest post to check the content. So now it is set to “example@email.com.”

Sanitize key

This feature can be used for validating keys like post slugs or category names. It ensures that input data is safe to use in URLs or other contexts. 

Lowercase alphanumeric characters, dashes, and underscores are allowed.

For instance, we put the “New Car!” value and submit the form.

The content in the post will be changed to “newcar”.

Sanitize text

A text sanitizing process includes checking for invalid UTF-8, converting “less-than” (“<”) characters to an entity, stripping all tags, removing line breaks, tabs, and extra whitespace, and removing percent-encoded characters.

The user can complete the form with something like: “<b>My name is <i>Dave</i></b>.”

After the sanitizing process, the data will look like this: “My name is Dave.”

Sanitize textarea

It is similar to the “Sanitize text” option. However, it doesn’t clear new lines and whitespaces as they are considered normal for textarea fields.

To see the difference, let’s change the Text Field to Textarea Field.

So, it’s better for the text that includes several lines. For instance, the user writes a letter in the text area that looks like this:

“Hi!

<p>I am inquiring about the status of <b>my order</b>. When can I expect it to be delivered?</p>

Thank you.

John.”

As you can notice, new lines (\n) are put in the text. If we used “Sanitize text” instead, the new lines would not be preserved:

“Hi! I am inquiring about the status of my order. When can I expect it to be delivered? Thank you. John.”

Sanitize title

Sanitizes string to a slug, which can be used in URLs or HTML attributes.

We put the “My Article” title in the field.

The content is now sanitized to “my-article.”

Sanitize url

This option sanitizes the URL for redirect usage. It helps avoid issues with special characters that are not allowed in the links.

For instance, we put the “product-id-932-car” value in the Text Field.

The value will be sanitized to “http://product-id-932-car.”

Sanitize user name

This option can be used for user names accordingly. It clears all the unsafe characters like tags, percent-encoded characters, or HTML entities.

We complete the field in the form with the “User%231” value.

So, the content will be changed to “User1.”

Custom transform

If this option is selected, the additional field for completion appears. It allows adding custom sanitizing code if needed.

For instance, we complete the field with the “full_name” value. According to this custom value, the content will be returned as first and last name.

To make it work, we also go to WordPress Dashboard > Appearance > Theme File Editor, open the Theme Functions (functions.php) tab, and paste the following code at the end of the file:

/**
 * Full Name sanitizer.
 * Value returned be in such format: FirstName LastName
 *
 * @param \JFB_Modules\Block_Parsers\Field_Data_Parser $parser
 */
function jet_fb_sv_full_name( \JFB_Modules\Block_Parsers\Field_Data_Parser $parser ) {
   $value = $parser->get_value();

   // Delete not-allowed characters & html-tags
   $value = sanitize_text_field( $value );

   // Get separated first name and last name
   $names = preg_split( '/[\s]+/', $value, 2 );

   // Not enough names
   if ( ! is_array( $names ) || 2 > count( $names ) ) {
      $parser->set_value( '' ); // Clear value to make this field invalid

      return;
   }

   list( $first_name, $last_name ) = $names;

   // Make a name's first character uppercase
   $first_name = ucfirst( $first_name );
   $last_name  = ucfirst( $last_name );

   $parser->set_value(
      sprintf( '%s %s', $first_name, $last_name )
   );
}

Then, we hit the “Update File” button.

This is just the case example; you are free to use the needed piece of code.

To see the result, we return to the page where the form is located and complete it with the “<b>John            <i>Doe</i></b>” value.

In the post, the content will look like this: “Jonh Doe.”

That’s all about using the Sanitize value feature available for Text and Textarea Fields from the JetFormBuilder plugin for WordPress.

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.

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.

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.

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.

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

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.

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.

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.

Collaboration With JetPlugins

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.

• Create a Form
• Add the Number Field
• Add the Repeater Field to the Form
• Set the Repeater Field’s Settings
• Add the Nested Fields in the Repeater Field
• Use the Calculations
  • Calculations inside the Repeater Field
  • Calculations outside the Repeater Field
• Customize the Action Button
• Set the Post Submit Actions
• Add the Form to a Single Post Page
• Check the Result

Create a Form

Navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to create a new form.

The new form will be opened in the Gutenberg block editor. 

Press the “Start from scratch” button in the Welcome block to develop your form. 

The Welcome block will be closed, and the Hidden Field, the Text Field, and the Action Button will be added by default.

Type the form’s name instead of the “Add title” placeholder. 

More details can be found in the form creation tutorial.

In the given case, we deleted the Hidden Field as well as the default Text Field because we do not focus on the booking functionality of the form. In contrast, the Hidden Field is necessary if you intend to apply the JetBooking plugin to manage the booking data.

More details about the usage of the Repeater Field in booking forms can be found in the How to Add the Repeater Field to the Booking Form tutorial. 

Add the Number Field

We added the Number Field to input the number of guests. This value will be used to set the number of repetitions for the Repeater Field.

Find the Number Field block, drag-n-drop it onto the form, unfold the block’s settings, and fill in the FIELD LABEL and FORM FIELD NAME fields (the “Input the Number of Guests” and “guests” fields, respectively).

Add the Repeater Field to the Form

Find the Repeater Field block and drag-n-drop it onto the form.

Set the Repeater Field’s Settings

Unfold the Repeater Field’s settings. Here, we set the following options:

• In the General settings tab, we typed the “Repeater” text in the FIELD LABEL, and the appropriate text was shown in the FORM FIELD NAME field automatically;
• In the Field settings, we set the “Dynamically (get count from form field)” option in the MANAGE REPEATER ITEMS COUNT drop-down list, chose the needed field (the “Input the Number of Guests” Number Field in the given case) in the activated FIELD ITEMS COUNT drop-down menu, and picked the “Custom (calculate a custom value for each row)” option in the CALCULATE REPEATER ROW VALUE drop-down menu. 

The “Custom (calculate a custom value for each row)” option turns on the CALCULATION FORMULA FOR REPEATER field automatically. We left it empty, and further, it will be used to calculate the price for each guest.

Add the Nested Fields in the Repeater Field

To add fields inside the Repeater Field, we pressed the “plus” icon. First, we added the Columns Field, divided the layout into three equal parts, and added the Text Fields “Name,” “Email,” and “Phone” to get the client’s appropriate data.

Then, we added the Checkbox Field and typed its FIELD LABEL (here, the “Meals” text), and the FORM FIELD NAME was filled automatically. We kept the default “Manually Input” option for the FILL OPTIONS FROM field and pressed the “Manage Items” button. Then, we added three checkbox items and filled in the LABEL and VALUE fields for each item (the CALCULATED fields are left empty). The added options are “Breakfast,” “Dinner,” and “Lunch.”

In the same way, we added the “Additional Services” Checkbox Field: we kept the default “Manually Input” option for the FILL OPTIONS FROM field, set the checkbox items (“SPA,” “Hammam”, and more), and specified their VALUEs. 

Finally, we added the Textarea Field to the third column and typed its FIELD LABEL and FORM FIELD NAME. In particular, we typed the “Please, add here the special needs and preferences (if any)” text in the FIELD LABEL and “special” text in the FORM FIELD NAME.

For an in-depth understanding of how to manage the Checkbox Field settings, read the How to Customize Default Checkboxes Form Fields tutorial.

Use the Calculations

Calculations inside the Repeater Field

Return to the CALCULATION FORMULA FOR REPEATER of the Repeater Field. Add the formula to calculate the total value for all repetitions. This formula will display the total value returned by the Repeater Field. For example, to calculate the additional services and meal costs for all guests, we typed the formula:

%FIELD::meals%+%FIELD::additional_services%

Find and drag-n-drop the Calculated Field. Since we intend this field to return the additional service and meal costs for each guest, we placed it under the Checkbox Fields.

We typed the following formula in the Calculated Field:

%FIELD::meals%+%FIELD::additional_services%

Calculations outside the Repeater Field

In this case, we calculated total costs as a sum of the constant price for renting the cottage and the fees for services and meals for all guests. 

To calculate the cottage’s renting price, we used the CPT posts meta fields (i.e., for the cottage’s price). The formula with meta fields will look as follows:

%META::price%+%FIELD::repeater%

(Here, the “price” CPT meta field is used).

Customize the Action Button

The Action button is added to the form by default. To customize the button text (by default, it’s the “Submit” text), navigate to the Settings block and type the necessary text (in this case, we typed the “Book” text).

Set the Post Submit Actions

Navigate to the JetForm settings and unroll the Post Submit Actions tab. The “Save Form Record” option is set by default. In this tutorial, we did not add other Post Submit Actions.

Watch the Post Submit Actions video overview to learn how to apply and manage the Post Submit Actions.

Once completed, press the “Publish/Update” button to save the form.

Add the Form to a Single Post Page

Create a single post page you need, navigate to the settings block, and specify the CPT you need.

For more information on how to create single pages and assign them to a certain CPT, read the How to Create a WordPress Single Post Page Template tutorial.

Find the JetForm widget and select the form you need.

Check the Result

Navigate to the front end and check if the Calculated Field works correctly.

Fill in the form fields, scroll down, and press the “Book” button.

To observe the form details, move to the WordPress Dashboard  > JetFormBuilder > Form Records path to open the JetFormBuilder Form Record tab, which lists all submitted forms. 

Hover over the name of the needed form, click the “View” link below the name, and unroll the form record.

That’s all about adding and using the Repeater Field to forms of the JetFormBuilder plugin for WordPress.

This tutorial dives into creating a custom query for the JetFormBuilder Records source using the Query Builder module of the JetEngine plugin. You will learn how to show values from different field types using dynamic widgets and shortcodes.

• Add JetFormBuilder Form
• Build JetFormBuilder Records Query
• Create Listing for JetFormBuilder Records Query
  • Output field types in the listing template
  • Use shortcode generator

Add JetFormBuilder Form

Let us start with creating a form in the JetFormBuilder directory. To do so, proceed to WordPress Dashboard > JetFormBuilder > Add New. 

For instance, we have added the following fields to the form: Text Field, Checkbox Field, Media Field, Select Field, and Date Field.

In the Post Submit Actions tab, you need to add the “Save Form Record” action to make sure the submitted values are saved in the Form Records.

Once the form is created, press the “Publish” button. Then the form should be added to the page and submitted to create a Form Record, which will be displayed on the front end later.

Build JetFormBuilder Records Query

Now proceed to WordPress Dashboard > JetEngine > Query Builder to create a custom query for JetFormBuilder Form Records.

Hit the “Add New” button to build a query. 

In the General Settings section, complete the Name field and choose the “JetFormBuilder Records” option as Query Type.

In the JetFormBuilder Records Query, you need to select a Form to query its records. Feel free to add any other settings to the query if needed.

The query is completed. Now it can be saved by hitting the “Add Query” button.

Create Listing for JetFormBuilder Records Query

At this point, we can create a Listing template for the custom query in WordPress Dashboard > JetEngine > Listings. Select “Query Builder” as a Listing source, and pick the custom “Query for Form Records” that has just been created.

In the listing template, you can display the values from fields using dynamic widgets like Dynamic Field, Dynamic Image, etc. In the case of Form Records, some values from the fields can be shown using just dynamic widgets, but some can not, which is why we will explore how shortcodes can help in this situation.

To understand better why dynamic widgets like Dynamic Field do not cover this request completely, let us turn to Query Builder again.

If you enable the Preview results toggle in the custom query, you can see that the fields of the form are saved in the ‘jfb_fields’ property as an array. It means a “Get child element from object/array” Callback is needed to get to the values of these fields.

In the case of the ‘checkbox_field’ field, a second additional callback needs to be applied to output the options from its array as well.

The Dynamic Field widget does not have the opportunity to add multiple callbacks, but the shortcodes can handle them.

Output field types in the listing template

Let’s get back to the listing template.

The first field to show is ‘text_field.’ This field has a string value, which is why the “Get child element from object/array” Callback is enough to show its value using the Dynamic Field widget.

Proceed with the ‘checkbox_field’ field. As was stated earlier, it has an array as its value, so another callback is needed to show values from the array.

This is when the Shortcode Generator of the JetEngine needs to be used.

Use shortcode generator

In the WordPress Dashboard > JetEngine directory, you can see a Shortcode Generator tab, where the shortcodes can be created.

Firstly, select a “Meta Data” Source, and insert the name of the field from which the values need to be pulled in the Custom Object Field / Meta field / Repeater key field; it is ‘jfb_fields.’

Now switch on the Filter Field Output toggle, and add the first “Get child element from object/array” Callback. This callback lets us get to the values of the Checkbox Field.

But the values of the Checkbox Field are in the format of the array. This is why another callback is required to show the values in a more presentable format. 

Therefore, we need to add another “Checked values list” Callback. In this callback, we selected a glossary because the options in the Checkbox Field in the form were added by the glossary source.

The shortcode is ready now, so you can copy it from the bottom of the page by clicking the corresponding icon.

In the Listing template, the shortcode can be displayed using the Shortcode widget or Shortcode block if a listing is created in the Gutenberg editor.

Lastly, display an image from the ‘media_field’ field.

This media field has a URL as a value and, therefore, requires a “Get child element from object/array” Callback.

Also, the Customize field output toggle should be activated with the <img src=’%s’> Field format completed that can show an image by its link.

After copying the shortcode, you can insert it into the Shortcode widget or block.

By the way, these settings can also be created in the Dynamic Field widget.

The listing template is completed. Press the “Publish/Update” button. 

You can now display it using the Listing Grid widget on the needed page. 

Check the result; now Listing Grid shows the record from the JetFormBuilder Form Records.

Now you know how to create a custom Form Records Query and display JetFormBuilder Form Records in the JetEngine Listing template.

The Calculated field of JetFormBuilder is not limited to basic mathematical operations like addition, subtraction, multiplication, and division. It supports all the Math object methods, which helps perform advanced calculations with numeric values returned by form fields. The complete list of Math properties and methods can be found in MDN Web Docs. 

Below, we will cover several usage examples — rounding a number, finding min and max numbers from a row, and raising a number to a power. The described methods can be used with a numeric value returned by any of the JetFormBuilder fields. In our examples, we will use a Number field to store the numeric value.

• Rounding
• Rounding Up
• Rounding Down
• Finding the Largest and the Smallest Numbers
• Exponentiation

Rounding

The Math.round() method can be used to round the specified number to the nearest integer.

To apply this method in the Calculated field, use the below formula:

Math.round(%number_field%)

Insert the formula into the Calculated field to round a numeric value of another field.

As a result, a float retrieved from another form field will be rounded in the Calculated field.

Rounding Up

The Math.ceil() method returns the smallest integer greater than or equal to the specified number.

To apply this method in the Calculated field, use the below formula:

Math.ceil(%number_field%)

Insert the formula into the Calculated field to round up a numeric value of another field.

As a result, a float retrieved from another form field will be rounded up in the Calculated field.

Rounding Down

The Math.floor() method returns the largest integer less than or equal to the specified number.

To apply this method in the Calculated field, use the below formula:

Math.floor(%number_field%)

Insert the formula into the Calculated field to round down a numeric value of another field.

As a result, a float retrieved from another form field will be rounded down in the Calculated field.

Finding the Largest and the Smallest Numbers

The Math.min() method retrieves the smallest of several numbers. On the contrary, the Math.max() method is used to retrieve the largest of numbers.

To apply the Math.min() method in the Calculated field, use the below formula: 

 (Math.min(%number_one%, %number_two%, %number_three%))

For the Math.max() method, use this formula:

(Math.max(%number_one%, %number_two%, %number_three%))

Insert the needed formula into the Calculated field to find the largest or the smallest number from a row of numbers. 

In our example, we have three Number fields, each containing a specific number: 7, 3, 4, accordingly.

In the result, the Calculated field returns the value of 3 as the smallest number and the value of 7 as the largest number.

Mind that the Math.min() method will return 0 if at least one of the number fields is empty. To handle the cases where one of the fields might be null (empty), you should use the below formula instead.

 ( Math.min( %number_one%, %number_two%, %number_three% ) == 0 
    ? 
        ( 
            ( %number_one% + %number_two% + %number_three% - Math.max( %number_one%, %number_two%, %number_three% ) ) == 0 
            ? 
            Math.max( %number_one%, %number_two%, %number_three% ) 
            : 
            ( %number_one% + %number_two% + %number_three% - Math.max( %number_one%, %number_two%, %number_three% ) ) 
        ) 
        : 
        Math.min( %number_one%, %number_two%, %number_three% ) )

In this formula, using ternary operators, we check if either of the number fields returns an empty value. If one of the fields is empty, we adjust the final result so that it returns the smallest of specified numbers. To find more information on ternary operators, check our tutorial on How to Use Conditional Formulas in the Calculated Field.

If one of the values is null, the formula will find the lowest value from those specified.

Exponentiation

The Math.pow() method raises the first specified number to the power of the second number.

To apply this method in the Calculated field, use the below formula:

(Math.pow(%number_one%, %number_two%))

In the above formula, the ‘number_one’ value stands for the name of the form field that provides the base number; the ‘number_two’ value stands for the exponent. 

Insert the formula into the Calculated field to raise the value of the first specified field to the power of the second.

In our example, the first Number field contains the number 3; the second Number field contains the number 5. The expected result is 243.

That’s all; now you know how to use advanced math calculations with the help of the Calculated Field available in the JetFormBuilder plugins bundle.

With the help of the Glossary functionality, available with the JetEngine plugin, you can create forms without completing all the field values manually several times.

Let’s find out how to use Glossary as the data source for your JetFormBuilder form.
Initially, create a glossary in the WordPress Dashboard > JetEngine directory.

In the Glossary tab, ensure you have completed all the needed fields, and don’t forget to save the changes by pressing the corresponding button below your glossary.

Then, head to the WordPress Dashboard > JetFormBuilder > Forms page. Build a new form by hitting the “Add New” button, or hover over the desired item to see the “Edit” button and click it to proceed to the form editor.

As for now, we will edit the existing form. Here, we add a Radio Field, which will display our glossary options for selection.

Complete the block settings and mind filling in the Fill Options From field with the “Glossary” option. After that, select the built glossary in the corresponding field.

Adjust the rest of the form if needed, and press the “Publish/Update” button to save the form.

Go to the page where the form is located or place it wherever you need to use it.

As you can see on the page, the Radio field is now available in the newly built form. 

That’s it; the form is ready, and now you know how to build a JetFormBuilder form by using JetEngine Glossary as the data source for the form fields on your WordPress website.

This tutorial explains how to enable/disable adding comments to front-end forms using the JetFormBuilder plugin and change the comment status.

WordPress allows adding comments to posts/pages by default. But sometimes, there is a need to allow or disallow comments on some posts/pages from the front end. This tutorial details how to enable/disable adding comments to front-end forms using the JetFormBuilder plugin and change the comment status.

• Creating a Form
• Adding the Form to a Page/Post
• Allowing or Disallowing Comments for Posts/Pages

Creating a Form

Building the form

Navigate to the JetFormBuilder plugin tab of the WordPress dashboard. Press the “Add New” button to create the form.

Read How to Create a Form from this tutorial.

Adding fields

Add the name to the form (here, Comments.)

The Hidden Field block is added by default. Unroll the Field Value drop-down menu and select the Current Post ID option.

Find the Radio Field block and drop it down to the form. 

Press the “Manage Items” button of the Radio Field block to create the radio field with two manual options: allow and do not allow comments. Add the following labels and values of these options, respectively:

• for the allowing option: type Do Not Allow Comments in the Label field and closed in the Value field;
• for the disallowing option: type Allow Comments in the Label field and open in the Value field.

Press the”Update” button to save changes.

Navigate to the Settings tab of the Radio Field block and fill in the Field Name field (here, Discussion) and the Form Field Name field (here, _discussion).
The Radio Field block looks as follows:

Settings of the form

Navigate to the Post Submit Actions of the JetForm settings. Press the “Edit Action” button (the pencil icon). Apply the following settings:

• select the Posts option from the Post Type drop-down menu;
• select the Post ID (will update the post) option from the post_id subfield of the Field Map field;
• select the Post Comments Allowed option from the Discussion subfield of the Field Map field.

Press the “Update” button to  Save changes.
The Adding the Form Block in Gutenberg tutorial explains adding the different fields to forms.

Adding the Form to a Page/Post

Open the page or post to add the form (here, Page for Comments). Find the JetForm block to add the form to the page. Drag and drop the block to the page.

Navigate to the Settings tab of the JetForm block and select the name of the previously built form (here, Comments) from the Choose Form drop-down menu.

Allowing or Disallowing Comments for Posts/Pages

Settings to allow comments

Navigate to the Discussion tab of the JetForm block’s settings. The name of this tab corresponds to the text filled in the Field Name field (here, Discussion) while building the form (here, Comments).
Tick the Allow comment and Allow pingbacks & trackbacks options.

Save changes. Publish the page.

Allowing/disallowing comments

The front-end view of the page looks as follows:

Choose the Allow Comments option of the Radio Field block. Press the “Submit” button. It allows adding comments and activates the text field for comments.

Press the “Submit Comment” button to save the comment. 
Choose the Do Not Allow Comment option on the front end of the Radio Field block to disable adding.

That’s all about how to allow or disallow comments for posts or pages from the front-end forms.

Uncanny Automator is a plugin designed to facilitate the connection of plugins and apps, enabling the automation of WordPress website activity without coding. This plugin enables the seamless integration of JetFormBuilder forms with various apps, including Airtable, Google Sheets, Google Calendar, Instagram, Facebook, and more. A complete list of available integrations is on the Automator WordPress Plugin Integrations page.

Use cases include sending form data to Airtable and Google Sheets, registering users, setting CRM tags, and setting up notifications and email campaigns.

In this tutorial, we will show how to connect a JetFormBuilder form to any app with the Uncanny Automator (free version) using the example of Google Sheets.

Table of Contents:

• Build a Form
• Set Up a Google Sheet
• Create a Recipe in Uncanny Automator
  • Choose a recipe type
  • Select a trigger
  • Add an action
  • Use tokens
• Place the Form on the Page
• Test the Form

Build a Form

For our use case, we will build a Contact Form allowing users to leave feedback about the website.

To create a new form, go to WordPress Dashboard > JetFormBuilder > Add New. Insert one of the ready-to-use Patterns to save time and effort.

Now, the only thing left is customizing the existing form fields, and the “Send Email” post submit action.

Once ready, click the “Publish” button to save the form.The goal is to connect the form to Google Sheets to store all the submitted messages in one place.

The next step is to create a new spreadsheet, Google Sheets.

Set Up a Google Sheet

Set up a new spreadsheet in Google Sheets. In the spreadsheet, add all the necessary columns for storing user data, such as the user’s name, email, and message.

Create a Recipe In Uncanny Automator

Return to the WordPress Dashboard and move to the Automator > Add new tab.

Choose a recipe type

The fundamental unit of the Uncanny Automator WordPress plugin is a recipe. At the beginning of the recipe creation, there is a possibility to select one of the two types:

• Logged-in users — the recipe will be triggered by WordPress users who are logged in;
• Everyone — the recipe will be triggered by logged-in WordPress users and logged-out guests.

Select the “Everyone” option so any user can leave feedback.

After that, name the recipe and select the “JetFormBuilder” integration.

Select a trigger

In the Uncanny Automator plugin, a trigger defines when a recipe and its actions are executed. Triggers encompass a wide range of actions on a WordPress site, such as logging in, making a purchase, submitting a form with specific entries, and more. Every recipe in Uncanny Automator must have at least one trigger to function.

Uncanny Automator provides such Triggers for JetFormBuilder:

• Triggers for logged-in users:
  • a user submits a form;
  • a user submits a form with a specific value in a specific field (Uncanny Automator Pro).
• Triggers for everyone:
  • a form is submitted;
• a form is submitted with a specific value in a specific field (Uncanny Automator Pro).

Select the “A form is submitted” trigger. Then, choose the needed form from the drop-down list and hit the “Save” button.

After that, the trigger should automatically change its status from “Draft” to “Live.”

Add an action

An “action” in Uncanny Automator is the result of a recipe once the specified trigger conditions have been met. It represents what the plugin accomplishes after the triggering events occur.

In the Actions section, push the “Add action” button and select the “Google Sheets” integration. Be aware that it is necessary to connect the Google Sheets account if it hasn’t been done before.

With the Google Sheets integration, there are two actions available:

• Create a row in a Google Sheet — select this option to save each form submission in a new row;
• Update a row in a Google Sheet — select this option to update information in an existing row. This option is useful for the “Update post” or “Update user” types of forms.

Pick the “Create a row in a Google Sheet” option to save the values of every newly submitted entry in a new row.

After that, select the needed Drive, Spreadsheet, and Worksheet and hit the “Get columns” button to see the columns from the spreadsheet.

Use tokens

Certain actions in Uncanny Automator involve retrieving personal details and other variables from the WordPress database. These variables are referred to as “tokens.” 

The availability of tokens depends on the triggers used in a recipe. For instance, if a recipe has a form submission as a trigger, corresponding tokens are generated, such as the form name and the content of the form fields. This functionality allows transferring data from the form entry to a different application.

The Uncanny Automator plugin provides three types of tokens:

• Universal tokens — these tokens are universally accessible in every recipe and can be used to pass information about a user, a post, a date, and more;
• Trigger tokens — these are tokens that are specific to a particular trigger. For example, JetFormBuilder provides tokens that can fetch the data from the form fields;
• Action tokens — when an action is integrated into a recipe, tokens linked to its output become accessible for subsequent actions. For example, if an action generates a new post, the new post ID can be passed as a token to another action in the recipe.

Whenever there is a possibility of using a token in a field, an asterisk (*) icon appears to the right of that field. Clicking this icon will expand a menu displaying all the available tokens. 

Press the asterisk icon near the column value and click the “Contact Us Form is submitted” trigger.

Next, choose the corresponding form field, the value from which will be saved in the Google Sheets row.

After mapping all the needed values, push the “Save” button. The action status will change automatically from “Draft” to “Live.”

In the Recipe section, enable the toggle to change the recipe’s status from “Draft” to “Live.”

Now, the automation setup is completed, and we can proceed to testing.

Place the Form on the Page

Open the page where the form should be located in the Elementor editor and place the JetForm widget in the needed part of the layout.

If you use the Block Editor, repeat the same steps with the JetForm block.

For more information on how to add a JetFormBuilder form in any page builder, check our related “Adding the Form Block” article.

Test the Form

Navigate to the page where the “Contact Us” form was placed and submit it several times.

Check the Google Sheets. The form entries should be recorded in the appropriate columns.

That’s all. Now you know how to connect the JetFormBuilder form to Google Sheets and other apps using the free version of Uncanny Automator.

The Calculated field of JetForms supports ternary operators which allow for building complex conditional formulas. With the help of this feature, you can calculate the tax payable based on different levels of income and the tax rate in the threshold.

• How Does It Work?
• Describing the Case
• Building the Formula for Calculating Tax Rates

How Does It Work?

The Calculated field allows building complex conditional formulas thanks to ternary operators‘ support. Ternary operators (also called conditional operators) help us construct conditional logic between several parts of the calculated formula. 

The basic steps to build a conditional formula are described in the main tutorial on How to Use Conditional Formulas in the Calculated Field. Let’s put this knowledge to praxis and move on to the main use case of this article – calculating tax rates.

Describing the Case

Listed below are the necessary conditions for calculating tax rates in our example. The tax depends on the taxable income. 

• For income from 0 to $18,200, the tax equals zero. 
• For income from $18,201 to $45,000, the tax equals 15 cents for each dollar over $18,200. 
• For income from $45,001 to $120,000, the tax equals $5,000; additionally, the person should pay 30 cents for each dollar over $45,000.
• For income from $120,001, the tax equals $30,000; additionally, the person should pay 40 cents for each dollar over $120,000.

Building the Formula for Calculating Tax Rates

Add the necessary fields

Navigate to JetFormBuilder > Forms > Add New and open the Gutenberg editor. We need two fields for our purpose – a Number field where the user can input the taxable income and a Calculated field. Let’s name the Number field “taxable_income”. 

Prepare for building the formula

As outlined in our main tutorial on How to Use Conditional Formulas in the Calculated Field, a ternary operator takes three operands – a condition, an expression that needs to be executed if the condition is true, and an expression that will be executed if the condition is false. The primary condition is always followed by a question mark “?”, while the expressions are separated with a colon “:”.

In this specific use case, we combine several ternary operators in one formula to set several separate conditions.

• The first condition can be articulated like this: “If the “taxable_income” field contains a value less than or equal to 18200, then the final value 0; if not, the condition returns 0”.
• The second condition: “If the “taxable_income” field contains a value greater than 18200 but less than or equal to 45000, then subtract 18200 from the value of the “taxable_income” field and multiply by 0.15; if not, the condition returns 0”.
• The third condition: “If the “taxable_income” field contains a value greater than 45000 but less than or equal to 120000, then subtract 45000 from the value of the “taxable_income” field and multiply by 0.3 plus add 5000; if not, the condition returns 0”.
• The fourth condition: “If the “taxable_income” field contains a value greater than 120000, then subtract 120000 from the value of the “taxable_income” field and multiply by 0.4 plus add 30000; if not, the condition returns 0”.

Finally, all these conditions need to be summed to return a positive result.

Build the formula

Firstly, let’s build each conditional part of the whole formula separately. 

For the first condition, the conditional formula should be the following:

( %FIELD::taxable_income% <= 18200 ? 0 : 0 )

Second condition:

( %FIELD::taxable_income% > 18200 && %FIELD::taxable_income% <= 45000 ? 0.15 * ( %FIELD::taxable_income% - 18200 ) : 0 )

Third condition:

( %FIELD::taxable_income% > 45000 && %FIELD::taxable_income% <= 120000 ? 5000 + 0.3 * ( %FIELD::taxable_income% - 45000 ) : 0 )

Fourth and final condition:

( %FIELD::taxable_income% > 120000 ? 30000 + 0.4 * ( %FIELD::taxable_income% - 120000 ) : 0 )

The final result consists of all four conditional formulas summed:

( %FIELD::taxable_income% <= 18200 ? 0 : 0 ) + ( %FIELD::taxable_income% > 18200 && %FIELD::taxable_income% <= 45000 ? 0.15 * ( %FIELD::taxable_income% - 18200 ) : 0 ) + ( %FIELD::taxable_income% > 45000 && %FIELD::taxable_income% <= 120000 ? 5000 + 0.3 * ( %FIELD::taxable_income% - 45000 ) : 0 ) + ( %FIELD::taxable_income% > 120000 ? 30000 + 0.4 * ( %FIELD::taxable_income% - 120000 ) : 0 )

Thus, three of the four conditional rules return 0, and only one rule returns the needed value.

Check the result

After you finished designing the form, navigate to the page or template where you wish to locate it. Test your form by inputting different values.

Now, your form for calculating tax rates is ready. Play around with conditions and design formulas of any complexity.

The article on the Calculated Field provides an overview of the values you can use in the Calculated Field of JetFormBuilder. In that article, we gave examples of basic mathematical operations like addition, subtraction, multiplication, and division.

However, the calculated feature is not limited to these arithmetic operations — it supports more complex calculation operations that will help you build conditions within the Calculated Field’s formula.

More examples are also provided in the Advanced Math Calculations tutorial.

• How Do Conditional Formulas Work?
• Using Ternary Operators in the Calculated Field
• Combining Several Ternary Operators in One Formula

How Do Conditional Formulas Work?

The Calculated Field gives the possibility of building conditional formulas using ternary operators. In JavaScript, the ternary operator (also called the conditional operator) is an operator that takes three operands – a condition, an expression that needs to be executed if the condition is true, and an expression that needs to be executed if the condition is false:

condition ? exprIfTrue : exprIfFalse

The primary condition is always followed by a question mark “?”, while the expressions are separated with a colon “:”.

In this way, you can set one value for the Calculated Field if a specific condition returns true and another value if the condition returns false. Below, we will discuss how you can benefit from ternary operators and look into some usage examples.

Also, you can use arithmetic operators:

• ** — exponentiation operator;
• * — multiplication operator;
• / — division operator;
• % — remainder operator;
• + — addition operator;
• – — subtraction operator.

Relational operators:

• < — less than operator;
• > — greater than operator;
• <= — less than or equal operator;
• >= — greater than or equal operator.

Equality operators:

• == — equality operator;
• != — inequality operator;
• === — strict equality operator;
• !== — strict inequality operator.

Binary logical operators:

• && — logical AND;
• || — logical OR.

Additionally:

• ! — logical NOT operator;
• &&= — logical AND assignment;
• ||= — logical OR assignment.

Using Ternary Operators in the Calculated Field

Using complex calculations, you can make the value of the Calculated field conditional. The most common case is to adjust the output of the Calculated field to the value the user enters into a different field in the form. 

Let’s consider the following example. On a tour booking website, a filling form lets the users sign up for an additional paid excursion. The final price for a tour depends on the number of guests. The total price remains static if the number of people taking the tour is up to three. If the number of people exceeds three, the price increases by a set amount per every new person. This rule of price dependency can be built with ternary operators.

Let’s move to the form’s settings in the Block Editor. The first added block to the form is the Select field which has the name “number_of_visitors”. For the Select field, we added a set of options through the Manual Input source type. The list of options consists of seven items, each being a number from 1 to 7.

In the Select field, the user can choose the number of visitors joining the tour. The final value of the Calculated field will depend on this number.

The second added block in the Gutenberg editor is the Calculated field. Inside the input box of the field, we inserted this formula: 

%FIELD::number_of_visitors% <= 3 ? 50 : ( %FIELD::number_of_visitors% - 3 ) * 20 + 50

As a result, the user will pay $50 if the number of guests is less or equal to 3; if the number is greater than 3, the user will pay an additional $20 for each new guest. The formula looks complex, but let’s look at each part.

“%FIELD::number_of_visitors% <= 3” – This is the main condition. It defines which formula from those that come next will be executed. This part tells: “If the field with the name number_of_visitors is less or equal to the value of 3, then…”

“? 50” – This value will be set as the final value of the Calculated field if the previous condition returns true. We can continue the rule we articulated earlier in the following way: “If the field with the name number_of_visitors is less or equal to the value of 3, then the final price is 50”.

“: ( %FIELD::number_of_visitors% – 3 ) * 20 + 50” – This is the formula that will be used to calculate the final value if the previous condition returns false. The formula calculates the price the user will pay for the tour if the number of chosen guests is higher than 3. 

Take the number of visitors the user specified in the Select field and subtract 3 – this way we get the number of additional guests; then, multiply this number by 20 (“20”, in our case, is the price for each new guest); finally, add 50 to the total price, which is the price for the first three guests. 

Now, the rule can be articulated like this: “If the field with the name number_of_visitors is less or equal to the value of 3, then the final price is 50; otherwise (if the value in the field number_of_visitors is greater than 3), the price will be calculated from the formula of the third part of condition”.

Each part of the condition can use formulas, static numbers, form field values, and meta field values. 

Below is the final result on the front end. The price for the tour is $50 if the user selects three guests: 

Then, the price for the tour increases by an additional $20 for each new guest:

Combining Several Ternary Operators in One Formula

In the Calculated field, there is a possibility to combine several conditions to calculate the final value. Assume that the price for a certain product depends on the product’s quantity. In this case, we need to integrate several conditions into one formula. 

Let’s consider the following case. The price for products on an e-commerce website should be calculated by the following rules: 

$1 for 250 units.

$0.75 for 250 – 500 units.

$0.50 for 500+ units.

The main task is to combine several conditions: “The price for the product is $1 if the number of units is less or equal to 250; the price is $0.75 if the number of units is greater than 250 but less or equal to 500; the price is $0.50 if the number of units is greater than 500”. 

To build this type of form, add two fields to the block editor – a Calculated field that will contain the formula and a Number field that will be responsible for quantity input. Let’s name the Number field “quantity”.

That means the price in the Calculated field depends on the value of a Number field which has the name “quantity”. Finally, the solution is the following: 

( ( %FIELD::quantity% <= 250 ? 1 : 0 ) + ( %FIELD::quantity% > 250 && %FIELD::quantity% <= 500 ? 0.75 : 0 ) + ( %FIELD::quantity% > 500 ? 0.50 : 0 ) ) * %FIELD::quantity%

There are several conditions in the above formula.

“%FIELD::quantity% <= 250 ? 1 : 0” –  If the “quantity” field contains a value less or equal to 250, then the final value is 1; if not, the condition returns 0.

“%FIELD::quantity% > 250 && %FIELD::quantity% <= 500 ? 0.75 : 0” – If the quantity field contains a value higher 250 OR less or equal to 500, then the final value is 0.75; if this condition is not met, it returns 0.

“%FIELD::quantity% > 500 ? 0.50 : 0” – If the quantity field contains a value greater than 500, the final value is 0.50; if this condition is not met, it returns 0.

​Finally, all these three rules are summed. Thus two of the three rules return 0, and only one rule returns the needed value. Then, this value is multiplied by the quantity number – “* %FIELD::quantity%”​​

This example describes a possible way to combine several conditions in one calculated formula. For more examples, check our tutorial on Customizing Tax Rates with the help of ternary operators.

Global Form Macros is a JetFormBuilder feature that allows you to use the value of some field in the layout of another block.

You can add the <!--JFB_FIELD::field_name--> macro inside the HTML tag or add it to one of these attributes:

• href;
• src;
• alt;
• title.

Contents:

• How to Add the Form Macros to the Buttons Block
• How to Add the Form Macros to the Label of the JetForm Fields

How to Add the Form Macros to the Buttons Block

For instance, if you want to add the form macros to the Buttons block, it’s better to do it via the “Edit as HTML” button.

Paste the <!--JFB_FIELD::field_name--> macro into HTML before closing </a> tag. Change the field_name to the actual name of the field from where you want to get the value.

For example, we have entered the name of the checkbox field “kind,” where the user can check the kind of trip.

Proceeding to the front end, we can see the button in the form with the “Read more about” text.

If you check an option from the checkbox, it will be shown in the button. If you choose several options, they will be separated by commas. You can add the page link to the button with the information about all trips so that the users can find out about the needed trip.

How to Add the Form Macros to the Label of the JetForm Fields

If you need to place form macros into the label or description of some JetForm fields, we do not recommend you add it via inline editing because the symbols will be transformed, and you’ll get the invalid macro on the front end.

So, it’s better to enter the form macro in the Field Label. Feel free to enter as many form macros with the field names as you need. You can also mix form macros with the plain text like that: price per night: <!--JFB_FIELD::price--> $. It will look on the front end like that: price per night: 170 $.

With these settings, users can see the values at the end of the form they have chosen. Such settings can also be applied to the multi-step form so that users can see all their choices at the last step before submitting the form.

Such a way also works with the Action Button block since it cannot be edited as HTML. We have added the macro of the Text Field in the Field Label of the Action Button.

When users enter the text into the Text Field, the same text is shown in the Action Button on the front end.

That’s it. You know now how to add value from the JetForm field by using the global form macros.

• Upgrade the Form
• Multi-Step WordPress Form
• Multi-Step WordPress Form with Conditional Logic

Filling out a comprehensive form can be a tiresome process for users. 

Optimize the process by creating a multi-step WordPress form with a step indicator using the JetFormBuilder plugin. This free WordPress plugin allows customizing a form and making it more user-friendly.

Let’s learn some tips for making the form more convenient to fill out.

Upgrade the Form

• Group fields logically — divide the form fields into coherent sections with the help of the Form Page Break block. Name these steps accordingly;
• Use the progress bar — show a step indicator to notify users about the number of steps left until completing the form;
• Set visibility conditions — enable certain fields to display under the specified conditions;
• Optimize the “Next/Submit” buttons — enable the controls to make the form more user-friendly.

As an example, we created two forms that differ in the form break logic. One was made with just form breaks, while the other implies conditional visibility.

Multi-Step WordPress Form

Our first form allows site visitors to leave a website review. It contains a header and three pages. The first page is the “Start Page,” where users can fill out contact information. The second page is called the “Second Page,” where users will rate the website using the Radio Field. The third step is named the “Last Step,” where users can extend their feedback. At the top of each page is a required field for inputting the email address.

To add a multi-step WordPress form, proceed to JetFormBuilder > Add New.

Give a title to the form. For instance, we created a Website Feedback form with the corresponding name.

In the JetForm tab of the right sidebar, scroll down to the Form Settings section and toggle on the Enable form pages progress switcher. With the help of this switcher, a progress bar will be displayed on top of each step in the form.

There are three types of fields shown by default: Hidden Field, Text Field, and Action Button. Feel free to delete them if they are unnecessary in your case.

We deleted the Hidden Field and kept the Text Field. In this field, the user is expected to enter the email address, so we named the field “Email” and selected the “Email” FIELD TYPE. Above the Text Field, we added a Paragraph block and entered a message encouraging users to leave their email addresses. This part of the form serves as a header and is visible on every page of the form. You can put these two blocks inside the Columns or Flexible Container blocks to have more control over the layout of this section.

Next, we added the Form Page Start block, which indicates the start of the first form page. Everything above this block is regarded as a header. 

Don’t forget to enable the Is Required option near desired fields to make them mandatory.

After that, we started building the first page of the form. We added a Columns block under the Form Page Start block. In each column, we added a Text Field where the user can enter the name and surname.

It is the first logical part of the form, and thus, we divided it with the help of the Form Page Break. 

In the Form Page Break block settings, the Enable “Next” Button toggle can be enabled, and the NEXT BUTTON LABEL can be set to change the default name of the “Next” button. In this first Form Back Break block, we didn’t use the “Back” button, so we kept the Add Prev Page Button switcher disabled. The LABEL OF PROGRESS option can be filled in if you want to show the step labels below the progress bar.

Also, you can write the VALIDATION MESSAGE, which will be displayed if users don’t fill out the fields properly.

The first segment of the form is ready. The Form Page Break indicates that the part is complete, and the next section will be displayed after completing the first one. 

The second part of the form consists of the Radio Field and one more Form Page Break block. Instead of the Radio Field, you can use the Advanced Choices Field block to make its layout more appealing.

This time, we enabled both the “Next” and “Prev Page” buttons to lead users to the previous or next part of the form when clicked.

After all the customizations, we added one more part, which is the final, before submitting the form. This time, we put a Checkbox Field and Textarea Field blocks. Then, we placed a Columns block with two columns, and each column contains an Action Button. The first Action Button allows users to go to the previous step in the form, while the second one allows them to submit the form.

Below, we placed the last Form Page Break block.

In the Form Page Break settings, we turned off both the “Next” and “Prev Page” buttons and set only the “Last Page” LABEL OF PROGRESS.

Note that you can customize the fields in the WordPress block editor with the help of the free JetStyleManager plugin. Also, if you display the form using the JetForm widget of Elementor, you can customize the fields in the JetForm widget Style settings.

Additionally, you can use the Advanced Form Validation instead of the default validation to add custom rules and error messages for each form field so users can fill in fields only in the suitable format.

Once you are done with all the customizations, click the “Publish/Update” button. 

Before placing the form on the page, navigate to the WordPress Dashboard > JetFormBuilder > Settings tab and adjust the settings available for multi-optional forms in the Form Accessibility section.

Let’s add our form to the page and check how it looks.

Go to Pages > Add New or open one of the existing pages or templates. Now, we need to use a JetForm block. If you add the form in Elementor, use a JetForm widget. In other page builders, you can use a shortcode to display the form.

Choose a form that you have just created and customize its settings:

• FIELDS LAYOUT — choose how the label will be positioned relative to the input field. Select either the “Column” or “Row” option;
• REQUIRED MARK — type a symbol that will be displayed near the required fields. By default, it is an asterisk;
• FIELDS LABEL HTML TAG – here, you can select the HTML tag that will represent the field’s label. The available options are “DIV” and “Label”;
• SUBMIT TYPE — pick from the “Post Reload” and “AJAX” options. The second option will not reload the page after submitting a form, while the first one will;
• Enable form pages progress — toggle to add a step indicator to the form. Keep this option disabled if the step indicator is already enabled in form settings;
• ADDITIONAL CSS CLASS(ES) — put the supplemental CSS classes if needed.

When you are done editing, click the “Publish/Update” button. Now, you can check the form on the front end.

Note that when going to the next page, the email field stays on top of the page.

The WordPress multi-step form is ready. To make the form logic more complex, check the next chapter about creating a multi-step form with conditional logic.

Multi-Step WordPress Form with Conditional Logic

To build a multi-step form with conditional logic, head to the JetFormBuilder > Add New tab. 

We provide an example, while you can create any other form suitable for your needs.

We named the form and deleted the default Hidden, Text, and Action Button Fields since we don’t need them. 

The goal was to create a form to gather user feedback about the website. The form consists of three sections: the first to enter the contact information, the second section to enter the positive feedback, and the third multi-step section to enter the negative feedback. The second and third sections will appear conditionally – if the user decides to share the positive feedback, the second section will be displayed; if the feedback is negative, the third section will appear. To let users choose which feedback they want to share, the first section will contain a Radio Field.

Let’s build the first section. We added three Text Fields for user email, name, and surname, and one Radio Field. The fields can be separated into columns with a Columns block if needed. 

In this case, the Radio Field options were filled in manually. Feel free to use other sources from the Fill Options From drop-down menu.

We hit the “Manage Items” button and set the values as “yes” and “no,” as we need them to implement the conditional logic.

This part of the form is the main one. Depending on the answer given in the Radio Field, the following fields will be changed. Let’s build this logic with the help of a Conditional Block.

We added a Conditional Block to the page. Inside, we built the content of the second section that should appear if users select the “yes” answer in the Radio Field above. This section is divided into two steps.

Firstly, we added three blocks inside the Conditional Block: a Progress Bar, a Checkbox Field, and a Form Page Break block. These blocks constitute the first step in the form, where users need to fill the Checkbox Field. 

The Progress Bar block doesn’t require any configuration. In the Checkbox Field block, you can enter the options of your choice. 

Let’s take a closer look at the Form Page Break block settings. We filled in the LABEL OF PROGRESS in the Form Page Break settings to change the default Progress Bar label for the first step, hit the Enabled “Next” button toggle, and set a label to this button.

After we finished building the first step of the form, we proceeded to the second step. Below the Form Page Break but still inside the Conditional Block, we added a Progress Bar, a Textarea Field, and a Columns block with two columns. In each column, we inserted an Action Button block.

The left Action Button will lead users to the previous page, and the right Action Button will submit the form.

Now, we can move on to configuring the Conditional Block itself.

Firstly, we set the label for the last step of this multi-step section in the LAST PAGE NAME input field.

Then, we hit the “Conditional Logic” icon to set conditions for the Conditional Block.

We defined conditions for the “yes” option: we selected the Radio Field label from the FIELD drop-down menu, chose the “Equal” OPERATOR, and set the “yes” VALUE TO COMPARE.

After adjusting all the Conditional Block settings, we pushed the “Update” button.

Let’s add one more Conditional Block for the “no” value. If users decide to leave negative feedback, the form will present the content of this Conditional Block.

To complete the first part of this multi-step section, we added a Progress Bar, Textarea Field, and Form Page Break blocks.

We duplicated the Form Page Break block settings from the previous setup.

To build the second page in this section, we added a Progress Bar, a Paragraph, and two columns with Action Buttons, the same as previously.

We clicked the Conditional Block to set the LAST PAGE NAME and conditions.

We hit the “Conditional Logic” icon to open the corresponding pop-up.

We defined conditions for the “no” option: we selected the Radio Field label from the FIELD drop-down menu, chose the “Equal” OPERATOR, and set the “no” VALUE TO COMPARE.

We updated the Conditional Logic by hitting the “Update” button.

Note that you can customize the fields in the WordPress block editor with the help of the JetStyleManager plugin. Also, if you display the form using the JetForm widget of Elementor, you can customize the fields in the JetForm widget Style settings.

Additionally, you can use the Advanced Form Validation instead of the default validation to add custom rules and error messages for each form field so users can fill in fields only in the suitable format.

Once you are done with all the customizations, click the “Publish/Update” button. 

Before placing the form on a page, navigate to the WordPress Dashboard > JetFormBuilder > Settings tab and adjust the settings available for multi-optional forms in the Form Accessibility section.

We created a default WordPress page by going to the Pages > Add New tab.

Next, we placed a JetForm block onto the page. We chose a newly created form in the similarly named drop-down menu and adjusted all the following fields:

• FIELDS LAYOUT — choose how the label will be positioned relative to the input field using the “Column” or “Row” options;
• REQUIRED MARK — type a symbol that will be displayed near the required fields. By default, it is an asterisk;
• FIELDS LABEL HTML TAG – here, you can select the HTML tag that will represent the field’s label. The available options are “DIV” and “Label”;
• SUBMIT TYPE — pick from the “Post Reload” and “AJAX.” The second option will not reload the page after submitting a form, while the first one will;
• Enable form pages progress — toggle to add a step indicator to the form. Keep this option disabled if the step indicator is already enabled in form settings;
• ADDITIONAL CSS CLASS(ES) — put the supplemental CSS classes if needed.

When everything is ready, we hit the “Publish/Update” button and checked out the result.

Once the “yes” value is picked in the radio field, the form displays one set of fields.

If the “no” value is chosen, other fields are displayed.

Well done. Now you know how to build various WordPress multi-step forms using the JetFormBuilder plugin.

• Setting the JetFormBuilder Pro Addon
• Creating a HubSpot Developer Account
• Linking HubSpot Account with JetFormBuilder
• Setting the HubSpot as Post Submit Action in Forms

Setting the JetFormBuilder Pro Addon

Install and activate the JetFormBuilder Pro Addon. Navigate to the JetFormBuilder > Addons tab, select the HubSpot addon, and activate its license.

Navigate to the JetFormBuilder > Settings > HubSpot API tab and move the Enable OAuth 2.0 toggle.

Creating a HubSpot Developer Account

Go to the HubSpot website and press the “Create a developer account” button.

Select the “Create App Developer account” button.

Create a free developer account using your email: enter your email, the verification code sent, your password, name, and job role, and give your developer account a unique name.

After you’ve set these data up and signed in, you’ll start on the developer account homepage, where you can create your first app or a test account.

Specify the account type or skip this step.

Create the account you need – an app or a test account – by selecting the appropriate tab.

Here, the app was created. Manage the app settings or skip this step (here, this step is skipped).

Then, you will be redirected to your HubSpot account.

Linking HubSpot Account with JetFormBuilder

Return to your website dashboard and copy the Your Redirect URL link from the JetFormBuilder > Settings > HubSpot API tab of your site (here, https://findero.local/wp-admin/admin.php?action=jet_fb_hubspot_oauth).

Go back to your HubSpot account. Press the “Create app” tab.

Navigate to the Auth tab of your HubSpot account.

Paste the copied link to the Redirect URLs field of the Auth tab (here, https://findero.local/wp-admin/admin.php?action=jet_fb_hubspot_oauth).

Scroll the Auth tab of the HubSpot API site and locate the Find a scope field. Unroll the tabs (CMS, CRM, Settings, and Standard) to pick the settings you need. Press the “Save changes” button.

Scroll down the Auth tab of the HubSpot API site and copy the code/link in the Client secret and Install URL (OAuth) fields on the HubSpot site.

NOTE

The Install URL (OAuth) field link is available after selecting at least one required scope from the CMS, CRM, Settings, and Standard tabs.

Then paste these values to your site’s Client Secret and Install URL (OAuth) fields on the JetFormBuilder > Settings > HubSpot API tab.

Then click the “Authorize” button to log in via OAuth 2.0. Afterward, you’ll be redirected to the MyHubSpotApp page with the proposition to set the two-factor authentication.

Skip the proposition or set the authentication for further account usage.

If you have two or more HubSpot accounts, specify the necessary one from the list.

If the authorization is successful, WordPress will show the following text:

JetFormBuilder HubSpot Action: Your application is successfully authorized via OAuth 2.0

Setting the HubSpot as Post Submit Action in Forms

Open the required form, click the Post Submit Action section on the right panel, choose “HubSpot,” and click the pencil icon to edit the action.

Enable the “Global Settings” option. After that, choose the “API Key” or “OAuth 2.0” authorization type.

Press the “Sent Request” button. After you’ve chosen the type and clicked the “Send Request” button, you will see the complete list of the “HubSpot” action settings. Filling in most fields here is unnecessary for the proper work. The only required field is Email.

After setting the HubSpot action, press the “Update” button. When the user submits the form, the new subscriber will appear in the Contacts list of your HubSpot account.

That’s all about adding the HubSpot OAuth 2.0 functionality via Post Submit Actions of the JetFormBuilder forms.