Daria Akshonova, Author at FormBuilder

Posted on March 27, 2023April 28, 2023 by Daria Akshonova

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.

Creating a Custom Item Template in Elementor
Add Template to the Form

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.

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

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:

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.

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.

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

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.

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.

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.

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.

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

Posted on March 9, 2023March 9, 2023 by Daria Akshonova

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.

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.

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

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.

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.

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.

Posted on February 13, 2023February 13, 2023 by Daria Akshonova

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.

Posted on February 10, 2023February 13, 2023 by Daria Akshonova

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
Create an Order Submission Form
WooCommerce Cart & Checkout Action Settings
Redirect to Thank you Page

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.

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:

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

Redirect to Thank you Page

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

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.

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

That’s all; now you know how to redirect the JetFormBuilder form to WooCommerce Thank You page on your WordPress website.

Posted on January 25, 2023January 25, 2023 by Daria Akshonova

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:

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.

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.

Posted on July 20, 2022July 20, 2022 by Daria Akshonova

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

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.

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