FormPay HubSpot Integration

FormPay HubSpot Integration lets you accept payments or donations within HubSpot through your favorite payment gateways. With this HubSpot payment app, you can modify your native HubSpot forms and add payment gateways to them so users can pay you directly through HubSpot forms. Therefore, providing a convenient opportunity to all the HubSpot form users to accept payments instantly.

Open the FormPay HubSpot Integration app. You can access the app through this link.

Register yourself and log in using your credentials.

After email verification and  logging in, you need to add a HubSpot portal to the app:

Click on Add New Portal to connect your portal with the app.

Select the HubSpot portal you want to connect with the app on the selection page.

Click on Choose Account to select the HubSpot account and it’ll be displayed in the app.

If you want to add more portals, repeat the above process. If you want to move further, click on the HubSpot portal you added and you’ll see the dashboard for that portal.

The plugin setup is complete. Let’s move further and talk about other features of this app.

a. Home

This section displays a simple dashboard where you can see all the payment gateways that are available to use along with the set of instructions to connect the FormPay app with HubSpot and quick links to reference resources.

 

b. Forms

The forms section lets you create payment forms and shows all the forms you’ve created so far through this app.

To create a form:

• Click on Create New Form button.
• You’ll see the form settings where you need to add details like Form Name, Payment settings, payment gateways, and more.
  

• Click on the Publish Form button.

Your form is successfully created now.

c. Form Submissions

The form submission section shows the details of all the submissions made on the forms you’ve created.

d. Transactions

All the transactions made through your HubSpot forms will be listed here.

a. Gateways

This section shows all the payment gateways this app supports. If your gateway is not listed, Please connect with us, The gateway will be added to the app by our team.

Simply go to the Gateways tab and click Setup under the “Action” column on the right of the payment gateway of your choice. This action will take you to the Payment gateway credentials page and you can make the change there.

 

b. Payments

The Payments section is the billing portal where users can add their details and pay to renew their subscription to use the FormPay HubSpot Integration.

c. User Accounts
This section lets you modify your account details. You get three sections here. Let’s look at them:

1) General

In this section, you can change the basic details of your account like First Name, Last Name, Email, Phone Number, Address, Country, and more.

2) Change Password

As the name says, you can change the password of your account.

3) Billing

From this section, you can change your billing details and cancel your subscription if you want.

We can classify the HubSpot payment form creation into 7 different steps. Let’s look into them:

a. Form Settings

At first, you’d see Form Settings. In this section, you’ll get 2 options:

To enable Test Mode, turn this toggle on by clicking to put the form in test mode.

• Form name: Add a name to the HubSpot Payment form you’re creating.
• Select HubSpot form: Select a regular HubSpot form you want to convert into a payment form.

Configure these settings and move to the next step.

 

b. Donation Form Settings

 

This section allows you to turn your form into a donation form. It has different settings like:

• Donation form toggle: Enable this toggle to turn your form into a donation form and unlock the rest of the settings in this section.
• Title: Add your donation form title here.
• Description: Add your donation form description here.
• Logo: Upload your donation form logo here.
• Show/Hide in memory of: If you want to have a section where users can dedicate their donation to someone, enable this toggle.
• Donation memory label: Add content for your donation memory label.
• Donate button text: Add text for your donation button.

After configuring these settings, you can move further to the next step.

Note: If you keep the Donation Form toggle disabled, the payment form will work as a regular payment form.

c) Payment Settings

 

This section will let you enter the payment amount you want to receive with your form. You get the following settings here:

• Allow custom amount toggle: If you’re creating a donation form and want to add multiple amounts to your form, you can enable this toggle.
• Custom amount: Enter the amount you want to set as a default amount for your payment form. If you don’t enable the custom amount toggle, you’ll see this option as Enter Amount.
• Suggested amount: This option lets you add multiple payment values to your form. Just add a value and hit Enter and then repeat the process to add multiple values in your form.
• Enable test mode toggle: If you want to test your form, enable this toggle.

After successfully setting up this section, move forward to the next setting.

 

d. Redirection Settings

This section lets you add a URL to which the user will be redirected after submitting the form.

e. Thank You Page Settings

 

This section contains the settings for your Thank You page. If you want to redirect users to a thank you page after the form submission, you can configure the settings in this section.

Here you’ll see the following options:

• Back button text: Enter the text you want to show on the back button of your Thank You page.
• Back button link: Link on your back button.
• Title: Title of your thank you page.
• Subtitle: Subtitle of your thank you page.
• Description: Description of your thank you page.
• Upload thank you image: Image on your thank you page.

Note: This section will appear only when you disable the Allow Redirection toggle.

f) Payment Method

This section will display the activated payment gateways. You can select the gateways you want to add to your HubSpot payment form.

 

g. Theme Settings

You can change the theme color of your HubSpot payment form through this setting.

Show Pay Button: With this toggle, you can opt to display a Pay button. Simply click on the toggle button that says “Show pay button”, will ask you for some modifications to select.

This is how this button would look in a real form when you embed code on the HubSpot landing page:

This includes “Pay Button Text” which will be displayed as the Pay Button on the final page.

Once you configure all these settings, click on Publish Form at the bottom and you’ll see a preview of your form on the right side of the page.

You can now copy the embed code of the form and paste it into your HubSpot page to add the form there.

 

  h) Embed Code and URL

Once you have published the form through FormPay. Then, follow the below steps to embed code to the HubSpot landing page.

• Go to the Forms tab by clicking on it.
• Locate the form you wish to use.
• Under the Action column, click on the ellipsis menu button on the right.

• Then click Edit and you’ll be redirected to the form editing page.
• Locate and click Embed Code on the top of the form preview (right of the page).
• You’ll see the Embed Code and Form URL above the preview like this.
  
• Click on Embed Code and the pop-up will appear along with the Embed Code.
  

   

• Copy the embed code. If you want to share the form with the users, you can copy the Share URL.
  After copying the embed code, you have to visit HubSpot CRM and then follow the steps mentioned below:
• Visit HubSpot CRM and make sure you’re logged in.
• Click the Marketing Tab on the menu located in the top-left corner of the page.
  
  
• A drop-down will appear, then click on Landing Pages from there.
• A page containing details about all the landing pages of your website will appear.
• You can edit an existing landing page or create a new one.
  
  

  If you wish to embed HubSpot form code on the existing landing page, then follow the below steps.

• Locate and hover the cursor over the desired landing page of your choice.
• You’ll see some options in the middle, click Edit.
• The page edit options will appear and you’ll have Theme Modules options on the left side.
  
  

   

• There, browse and type in the search HTML module from the module options on the left.
  
  
• Drag and drop the HTML module on the right side.
• Paste the copied Embed Code in the blank appearing on the middle left.
  
  
• Finally, click Publish on the top right corner to publish the page.
  
  If you wish to create a new landing page to embed the code of the HubSpot form you created, then follow the below steps.
• Go to the top-right corner of the page and click Create.
  
  
• A drop-down will appear, choose Landing Page by clicking on it.
  
  
• Choose a template from the options thereon.
  
  

   

• Then,  browse and type in the search HTML module from the options on the left.
• Drag and drop the HTML module on the right side.
  
  
• Paste the copied Embed Code in the blank appearing on the middle left.
• Finally, click Publish on the top right corner of the page.