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 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 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 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 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 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 Payment Gateways and use them in JetFormBuilder forms.

There are two ways the 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 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 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 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 Calculated field outside of the repeater, it will insert the sum of calculated values for every 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.

If you have installed the free JetStyleManager plugin, you will see the Block Style button in the top right corner of the editing window. Every field of the 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 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 styling settings you can meet there:

Go to the page where you would like to add a form created in the JetForms tab. Open the page editing window and press the “Add Block” button. Find the Form block and click on it to add it to the page.

finding the corresponding form block in gutenberg

Proceed to the settings in the right-side column. Open the Choose Form drop-down menu in the Form Settings section and choose the form you’ve created. The forms are listed by their titles.

choosing the form type

That is all, the form is now on the page. You can set some additional Form Settings and do some appearance changes in the Block Style tab.

applying the necessary form settings

This is a unique styling feature of the Range Field. You can find it in the Range section of the Block Style settings tab. It helps you to set the width of the range. You can use pixels (PX) as the unit of measurement or choose to set the width as the percentage of the total column width. By default, it is set to 100%, so the range occupies the full width of the column to which you have put it.

setting width for the range field

All the settings that are connected to the appearance of the text are gathered here. All elements with text can be customized separately. For example, you can set the look of the label and the description of the field differently. Let’s take a closer look at all of the features that can be placed in the Typography section.

Size

This feature defines the size of the letters. By default, it is set to 14 pixels but you can change it by moving the slider manually or typing the needed size into the bar.

The default units of measurement are pixels (PX) but you can change them to one of three others:

EM – this is the unit that allows you to set the size of the font relatively to the size of some parent element. The parent element can be defined in the CSS code;

REM – this unit sets the size of the font relatively to the size you set in the HTML code;VW – a very flexible unit of measurement. It sets the size of the text relative to the height of the browser window, so it always has the same proportions.

Line Height

The height of the text line can be changed without changing the size of the letters. When you make it bigger, the space between the lines increases. By default, it is set to 1.2 and you can change it by dragging the slider or typing in the value.

setting line height

NONE measurement unit defines the height of the line according to the height of the text. So, when you set it to 2, it means that the line generally will be twice the height of the text. You can change the measurement unit to pixels (PX) or the unit that depends on the size of some parent element set in CSS code (EM).

Letter Spacing

It is clear from the title that this feature allows you to set the space between the letters of the text. By default, it is set to 0, which means that the spacing is normal for the chosen font. When you change that value, either manually or by typing in the number, the normal spacing is multiplied by it. So, when you set the Letter Spacing to 5, it means that space will be five times bigger than normal.

defining spacing between the letters

Family

In this drop-down menu, you can choose the font family for your text. The “Default” option means that the text will have a font that is defined by the website template. There are seven additional fonts that are the most popular among the users. The number and type of fonts are set in the JetStyleManager settings and can be changed via coding only.

choosing typography family

Weight

Here you can choose the boldness of the text. In the drop-down menu, you can select the values from 100 to 900 and also one of the pre-sets:

  • Default – set the weight that is defined by the website template for this part of the page;
  • Normal – the weight of the text will match the “normal” weight of the chosen font;
  • Bold – the weight will match the “bold” style of the chosen font.
defining typography weight

Transform

This feature helps you define the case of the text’s letters. Default is the way the text looks after you type it in. 

The Uppercase option makes all letters capitalized.

setting uppercase typography

The Lowercase variant makes all the letters small.

setting lowercase typography

If you choose the Capitalize option, it will capitalize every first letter of every word.

setting capitalization for typography

And the Normal option will capitalize only the first letter in every sentence.

applying normal option for typography

Style

As you can choose the boldness of the letters in the Weight feature, here you can select the tilt. The Default option leaves the text as it was inserted. The Normal option makes the text straight. The Italic and Oblique options make the text slanted. If you have no idea about the difference between those two styles, read this article.

defining typography style

Decoration

In this drop-down menu, you can add some decorative elements that are not crucial for the appearance but could make the text more understandable. The Default option leaves the text you inserted untouched.

The Underline option will add the line under the text lines.

underline option for the text

The Overline option will put the line over the text rows.

 overline option for the text

The Line Through option will create a line that goes over the text, crossing it out.

line through option for the text

And the None option will remove all lines from the text, even if there were some in the default text.

This is the feature of Radio and Checkboxes Fields, so it can be found only in the Items style settings section. With its help, you can set the space between the options. Be aware that it doesn’t change the distance between the options and the edge of the field, the Margin or Padding features can help you with that. By default, this feature is set to 10 pixels but you can freely change that value by moving the slider or typing the needed number into the bar.

changing the space between the radio buttons