Stand with Ukraine. Fight for freedom and democracy

Donate

Custom templates are another cool feature to customize forms view. Use JetEngine to build a custom item template and set it for any Form you fancy. In this way, the Form will be customized on the front end.

Before starting, make sure you have the following plugins installed and activated:

  • JetFormBuilder — build a form, edit the post submit actions, and add a captcha if needed;
  • JetEngine — create a CPT, add custom meta fields and taxonomies; 
  • Elementor — add the created form into the editor to finalize the customization, style up the page, and publish it. Or use the Gutenberg block editor, which is fully compatible with the JetFormBuilder plugin; it’s up to you.

Creating a Custom Item Template in Elementor

Since the custom item templates are not pre-made, you’ll have to build them manually.

Create a new listing

Go to WordPress Dashboard > JetEngine > Listings.

jetengine listing items

Click the “Add New” button to open a Setup Listing Item window.

custom post type listing pop-up

Make sure to pick the “Posts” as a Listing source, then select the post type to pull the metadata from; in our case, it’s the CPT post type. 

After that, enter the Listing item name and choose the Listing view. You can work either in Elementor or Gutenberg. Lastly, click the “Create Listing Item” button.

Right afterward, you’ll be redirected to the chosen webpage builder.

Build the listing in Elementor

First of all, select the desired layout for your new section. To do so, press the cross icon, then pick the desired structure:

section structure

Now, search for the Check Mark widget. Drag and drop it to the first column of the newly-created structure and choose the icon from the library or upload an SVG file.

default check mark settings
NOTE

Make sure to select icons for both unchecked and checked modes.

checked check mark settings

Then proceed to the left-side toolbar, press Style, and customize the icons’ appearance if needed.

You can adjust the Box Size, Icon Size, and Border Radius, set Background Color for the Default icon, and play around with the Border Type, Width, Color, and Box Shadow of the Checked icon.

Configure the dynamic fields

Let’s configure the second column. We’ll use the Dynamic Field widget since we need to pull the metadata about the Posts.

Search for the Dynamic Field widget and drag and drop it to the second column. To display the checkbox content, choose “Meta Data” as the Source and the needed field as the Meta Field.

dynamic field meta data source

Next, toggle on the Filter field output and use the “Checkbox field values” Callback.

checkbox field values
NOTE

You can also change the typography and font size to make your custom template pop.

Once you are satisfied with your custom item template, click “Publish.”

Add Template to the Form

Now, it’s time to set the template you’ve created for the form.

Choose and edit the form

Go to WordPress Dashboard > JetFormBuilder > Forms.

edit button next to the form

Find the form you would like to customize and click the “Edit” button.

Configure the field settings

In the newly-opened window, there will be field settings. Click on the field to add or edit it.

use custom template toggle
NOTE

The custom item templates can only be applied to the Radio or Checkboxes field types. You cannot set a custom item template for the rest of the field types.

Scroll down the settings until you see a Use custom template switcher. Tick it, and the new drop-down field will appear. Make sure to pick here the template you’ve created beforehand.

NOTE

This function will not work with the manual input, meta field, or glossary source.

Press the “Apply changes” button and then “Update the form.

Add form to the front end

After configuring fields settings and updating the form, check out how it looks on the front end.

form on the front end
NOTE

If you need to use the Radio field, you can make the same steps; just change the field type in the form.

That’s all; now you know how to build a WordPress custom template for Radio and Checkbox form fields options.

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

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.

rounding number in calculated field
NOTE

Remember to use the needed form field name instead of the ‘number_field’ value.

number field name to use for rounding

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

rounded value of a number 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.

rounding up number in calculated field
NOTE

Remember to use the needed form field name instead of the ‘number_field’ value.

number field name to use for rounding up

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

rounded up value of a number 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.

rounding down number in calculated field
NOTE

Remember to use the needed form field name instead of the ‘number_field’ value.

number field name to use for rounding down

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

rounded down value of a number 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. 

NOTE

Remember to replace the ‘number_one,’ ‘number_two,’ and ‘number_three’ values with the actual field names.

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

number fields to find the smallest and largest number

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

finding the smallest and the largest number in calculated field

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.

finding the smallest and the largest number where one of the numbers is null

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.

setting up exponentiation formula in calculated field

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

raising a number to a power with calculated field

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.

jetengine dashboard glossaries tab

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.

glossary created with jetengine plugin

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.

jetformbuilder forms

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

NOTE

Except for the Radio Field, you can use Checkbox Field or Select Field blocks to display glossary options.

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.

radio field with glossary source

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. 

jetformbuilder form on front end

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.

In this tutorial, we’ll figure out how to redirect our form to Thank you page with the help of the JetFormBuilder plugin and WooCommerce Cart & Checkout Action addon.

Install and Activate Add to Cart & Redirect to Checkout Addon

So the first step will be the installation and activation of the addon. 

For this, navigate to WordPress Dashboard > JetFormBuilder > Addons and find the “WooCommerce Cart & Checkout Action” addon in the All Available Addons section. Click on the “Install Addon” and don’t forget to press the “Activate Addon” button.

Also, please, make sure that you already have the WooCommerce plugin installed and activated.

install woocommerce cart and checkout action addon

Create an Order Submission Form

When we are done with the first step, let’s create a new form by moving to JetFormBuilder > Forms and pressing the “Add New” button.

create form in the jetformbuilder directory

Add as many fields as you need because later, we will display the submitted info on the Thank You page.

fields in the jetformbuilder form

WooCommerce Cart & Checkout Action Settings

In the menu, find the Post Submit Actions section. Click on the “New Action” button and select the “Add to Cart & Redirect to Checkout” option from the list.

add to cart action in the jetformbuilder form

Click the pencil-shaped button to open a settings pop-up. In the action settings, we need to connect the WooCommerce checkout fields with the corresponding form fields. Let’s resume all action options:

add to cart action in the jetformbuilder form
  • Get product ID from. This field contains two options —“Form Field” and “Manual Input,” which can help to determine where the form will get the product ID from. By selecting the first option, ID will be pulled dynamically from the corresponding Form Field. With “Manual Input,” we can specify ID manually;
  • Product ID field / Input product ID. Depending on the previous step selection, here, you can select the corresponding Product ID field from your form or input the Product ID manually;
  • WooCommerce Price field. In this dropdown, you need to select a field that stores the total price. If the form field is left empty purposefully, the price will be received from the post meta value;
  • Heading for Order Details. Type in the title that you want to show before the order data on the Checkout page;
  • WooCommerce order details. By clicking on the “Set up” button, you can configure a list of custom fields that will be displayed on the Thank You page and during the order preview in the dashboard. To put it otherwise, you can edit the form metadata here, which means that these order details will be the same for all Redirect to Checkout actions within one particular form. Let’s check out the settings:
    • Safe deleting. This toggle is active by default and prevents you from deleting items unintentionally. When it is on, the item will be only removed after you confirm that you need to remove it;
    • Label. You can provide the field label here;
    • Select form field. Pick the corresponding form field that you are willing to show on the Order Details list;
    • Add new item. Allows you to add another custom field;
    • Update. Click this button to save the changes and return to the action edit window;
    • Cancel. Click this button to return to the action edit window without saving the changes.
woocommerce order details set up window
  • WooCommerce checkout fields map. Here, you can connect the WooCommerce checkout fields to the corresponding form fields. By doing so, you get a partly pre-filled form after being redirected to the Checkout page.
NOTE

This addon allows adding just ONE item/product to the cart and redirecting the user to Checkout. Also, keep in mind the reload method. If you choose “AJAX” in the form settings, the redirect action will be executed after ALL post-submit actions only. If you select “Reload,” the redirect will happen immediately.

Redirect to Thank you Page

After everything is set and done, let’s add the form to the Single Product page and test it.

live form on front end

Fill in all info and press the “Proceed to Checkout” button. Then, we’ll be redirected to the Checkout page, where we need to add our billing and shipping information and place an order. As we added all form fields into Woocommerce order details, we can see them all here.

checkout page on the front end

Right after we place an order, we can see Thank You page that also contains all the data we submitted during the form.

ready thank you page

That’s all; now you know how to redirect the JetFormBuilder form to WooCommerce Thank You page 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

Building the form

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

adding new 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.

hidden field settings

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.
manual options settings

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:

radio field block settings

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.
jetform post submit actions settings

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.

jetform block icon

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.

jetform block settings

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.

allowing comments settings

Save changes. Publish the page.

Allowing/disallowing comments

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

front end view of page with jetform for comments

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.

comments field

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.

page with dissallowed comments

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

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?

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

building the formula for calculating tax rates in gutenberg

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.

calculating tax rates with jetforms

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