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.

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?

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.

overview of the fields in a jetformbuilder form

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.

manual input options of the select field

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
conditional formula in the calculated field of jetformbuilder

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: 

using ternary operators in jetformbuilder to set the price

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

the price in the calculated field depends on the select field

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%
combining several ternary operators in the calculated field

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.

Build a WordPress form with the help of JetFormBuilder and its premium PayPal Recurring Payments addon.

Table of contents:

What PayPal Recurring Payments PRO Addon Does

PayPal Recurring Payments addon is a PRO feature available as a part of the JetFormBuilder plugin. Let’s find out how to adjust the recurring PayPal payments on the WordPress website step by step.
PayPal is one of the most used payment systems globally; with its help, you can receive payments from all over the world for any services or goods you provide.

Addon functionality:

  • Recurring payments. Set payments that will be charged automatically on a monthly, yearly, or any other basis;
  • Convenient subscriptions dashboard. Look through the available subscription details;
  • Refunds. If there is a situation when the costs should be returned to the user, you can do it without an effort;
  • Suspend or cancel subscriptions. Set the needed status for the user subscription right in the dashboard.

Install Addon

Head to WordPress Dashboard > JetFormBuilder > Addons. Among all the available items, find the PayPal Recurring Payments and press the “Install Addon” button.

install paypal recurring payments addon

Then don’t forget to activate the addon to get access to all of its features. 

To do so, proceed to WordPress Dashboard > Plugins and find the installed addon. Hit the “Activate” button.

installed plugins
NOTE

The addon should be installed and activated on the remote website. It is because PayPal sends information about the made subscriptions and payments that is possible only if the site is located on remote hosting.

How to Create a Subscription Plan

Initially, log in to your PayPal Developer account. Hover over the Pay & Get Paid section to see the available pages. The Subscriptions page is the one we need.

paypal pay and get paid dropdown menu

So, here we can see the PayPal subscription plans in the samely named tab. Click on the “Create Plan” button to build a new one.

manage subscriptions page

If you have already built some plans before, they will be suggested to you as options for selection. 

Or, press the “Create a subscription product” button to set a plan from scratch.

choose the subscription step

Fill in the suggested fields that correspond to the info about the product you will provide in a subscription.

the first part of the choose product step

You can complete the fields or leave some empty as they are not obligatory. Hit the “Next” button to proceed to the following step.

the second part of the choose product step

You can see the same window displayed before, but now the list includes the item we have just added. Select it and click the “Next” button.

new subscription product added

This step is one of the most important for customization. Pick the pricing option that is the most preferable for the subscription plan you create.

Then push the “Next” button once again.

create plan step

Give a name to the PayPal subscription plan and write a description. Click the “Next” button to continue the setup.

subscription plan description step

Adjust the settings concerning pricing. Specify the currency and check the other options available.

the first part of the pricing step

Don’t forget to specify the price in the corresponding field and decide how it will be charged. Hit the “Next” button to review the plan you have just customized.

the second part of the pricing step

It is the last step, now check the details and push the “Update” button next to the information if it needs to be edited.

the first part of the review step

Once done, hit the “Turn Plan On” button to make the plan live.

the second part of the review step

How to Create a Form with Plans

Before building the form, ensure that the PayPal gateways are activated for your website. Open the WordPress Dashboard > JetFormBuilder > Settings directory and check the Payments Gateways settings.

Toggle the Enable Gateways switcher. Optionally, you can also activate the Enable Test Mode feature.

Also, mind filling in the following Client ID and Secret Key fields. Complete them with the corresponding data and hit the “Save” button.

payment gateways settings

Go to WordPress Dashboard > JetFormBuilder > Add New. Give a title to the form and delete the default fields if you don’t need them.

form with default fields

Add all the desired fields to the form. For instance, our form includes a Hidden Field, several Text Fields, and one Action Button.

form fields added

Navigate to the Post Submit Actions tab and select the “Save Form Record” option from the available drop-down list. Otherwise, the PayPal Checkout settings will not be active.

Also, click on the pencil-shaped button to edit the action. In the appeared window, you can enable the “Store the IP address and other request headers” that will save the user’s IP address and User Agent data.

save form record settings

The “Edit” button next to the enabled PayPal Checkout becomes active. Press it to get to the settings.

gateways settings tab

Enable the Use Global Settings toggle to inherit the Client ID and Secret Key you have entered earlier in the JetFormBuilder settings.

Or, if you haven’t done it before or need to substitute data, you can do it right in the following fields.

Mind setting the Gateway Action by selecting the “Create a subscription” option from the drop-down menu. 

Push the “Sync Access Token” button to synchronize the data.

use global settings toggle enabled

As you see, the access token data is now updated. 

Select the needed option in the Subscription Plan Field. Here you can choose one of the fields you have added to the form or pick a “Manual Input” option. Now the last mentioned option is our case.

So as we have picked manual input, we need to specify the Subscription Plan we built earlier.

As for the Quantity field and Manual input of quantity fields, we leave them with the default values entered because, in our case, we don’t need to specify a quantity.

Or, type “1” in the Manual input of quantity field, and it will work in the same way.

subscription plan settings

Scroll down to available macros and fill in the messages shown to the user in the specific cases.

Click on the “Update” button to save the adjusted settings.

That’s it for the form; now, you can hit the “Publish” button.

macros list and messages

Place a Form on the Page

You can place the form on the needed page or in the pop-up. Let’s take a look at the second case.

Navigate to WordPress Dashboard > JetPopup > Create New Popup. Give a title to the pop-up and push the “Edit with Elementor” button to open the Page Builder.

jetpopup create popup

Add the needed widgets to the pop-up and search for the JetForm one.

jetform widget in a pop-up
  • Choose Form — select the JetFormBuilder form you have just created;
  • Fields Layout — pick how the fields will be displayed, in a column or a row;
  • Required Mark — change the default mark for the obligatory fields if desired;
  • Fields label HTML tag — define the HTML tag used for the label of the fields;
  • Submit Type — select whether the page will be reloaded or the AJAX type will be applied once the form is submitted;
  • Enable form pages progress — activate the toggle if you have used Form Break Field in the form.

Publish the achieved result and head to the page editor where you want to place the button, which will lead to the pop-up. You can edit the existing one or create a new page. Once again, there are no limits; you can build a page both in Elementor and Gutenberg.

Form in Elementor

Add or search for the Button widget. Open the Advanced tab and find the needed item in the Attached Popup selector.

That’s it for the page editor, press the “Publish/Update” button and open the front end page.

button pop-up

Form in Gutenberg

As the JetPopup plugin is not available for Gutenberg, you can add a form there with the help of the JetForm block.

The settings presented here are the same as in Elementor.

jetform in gutenberg

We press the button to which we have attached a pop-up to see the form.

relaxing set on the front end

Complete the form with the required information and submit it by pressing the button below.

pop-up with a form

The user will be redirected to the PayPal payment page. Now log in to the account and select the bank card if needed. Press the “Continue” button.

paypal choose a way to pay

Check the provided info and press the “Agree & Subscribe” button.

paypal ship to window

Let’s check the subscription status by heading to WordPress Dashboard > JetFormBuilder > Subscriptions.

NOTE

The payment status may be updated several minutes after the payment is actually made.

The new subscription info is right here. We can also see that its status is set to active.

If we hover over the item, we can spot the “Suspend” and “Cancel” buttons. We will return to these features later. 

Open the created subscription to see additional details about it.

jetformbuilder subscriptions

Look at the several blocks presented here. It is Payer Info, Payment Shipping, Subscription Details, and not less critical Related Form Record.

the first part of active subscription details

One more section available is Notes. Here you can see the messages about subscription status changes or add your note by completing the field and pressing the “Add Note” button.

the second part of active subscription details

You may also notice the “Suspend” and “Cancel” buttons here.

How to Suspend a Subscription

Let’s take a look at the ability to suspend the subscription. Press the “Suspend” button.

Specify the reason or leave the default value and push the “Suspend Subscription” button.

suspend subscription window

Or, there is another way to suspend the subscription. You can do it right through the PayPal account. Head to the Subscriptions tab and find the needed subscription.

Press the three dots shaped button and hit “Pause Subscription” there. From now on, the subscription will be paused.

NOTE

If you suspend the subscription via PayPal, you need to wait a couple of minutes before the status will change on the WordPress website.

paypal subscriptions tab pause

Check the status; now it is changed to “Suspended.”

suspended subscription

How to Activate a Subscription

The subscription can be reactivated if needed. However, you can do it only from the PayPal account.

Click the “Activate Subscription” button next to the item to enable the subscription once again.

paypal subscriptions tab activate

How to Cancel a Subscription

Besides, you can discontinue the subscription. Press the “Cancel Subscription” button in the PayPal account.

paypal subscriptions tab cancel

Or, you can cancel the subscription from the WordPress Dashboard > JetFormBuilder > Subscriptions section.

NOTE

If you cancel the subscription, it can not be activated once again.

cancel subscription pop-up

How to Make a Refund

A refund can also be made via PayPal. Head to the Activity > All Transactions and find the “Refund” button next to the received payment. Click on it to see the refund details.

paypal refund button

Specify the total of the refund in the Total Refund Amount. Optionally, you can fill in the Invoice Number and leave the Note to Buyer.

paypal issue refund window

That’s it; now you know how to use the PayPal Recurring Payments addon available with the JetFormBuilder PRO plugin.

Create a Stripe payment form with the help of one of the JetFormBuilder PRO addons, Stripe Payments

What Stripe Payments PRO Addon Does


Stripe Payments is a JetFormBuilder addon that links JetFormBuilder and JetEngine forms to Stripe’s software, allowing you to carry out any payments online via Stripe Gateway.

With the help of this addon, your clients will be able to pay for product orders, all sorts of specialty services, tickets to various events, and so on. Stripe Payments will also come in handy if you offer booking and rental services.

Addon Functionality:

  • Stripe Gateway
  • AJAX redirect to Checkout
  • Actions before & after payment

How to Create a Stripe Payment Form


Before we begin, 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 free — add the created form into the editor to finalize the customization and style up the page. Alternatively, you can use Gutenberg block editor; it is fully compatible with the JetFormBuilder plugin.

1. Add Custom Post Type


Proceed to the WordPress Dashboard > JetEngine > Post Types directory. Add a new custom post type by pushing the “Add New” button or open one of the previously created CPTs.

custom post type

Once you open the custom post type editor and adjust the General Settings, scroll down to the Meta fields tab.

As your form will include fields for completing, some of them will repeat the CPT meta fields you edit here. That’s why you need to set up the potential form fields.

post type meta fields

After implementing the changes, press the “Add/Update Post Type” button.

2. Create New Form


Before we start, let’s check the Payments Gateways settings by navigating to WordPress Dashboard > JetFormBuilder > Settings

Here you can activate the Enable Gateways toggle to have the possibility to work with payments. 

The following Stripe Gateway API section includes two Public Key and Secret Key fields, which should be completed with the corresponding data from your Stripe account.

Press the “Save” button after you fill in all the fields.

enabling stripe gateway api

The following form will allow the user to register and enroll in an online course. 

Go to WordPress Dashboard > JetFormBuilder > Add New.

creating a new form

Give a title to the form and move on to the default Text Field.

Change the Field Label and Form field name values to “Username” and “user_name” accordingly.

text field name

Hit the plus-shaped button to add one more Text Field block for email.

Fill in the Field Label and Form field name accordingly, and don’t forget to select the right field type in the Field Settings.

field for email

There will be two more fields for the password; however, you are free to add any field you want.

password field

To store the price for this particular course and allow the form to carry out the payment, we need to create a field for the price.

To do it, click on the “Add Block” button and select a Hidden Field. Change the Form field name to “Price” and set its value to the “Manual Input” in the Field Settings.

price field

Enter the needed price in the Value field bar.

By the way, you can make the price field more secure by turning off the Render in HTML option. This way, a Hidden field will be invisible in the HTML markup.

price value and render in html

Finally, change the button label, and let’s proceed to the form settings.

3. Set Up Post-Submit Actions

You must set specific actions to make a Stripe Payment form work properly. 

Firstly, a Store Form Record action will be needed to enable the “Stripe Checkout” settings option. This one is crucial, as it stores the form submission data and the payment status. 

Secondly, you will need to add post-submit actions that will be performed after the form is submitted.

Thirdly, you will need to set up the Stripe Checkout settings.

Open the JetForm tab and scroll down to the Gateways Settings section. Check the Stripe Checkout radio button.

enabling stripe checkout

As this option needs a “Store Form Record” action to be added, proceed to the Post-Submit Actions section and unfold it.

configuring save form record

Click on the “Edit Action” button. The settings window contains only one switcher – the Store the IP address and other request headers switcher. Enable it if you want to save the user’s IP address and User-Agent data.

save form record settings

The action doesn’t require any further configuration – on the form submission, it will store the form entry and the payment status information on the Form Records Page. Don’t forget to hit the “Update” button to save the action’s settings.

Now, you can add other post-submit actions to the form. For example, you could add the Insert/Update Post action to create a new post.

adding insert update post action

Click on the “Edit Action” button. In the Post Type field, select the custom post type you’ve previously created and set the Post Status to “Published.” You will find more information on this action in the “Insert/Update Post” action tutorial. 

Don’t forget to hit the “Update” button before closing the window.

insert update post settings

If you want to allow the users to register on the website, add the Register User action and set it up.

register user action

Add other actions by clicking the “New Action” button if needed and go back to the Gateways Settings section.

Now we can press the “Edit” button under the “Stripe Checkout” option and find out about all the fields we need to complete in the Stripe Checkout Settings.

stripe gateway settings
  • Use Global Settings — toggle it on to pull out the Public Key and Secret Key if you have entered this information in the JetFormBuilder > Settings > Payments Gateways directory;
  • Public Key — complete this field with the Client ID that you can find in your PayPal account;
  • Secret Key — fill in the Secret Key attached to your PayPal account;
  • Gateway Action — here, you can choose the payment scenario. Select the “Pay Now” action to enable further settings.

To further manage the Stripe payment settings, click the “Sync Access Token” button. Once the Access Token is updated, you will get access to more gateway settings.

updating access token
  • Currency Code — add the needed global currency code.
  • Price/amount field — you can choose a form field price from the fields list here.

Lastly, adjust the Payment success/failed messages and update the settings to save all the completed data. 

4. Set Up Action Events

Now, it is time to configure the scenario that will be performed before payment is processed, on successful payment and the failed payment. To do this, we need to give the post-submit actions certain Events.

For example, you can choose to create a post before the payment is processed, register the user after successful payment, and send an email if the payment failed.

settings events for post-submit actions in a jetformbuilder form

Click on the “Edit Conditions and Events” button to add action events under the needed post-submit action.

edit conditions and events

In the popup, proceed to the Events Match tab. Select one or several events from the dropdown.

list of action events in a jetformbuilder form
  • DEFAULT.PROCESS – this is the moment when actions are processed. The current event will trigger the post-submit action before the payment gateway.
  • BAD.REQUEST – this event is executed after request processing in case some of the fields in the form return errors. For example, the action will be triggered if the user uploads a file to the Media field in the wrong format or if the user exceeds the allowed number of files to upload. This event bypasses the DEFAULT.PROCESS event. 
  • DEFAULT.REQUIRED – this event is executed in any case. It is the last triggered event before the form response is submitted. The event runs even in case some of the other post-submit actions are not processed successfully. Note: if you set the DEFAULT.REQUIRED event to several actions and one of your actions is the Store Form Record action, make sure to put the Store Form Record action the last in the row. 
  • GATEWAY.SUCCESS – this one is executed after the user passes the checkout on the side of the payment system; if a payment is successful, the action will be triggered.
  • GATEWAY.FAILED – It is performed when the user returns from the checkout page of the payment system without making a payment.

Note that the Store Form Record action does not require any Event

Now that you have added Events to the post-submit actions, don’t forget to make the necessary fields in the form required.

required fields

Push the “Publish/Update” button on the top of the form to publish the final result.

Add the Form to a Page in Elementor


Now decide where you want to place the newly built form. In the described case, we will place the form on a separate page.

So, we navigate to WordPress Dashboard > Pages. Open an existing page or create a new one and edit it with Elementor.

Customize it according to your needs and, right in the editor, look for the JetForm widget. Select the form you have just created in the Choose Form field.

jetform settings

Proceed to the next tab and style the form, so it matches your website’s design.

styled form

Add the Form Block in Gutenberg


JetFormBuilder works not only with the Elementor page builder. This plugin allows adding the form block using Gutenberg as well.

Open the page in the default WordPress Editor and add a JetForm block.

jetform block in gutenberg

Complete the Form


Open the page where you have placed the form on the front end.

As you can see, the page looks right as we adjusted. Complete the fields and press the button you have set as a submit one.

stripe form payment

Once the obligatory fields are completed correctly, the submitted form will redirect you to the Stripe payment page.

Here the user can fill in all the details needed for successful payment.

stripe payment page

Now you know how to adjust the form with the convenient Stripe payment using the JetFormBuilder plugin.

The Repeater Field can be an advantageous option for your form when content needs to be repeated. One can’t deny that the ability to add as many fields as you need dynamically is really handy when it comes to similar data. Let’s look at how to add new fields to book additional places on tour just with one button click. 

Let’s begin by proceeding to JetFormBuilder > Add New to create a form from scratch. For example, we will build a booking form with the repeater field that lets users register as many travelers as needed.

Initially, we delete the default Hidden Field, Text Field, and Action Button to avoid getting confused.

default form in gutenberg

Next, we give a title to the form and add general fields to create a canvas. Among them are Hidden, Heading, Date, Text, and Radio fields.

booking form in jetformbuilder

Then add the essential part of the form, the Repeater Field. Adjust the settings according to your demands.

Hit the plus-shaped button to add the first block to the Repeater.

repeater field general settings

We begin with the Heading Field to name the proceeding section.

heading field in the repeater

Then we add a couple of Text Fields specifying the information about the traveler.

text fields in the repeater

And the final fields we create in the Repeater are the Radio Field and one more Text Field.

Besides, don’t forget to change the button’s label located under the fields placed in the Repeater.

radio and text fields in the repeater

Once done, we’ll add an Action Button and two more Hidden Fields to complete the form. One represents the current post title.

current post title hidden field

And the other one’s Field Type is selected as “Current Post Meta.” Here the Meta Field to Get Value From is also specified. 

current post meta hidden field

Though don’t forget to adjust the JetForm settings. Especially, pay attention to the Post Submit Actions. Set the needed amount of actions taken once the form is submitted.

For instance, we add three post-submit actions, Insert/Update Post, Send Email, and Redirect to Page.

Finishing with all the settings, mind pressing the “Publish” button to make the form live.

jetformbuilder post submit actions

Head to the page on which you want to place the form. For instance, we will add the form to a single page. To do so, we open WordPress Dashboard > Crocoblock > Theme Templates and hit the “Edit” button that appears next to the needed template once we hover on it.

Mind that you can use both Gutenberg and Elementor for editing.

Moreover, you can add a new template by pressing the samely-named button.

NOTE

You can also add the form to the pop-up if the JetPopUp plugin is installed and activated.

crocoblock single templates

Find the JetForm block/widget, place it on the page, and work on the settings.

Press the “Update” button once the changes have been applied.

jetform settings in elementor

Or, look at the template made with Block Editor. The settings here are pretty much the same.

jetformbuilder form in gutenberg

Check the form on the front end. You can also observe the fields we have added to the Repeater.

booking form on the frontend

And after them, there is a button that duplicates the fields once the button has been pressed.

new repeater fields

That’s it; the fields can be repeated as many times as needed. Now you know in which cases and, most importantly, how to add the Repeater Field to the JetFormBuilder form.