Automated payments are no longer a fancy; it’s a necessity. Using the JetFormBuilder plugin’s functionality, you will be able to add the desired payment methods to your website. In this tutorial, you will learn how to activate the WordPress payment gateway option, add one to the form, and customize its settings.

How to Enable the Payment Gateways Option

Before JetFormBuilder v1.2.1, the WordPress Payment Gateways for both JetEngine and JetFormBuilder had to be set up manually. You were supposed to go to WordPress Dashboard > Appearance > Theme Editor, click on the functions.php file in the right sidebar, and add the filter:

add_filter( 'jet-form-builder/allow-gateways', '__return_true' );
adding a gateways filter to the kava child theme

There is a much more convenient way to enable the WordPress Payment Gateways option with the latest update. Proceed to WordPress Dashboard > JetFormBuilder > Settings, locate the Payments Gateways tab, and click on it. 

Inside, you will see the Enable Gateways toggle switch. Once enabled, this option takes precedence over the manually added allow-gateways filter. This means that new users who haven’t enabled the gateways yet won’t have to alter the child theme file in any manner. 

For those users who had already added the filter by hand, there is no need to remove it from functions.php – the gateway will still be working. Turn the Enable Gateways toggle on to activate the functionality.

payments gateways settings in the jetforms settings

Below it, you will see another toggle – Enable Test Mode. Once enabled, this option takes precedence over PayPal’s sandbox-mode filter. Again, if you had that filter added to the code, it would continue working. So far, this option works for the PayPal payment system only.

Also, the Payments Gateways tab will output all the payment integrations you have added. By default, there is only one payment system – PayPal. All the new ones will land below it. 

After you finish the Gateway activation, a new settings section called Gateways Settings will appear in the WordPress form editing interface. To find it, go to WordPress Dashboard > JetFormBuilder > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section.

paypal gateaway settings

Now, let’s go through the section settings.

  • None — when selected, this option means none of the available checkouts will be attached to the current form; 
  • PayPal Checkout — select this Radio button to create a connection between the PayPay checkout and the form you are currently editing; 
  • Stripe Checkout — if you want to connect the JetFormBuilder form to Stripe’s payment software, select this option;
  • Edit — a button with a wrench icon opens the additional checkout settings pop-up window.

How to Configure the PayPal Gateway

To set it up correctly, you need to register your PayPal app and receive the Client ID and Secret Key for your authentication.

How to Obtain the PayPal API key

Go to the PayPal developer’s website and hit the “Log Into Dashboard” button. If you already have an account, log into it. Otherwise, create one. 

paypal account creation form

Please note that for a non-test form, you need to switch from “Sandbox” to “Live” in the PayPal Dashboard > My Apps & Credentials section, as stated in the official PayPal Developer tutorial.

sandbox and live toggle switcher on paypal developer page

For a form to work correctly in a live environment, set up the appropriate API credentials (Live or Sandbox, the instructions are in the Get started with PayPal Developer tutorial) and indicate a proper currency code (the list of codes can be found on the Country Currency Codes page).

sandbox account creation pop-up window

Now, go to Dashboard > My Apps & Credentials and click on the “Create App” button. Give your new app a name and choose the “Merchant” App Type. Then click the “Create App” button once again.

new app creation page

You will be redirected to the app’s page. The Client ID and Secret Key are right there – just copy them.

paypal client ID and secret key

Proceed to WordPress Dashboard > JetFormBuilder > Settings. In the Payments Gateways tab, find the PayPal Gateway API drop-down and click on it. Paste the obtained keys into the corresponding fields and press the “Save” button.

paypal gateway api keys insertion in jetforms settings

Now, go to WordPress Dashboard > JetFormBuilder > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section. Choose “PayPal Checkout” and click the “Edit” button to open its settings.

PayPal Checkout Settings

checkout settings pop-up
  • Use Global Settings — enable this toggle to pull the data from the PayPal Gateway API’s settings and pre-fill the Client ID and Secret Key fields; 
  • Client ID — paste the Client ID that you obtained from PayPal into this bar;
  • Secret Key — this is where you paste the Secret key generated through the PayPal website; 
  • Gateway Action — pick a payment scenario that will perform once the form is submitted;
  • Request Button — press the “Sync Access Token” button to work on the payment settings;
access token updated fields
  • Currency Code — type here a three-letter code that represents the currency used in your form; 
  • Price/amount field — in this drop-down select, pick the corresponding price field within your form;
payment messages settings
  • Available macros list — these macros can be used in the fields below – Payment success message and Payment failed message – if you would like to specify some details for the customer:
    • %gateway_amount% — will provide the payment amount returned from the gateway template;
    • %gateway_status% — will give the payment status returned from the payment gateway;
    • %field_name% — will provide any necessary details from the form field, the name of which you write instead of the “field_name”;
  • Payment success message — this is a message that will be shown to the user after their payment is confirmed to be successful;
  • Payment failed message — this message will be directed to the user if their payment does not come through.

How to Configure the Stripe Gateway

You need to register a new business on Stripe and receive the Publishable and Secret keys for your authentication to set it up correctly.

How to Obtain the Stripe API Key

Go to the Stripe website and create a new account. 

account creation form on stripe website

A confirmation letter will be sent to your email. Proceed to the inbox and click the link in the email to pass verification. Afterward, you’ll be redirected to Stripe’s dashboard page. Click on the New Business bar in the upper left corner of the sidebar, enter the account name and press the “Add name” button.

creating a new business on stripe website

Good. Now, you will be able to locate two Stripe API keys – the first is the Publishable key, and the second is the Secret key. Copy them.

stripe api keys section

Proceed to WordPress Dashboard > JetFormBuilder > Settings. Find the Stripe Gateway API drop-down in the Payments Gateways tab and click on it. Paste the obtained keys into the corresponding fields and press the “Save” button.

stripe gateway api keys insertion in jetforms settings

Now, go to WordPress Dashboard > JetForms > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section. Choose “Stripe Checkout” and click the “Edit” button to open its settings.

Stripe Checkout Settings

stripe checkout settings editing window

If you work with Stripe, mind that you need to set the “Insert/Update Post” post-submit action. Otherwise, the “Edit” button will not be available.

The Stripe Checkout settings are pretty similar to PayPal Checkout except for one field. Instead of the Client ID field, there is the Public Key field. You are supposed to input here the Publishable Key obtained from Stripe. 

However, if you enable the Use Global Settings toggle, both fields with the keys will be pre-filled automatically.

Action Events Settings

The Event logic for the Submit Actions is available after the 2.1.0 version of the JetFormBuilder plugin.

With this new feature, you can set the time and condition for every action in the form when it should be performed. If you use the PayPal or Stripe payment method in the form, you can also set what action should be executed after a successful or failed payment.

To set an action event, proceed to the Post Submit Actions tab of the form and hit the “Edit Conditions & Events” button.

post submit actions

In the Events match tab, you can add such events:

  • DEFAULT.PROCESS – defines the time of action performance. This event is needed when the payment (PayPal/Stripe) function is included in the form so that the JetFormBuilder plugin can complete the submit actions with such an event before a user is redirected to the checkout page;
  • BAD.REQUEST – is executed after processing the request if there are errors in the form fields (for example, when you filled out a Media field with the wrong format file or exceeded the file limit). Overtakes the DEFAULT.PROCESS event;
  • DEFAULT.REQUIRED – is executed in any case, even if the form fields contain some errors or in case of unsuccessfully performed actions. This event runs at the end before the form response is sent. By default, this event is used by the Save Form Record action and cannot be added to other events through the form editor;

If you use several actions with the DEFAULT.REQUIRED event, so set the Save Form Record action last; otherwise, the status for the completed action will be saved incorrectly.

  • GATEWAY.SUCCESS – replaces the former “On success payment” option for actions. It is executed after passing the checkout page on the side of the payment system if a payment or a subscription has been made;
  • GATEWAY.FAILED – replaces the former “On failed payment” option for actions. It is performed when the user returns from the checkout page of the payment system without making a payment or subscribing.
events match tab

After you select one or several events, hit the “Update” button. The event in the submit action will look like that:

action event

Don’t forget to “Update” the form to save changes.

That’s it. Now you know how to configure WordPress Payment Gateways and use them in JetFormBuilder forms.

The HubSpot – JetFormBuilder Pro Addon extends the HubSpot OAuth 2.0 functionality, connecting the HubSpot’s free CRM platform and managing user contacts via the Post Submit Actions of the JetFormBuilder forms. 

OAuth is an authorization protocol allowing users to access third-party data sources while keeping their credentials safe using authorization tokens.

Setting the JetFormBuilder Pro Addon

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

addon license activation

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

enable oauth toggle activation

Creating a HubSpot Developer Account

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

create an oauth developer account

Select the “Create App Developer account” button.

create app developer account button

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

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

Specify the account type or skip this step.

hubspot app development

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

creation of hubspot application

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

manage app settings window

Then, you will be redirected to your HubSpot account.

Linking HubSpot Account with JetFormBuilder

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

site hubspot api settings page

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

hubspot account page

Navigate to the Auth tab of your HubSpot account.

auth tab of the hubspot

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

hubspot api settings

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

hubspot api settings

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

app credentials page

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

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

hubspot api site fields

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

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

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

selecting necessary hubspot account

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

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

selecting necessary hubspot account

Setting the HubSpot as Post Submit Action in Forms

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

hubspot post submit actions

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

oauth setting of post submit action

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

jetformbuilder hubspot action global settings

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

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

numbers range radio field type

There is the possibility to create a number range for Checkbox, Select, and Radio fields dynamically.

numbers range option settings

Once you add one of these types of fields into your form, you are able to choose Generate Dynamically option in the Fill Options Form field. Click on the Number range by manual input in the Generator Function field and give needed values to the fields below.

It is clear from the names of these fields that the minimum value of the range should be set in the Start of range field; the End of range is for the maximum value. The interval of the range can be set in the Step field.

Thus, this feature may save your time creating all options automatically instead of adding them one-by-one manually. 

color picker field

Give your users an opportunity to design your website and pick a certain color in the form with the help of the Color Picker Field.

You will be able to use the default HTML Color Picker and choose a color in HEX, RGB and HSL formats. However, the values can be saved only in seven-character hexadecimal format. 

If you want to get advanced Field Settings and save values in HEX or RGB format, please check our Advanced Color Picker addon that has such an option.


general and advanced color picker block settings
color picker field default value option

You can choose a Default Value for Color Picker field by clicking on the cylinder-shaped icon. The Edit Preset window will pop up, where you should choose the Source the information will be taken from. Check this tutorial to get more information about using the Preset.

Style Settings

color picker field and jetstylemanager styling options

You may install the JetStyleManager plugin to get the Block Style button in the top right corner of the editing window. Here are the styling settings you can meet there:

With the WordPress form Patterns functionality from the JetFormBuilder plugin, you can add six different layouts for your form, such as Contact Us Form, Login & Register, Application Form, Subscribe Form, Profile Form, and Booking Form. Let’s have a closer look at each of them.


Firstly, you need to create WordPress Form. Please, check our guide to achieve this.

The Pattern is not a Preset. It’s a WordPress form layout that you can customize and style up as you like. JetFormBuilder blocks can be customized if you have also downloaded and installed the JetStyleManager plugin.

Open the form you’ve created and click on the Plus icon.

wordpress contact form toggle block icon

After that, you’ll see the Patterns block where you’ll need to select the JetForms from the dropdown. Afterward, you’ll see six patterns below.

 jetforms patterns set

Contact Form

You can easily add the Contact Form layout with the ready-made pattern and then customize it according to your preferences.

contact form pattern

On the right panel, you can choose to set different Form Settings, such as Form Layout and Submit Type. Also, you can enable Captcha, choose Post Submit Action, Presets, and customize General Message Settings. These fields are the same for every form.

contact form pattern settings
NOTE! The Pattern will be applied to the already existing content, it won’t remove it.

Login & Register

This pattern allows adding a WordPress form for registration and logging in. You can customize any field, add new fields if you need, and also add a photo. 

 login&register form pattern

Application Form

With this pattern type, you can add an WordPress Application Form that includes a lot of different fields to add information about a person.

application form pattern

You can add Name, Phone Number, Country, Position information, check Industry field and also add your own fields or edit the existing ones.

This pattern accommodates a lot of checkboxes, as needed for application forms. What’s cool is that the columns are already set up and the questions are grouped. All you need to do is to customize everything.

application form pattern layout

Subscribe Form

A perfect pattern to add a layout for the WordPress Subscribe Form in few clicks. The pattern includes Image, Description, Name, Email fields, and Subscribe button. 

subscribe form pattern

Profile Form

WordPress form Pattern includes all the basic fields for the Profile Form. Here you can find Name, Icon, Location, Email, Phone, and Password fields.

This pattern comes in handy when we need to Register User or Update User.

You just need to set up Post Submit Actions and then the form will work perfectly.

Why this pattern is so good? Because all the basic information is grouped in several columns.

 profile form pattern layout

Booking Form

This is the biggest pattern with a lot of different field types for a perfect WordPress Booking Form. In this pattern, you can check how the multi-step form is set up and check it in action. Here you can find everything from Check-in Date and Time to range field with Price per Night and toKind of a Trip and Extra Services fields. 

booking multi step form pattern first step

There are fields for Personal Information such as Name, Phone, and Gender.

booking multi step form pattern second step

Also, you can add Additional Information.

booking multi step form pattern third step

If there are any questions left after reading the documentation, please contact our tech support team.

There are two ways the WordPress form Repeater Field value can be used in the formula of Calculated Field – as a Row Count and as a Custom Calculated Value. You can choose how to use it in the Calculate repeater row value drop-down list of the Field Settings menu section.

Rows Count

This option counts the number of items added to the repeater by the user. That number can be used in the WordPress Calculated Field formula.

defining the row value

Let’s assume that you are creating a gift box Order Form. Every user can order several boxes, so you add a repeater there. The price for every box is the same, and you want to show the users the Total Price of their order. To do that, you can put a Calculated Field under the WordPress form Repeater Field and make it multiply the number of boxes by the price. 

setting calculated field data

The price here is “10”, so the number of boxes is just multiplied by 10. Here’s how it will look like on the frontend:

Сustom Calculated Value

If you choose the “Custom” option in the Calculate repeater row value drop-down list, that will add a built-in WordPress calculated field to the repeater.

configuring custom calculated value

This field is just the same as a separate Calculated Field. The formula is added the same way and the same rules apply. In the example, it counts the sum of chosen values assigned to the Radio (“Packing”) and Checkbox (“Sweets”) fields options. The built-in field will calculate the resulting value for every added repeater block according to the formula.

Afterward, when you use the Repeater macro code (%FIELD::gift_box%) in the WordPress Calculated field outside of the repeater, it will insert the sum of calculated values for every WordPress repeater block added by the user.

getting sum of the calculated values on the frontend

On the frontend, it will look like that: