Category: Advanced Features

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.

• 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 a possibility to build 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 will look into some usage examples.

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.