For the correct work of the HubSpot OAuth 2.0, you need to install the HTTPS protocol.

Firstly, open the HubSop API section and activate the Enable OAuth 2.0 option. OAuth is a secure means of authentication that uses authorization tokens rather than a password to connect your app to a user account.

jetformbuilder hubspot addon admin settings

After that, you need to go to the HubSpot website and Create a Developer account.

hubspot developer account form

After you’ve set it up and signed in, you’ll start on the developer account homepage, where you can create your first app or a test account. Click “Create an app” to proceed.

hubspot account page

Now you need to create a HubSpot account to install your app. You can create up to 10 test accounts per one developer account. On the homepage of your developer account, click “Create a test account.”HubSpot

hubspot account page with options

Then, click on the “Create app test account” button in the upper right corner.

hubspot test account page creation

You’ll see a pop-up where you can give your account a name.

hubspot test account page creation form

When you’re done, you’ll see that the account is active.

hubspot active test account page

The next step is to return to your website dashboard and copy the Your Redirect URL value from the HubSpot API settings page.

adding redirect URL to jetformbuilder hubspot addon

After that, switch over to the HubSpot account and open the Auth tab.

hubspot auth tab

Find the same Redirect URL field and paste the URL you’ve copied from your website. Users must be redirected to this location after granting access to your app.

hubspot redirect URL

Find the Scopes field below and choose the Contacts from the drop-down. Don’t forget to click on the “Save” button.

HubSpot app contacts

Then, copy the link from the Install URL (OAuth) field in the HubSpot. A user will need this URL to install the app. It’s generated based on the app credentials, redirect URL, and scope configuration found on this page.

HubSpot app credentials

Paste this link into the corresponding field on your website.

adding install URL to jetformbuilder hubspot addon

Return to HubSpot and copy the Client secret. You need it to establish and refresh OAuth authentication.

hubspot app credentials client secret

Open the admin panel again and paste the Client secret into the appropriate field.

jetformbuilder hubspot addon client secret field

Click on the “Save” button. Only after you’ve saved everything, click on the “Authorize” button to log via OAuth 2.0. Afterward, you’ll be redirected to the MyHubSpotApp page.

On the opened page, you’ll see two accounts you’ve created before. Choose the App account and click on the “Choose Account” button.

connecting myhubspotapp to hubspot

Probably, you’ll see a warning on the page saying the following: “You’re connecting an unverified app. This app’s details haven’t been reviewed or verified by HubSpot. Make sure you trust the developer before connecting it to your account.” No worries! This warning doesn’t affect anything. It is a way to verify official marketplaces. 

connection warning of myhubspotapp

The last thing we need to do is to check the HubSpot in the Form. Open the required form, click on the Post Submit Action section on the right panel, choose HubSpot, and click on the pencil icon to edit the action.

jetformbuilder form block settings

Then, enable the Global Settings option. After that, you’ll see that there will be an opportunity to choose between API Key and OAuth 2.0.

jetformbuilder edit form action settings

After you’ve chosen the type and clicked on the “Send Request” button, you will see the complete list of the HubSpot action settings. These fields are unnecessary for the proper work, but you can add this information if you like. The only required field is Email.

 jetformbuilder hubspot action global settings

After you are done 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.

numbers range radio field type

How to enable the Payment Gateways option

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.

Settings

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.

Preparation

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.

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 how to activate the WordPress payment gateway option, how to 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 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

With the latest update, there is a much more convenient way to enable the WordPress Payment Gateways option. Proceed to JetForms > 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 will 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 JetForms > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section.

gateways settings in the jetform tab

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 on it opens the checkout additional settings pop-up window. This button can be active/inactive depending on the actions you set in the Post Submit Actions section;
  • Please add ‘Insert/Update Post’ action. A service message that indicates the poorly configured post-submit actions.

NOTE. For proper functioning of the gateway, the form should contain at least one “Insert/Update Post” post-submit action. If it is missing, the WordPress form will not pass the Gateway and the “Edit” button will be unavailable.

active edit button in the gateways settings section

How to Configure the PayPal Gateway

In order to set it up properly, 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

NOTE. 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, make sure to set up the appropriate API credentials (Live or Sandbox, the instructions are here) and indicate a proper currency code (the list of codes can be found here).  

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

paypal checkout settings editing window
  • 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; 
  • Currency Code. Type here a three-letter code that represents the currency used in your form; 
  • Before payment processed. Select here an action that you would like to be performed on the backend prior to processing the payment;
  • On successful payment. In addition to showing the user a Payment success message, you can specify here the action that will be carried out after the payment went through;
edit paypal checkout settings window
  • On failed payment. If the payment was not successful, you might want to send the user an email stating that the payment failed and suggesting how to fix that issue.

NOTE. The three advanced payment settings listed above appear if you add more than one action in the Post Submit Actions section and set them up.

  • Create payment order notification. This is a Radio field type that will be shown when you create several “Insert/Update Post” actions. Choose the desired option here, and the form will execute it after the payment is carried out;
  • Price/amount field. In this drop-down select, pick the corresponding price field within your form;
  • Available macros list. These macros can be used in the Textarea fields below – Payment success message and Payment failed message – in case 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 provide 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 his/her payment is confirmed to be successful;
  • Payment failed message. This message will be shown to the user in case his/her payment did not come through.

How to Configure the Stripe Gateway

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

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 address. Proceed to the inbox and click the link in the email to pass the 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 Publishable key and the second is Secret key. Copy them

stripe api keys section

Proceed to JetForms > Settings. In the Payments Gateways tab, find the Stripe Gateway API drop-down 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 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

The Stripe Checkout settings replicate the ones of 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.

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

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:

The value of the Hidden Field can be used in the formula of the Calculated Field just as the value of any other field. However, the fact that this field is invisible to the user gives you an opportunity to add some values secretly. For example, with the help of the Hidden Field, you could add taxes to the Total Price formula.

Let’s assume we are creating an Order Form for a gift box. The user can choose which items to put inside, and you want to show the Total Price of the order and include taxes in it.

First of all, create a field with options that will have different values. For example, a Radio Field. Insert the values that will be used in the formula into the Calculate bar.

Now, the Hidden Field. Let’s assume that you have to pay 5% of the item’s price as a tax. So, the Value will have to be set to “0.05”.

The total price of the item will be the price of the item plus 5% of the price for taxes. That’s why the Calculated Field formula will look like that:

%FIELD::gifts_set%+%FIELD::gifts_set%*%FIELD::tax%

Let’s also add a Calculated Value Prefix and Suffix, so that the user will be able to understand which number he/she is being shown.

configuring calculated field

Press the “Publish” button at the top and place the table on the page.

Here’s how it looks like on the frontend:

As in every multi-choice field, the Checkbox Field creates a list of options, and each of those options can have different values. The difference is that the user can select not one but several variants. Still, the value of the Checkbox Field can be used in the formula of Calculated Field.The values you type into the Calculated bar will be used in the formula.

editing options for checkbox and calculated fields

If you use the macro code of the Checkbox Field in the formula, it will insert the sum of values selected by the user.

calculated checkbox form look on the frontend
calculated checkbox form look on the frontend

Here’s how it will look like on the frontend:

Conditional Visibility is a functionality that allows you to make parts of the form invisible for the users until some conditions are met. Conditions and fields that will be hidden are set with the help of Conditional Block.

selecting conditional block

How does it work?

The Conditional Block can be added and customized during the form creation process in the JetForms menu tab. You won’t be able to use it when the form is on the page. When you add it to the form, it looks like that:

selecting conditional block

On the block’s surface, you can see a big button with a plus-shaped icon on it. By clicking on it, you can add any field to the conditional block. Let’s name it a connected field. The connected field will be shown (or hidden, it depends on the settings) when the defined conditions are met. You can add several connected fields but be aware that they will be shown and hidden in one pack.

Afterward, you choose another field of the form  – let’s name it a target field – and the operator in the settings window. The operator defines the condition that the target field value should meet. For example, you can choose that the value of the target field has to be equal to some value.

The conditional block compares the value of the target field with the value set in the settings window. If it meets the operator’s requirement, the connected field will be shown (or hidden).

To open the Conditional Block settings window, press the button with the crossed arrows icon, which is placed on the top tool panel to the left of the “Options” button.

applying conditional block options

The Conditional Logic pop-up window contains all the conditional visibility settings. 

conditional block settings tab

Controls

  • Safe deleting. This toggle is turned on by default. It prevents you from accidentally deleting a condition. When it is on, you will receive a confirmation message. The condition will be deleted after you confirm that you really mean to delete it;
  • The button with the eye icon. When you click on it, it hides/shows the condition;
  • Buttons with arrows. If you have several conditions, those buttons move the condition up or down in the list. It doesn’t affect its efficiency. The position in the conditions list may be important for the navigation;
  • “Clone” button. It creates a copy of the condition;
  • “Delete” button. This button deletes the condition;
  • “New Condition” button. You can add as many conditions as you need for your form by clicking on this button.

Settings

Type

Here you can set the visibility of the connected field by default. If you choose the “Hide this field if” option, the connected field will be visible until the conditions are met. The “Show this field if” option will make the field invisible by default, and it will appear only if the conditions are met.

conditional logic type configuration

Field

Here you can choose the target field. The value of this field will be compared with the value from the Value to Compare bar. You choose one of the fields that are already added to the form, so all of them will be listed in this drop-down menu, named by their labels.

Operator

The option you choose here will define how the value of the target field will be compared to the data you put into the Value to Compare text area. 

 choosing conditional logic operator

Equal

The condition will be met if the value in the target field is equal to the value from the Value to Compare bar.

Example:

The connected field (“Number of rooms”) appears only if the value of the target field (“Number of visitors”) is equal to “3”.

Greater than

The connected field will be shown/hidden if the value of the target field is greater than the one you put to the Value to Compare field.

Lesser than

If the value of the target field is lesser than the number you put to the Value to Compare text area, the connected field will be shown or hidden.

Between

This operator allows you to insert a range into the Value to Compare text area. The first and last numbers have to be typed in ascending order (from lesser to greater) and separated by a comma. The first and last numbers also count in the range. If the value of the target field is equal to one of the numbers in the range, the connected field will be shown/hidden.

Example:

Let’s assume you’ve put the range “2,5” to the Value to Compare text area. The connected field will be shown or hidden if the value of the target field is equal to “2”, “3”, “4”, or “5”.

In the list

This operator works with Radio, Checkbox, and Select form fields.Every option of the multi-choice fields has a value. The conditional block takes the value of the option that was chosen by the user and compares it with the one you put to the Value to Compare bar. If they are equal – the connected field will be shown. The value can be either numeric or alphabetical.

Example:

The connected field (“Parking place”) will be shown only if the value of the target field (“What transport will you use”) is equal to “3”, which is the value of the “car” option.

Contain text

This operator works with Text, Textarea, and Media form fields

It makes the conditional block seek the value you place to the Value to Compare bar in the text that the user inserts into the target field. If it finds a match, the connected field will be shown or hidden. The value can be either numerical or alphabetical.

Example:

The target field (“Would you like to take a look at our grill menu?”) will be shown only if the word “meat” appears in the target field (“Any food preferences”).

In the case of the Media field, you can insert the format of the file (like “.png”) to the Value to Compare bar, and the connected field will be shown or hidden when the user uploads the file of that format.

WordPress form block style settings

If you have installed the free JetStyleManager plugin, you will see the WordPress Block Style button in the top right corner of the editing window. Every field of the WordPress form can be styled separately during the process of form creation. However, you can also define some general design settings. Be aware that the settings you choose separately for the field have a higher priority than the general design settings.

The Form Row, Label, Required Mark, and Description sections contain styling features that will change the general look of the form.

The appearance of the Form Break Field can’t be set during the form creation process, you can define it only here, in the Form style settings tab. The Form Break Row, Form Break Next Button, Form Break Prev Button, Form Break Disabled Message sections are responsible for that.

The form progress bar can also be styled only in the WordPress Form style settings tab, in the Form Progress – Wrapper and Form Progress – Pages sections.

You can style the success message in the Message Success section, whilst the error message can be styled in the Message Error section.

Here are the WordPress form styling settings you can meet there: