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.
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.
Now you need to create aHubSpot 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
Then, click on the “Create app test account” button in the upper right corner.
You’ll see a pop-up where you can give your account a name.
When you’re done, you’ll see that the account is active.
The next step is to return to your website dashboard and copy the Your Redirect URL value from the HubSpot API settings page.
After that, switch over to the HubSpot account and open the 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.
Find the Scopes field below and choose the Contacts from the drop-down. Don’t forget to click on the “Save” button.
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.
Paste this link into the corresponding field on your website.
Return to HubSpot and copy the Client secret. You need it to establish and refresh OAuth authentication.
Open the admin panel again and paste the Client secret into the appropriate 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.
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.
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.
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.
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.
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.
There is the possibility to create a number range for Checkbox, Select, and Radio fields dynamically.
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.
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.
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.
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.
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.
You can easily add the Contact Form layout with the ready-made pattern and then customize it according to your preferences.
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.
With this pattern type, you can add an WordPress Application Form that includes a lot of different fields to add information about a person.
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.
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.
WordPress form Pattern includes all the basic fields for the Profile Form. Here you can find Name, Icon, Location, Email, Phone, and Password fields.
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.
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.
There are fields for Personal Information such as Name, Phone, and Gender.
Also, you can add Additional Information.
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 learn how to activate the WordPress payment gateway option, add one to the form, and customize its settings.
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:
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.
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.
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. This button can be active/inactive depending on the actions you set in the Post Submit Actions section;
Please add “Save Form Record” action — a service message that indicates the poorly configured post-submit actions.
For proper functioning of the gateway, the form should contain at least one “Save Form Record” post-submit action. The WordPress form will not pass the Gateway if it is missing, and the “Edit” button will be unavailable.
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.
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.
For a form to work correctly in a live environment, 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).
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.
You will be redirected to the app’s page. The Client ID and Secret Key are right there – just copy them.
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.
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
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;
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;
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.
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.
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.
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.
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
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.
That’s it. Now you know how to configure WordPress Payment Gateways and use them in JetFormBuilder forms.