Guides & tutorials

The complete guide on building advanced forms with HubSpot

Table of contents

Do you use HubSpot but need to create more sophisticated forms? If you need to configure email or phone verification, payments and subscriptions or pre-fill form fields with the user data that you already have in HubSpot, Arengu is the tool you are looking for.

Choose a template or start from scratch

To create these use cases you can choose one of the fully editable templates or create it from scratch, simply by dragging and dropping fields, editing the texts and CSS styles.

Once you have customized the form, you can add custom logic to trigger automations in any step of the form or after form submission by simply connecting flows.

How to integrate HubSpot with Arengu

Starting to use HubSpot in flows is as easy as adding the native action and setting up a few fields. Just add the Create or update contact action by clicking on the plus button of the flow editor and configure it as follows.

  • Connection: create your HubSpot connection by clicking on the plus button. If you already have a connection created, just choose it from the selector.
  • Email: reference the {{input.body.email}} variable from the form. This is the variable with which we identify the user in HubSpot.
  • Contact properties: list the data that you want to send to HubSpot. To configure these fields, just remember that the key of the first input has to match the Internal name defined in HubSpot and, the second one, the field ID of the form. 

Then simply publish the changes and voila! The form data that you have listed will be automatically sent to your HubSpot account.

Custom registration forms

Create a fully customized signup form that automatically sends form data to HubSpot

This use case consists of a two-step form that will ask the user for an email and password in the first step, and for the user’s name and job title in the second one, but you can easily customize and add form fields and steps. Learn here how to configure it.

One-off payment forms

Willing to create custom payment forms that automatically send the data to your HubSpot account? Learn how to easily build them using Arengu and Stripe.

This use case consists of a one-step form that will ask the user for an email and the payment details for a one-off payment, and a flow that sends the data to HubSpot, but you can easily add fields and form steps. Learn here how to configure it.

Subscription payment forms

Creating subscription forms with Arengu, Stripe and HubSpot is as easy as choosing the editable template in the editor and customizing it.

It consists of a one-step form that will ask the user for an email, the pricing option and the payment details, plus a flow that sends the data to HubSpot after form submission. Again, you can easily add other custom fields and steps. Learn here how to configure it.

Prefill form fields using HubSpot API

Do you need to allow users to complete or update their profile data? In this tutorial you will learn how to easily build this use case with Arengu and HubSpot.

It consists of a two-step form that will ask for an email and then the profile data, and two flows. The first flow will check if the contact is already created in HubSpot and the data that is already stored, and the second one will update the records and submit the form. Learn here how to configure it.

Missing a tutorial?

If you are missing any more use cases, do not hesitate to send us feedback using the form that you will find below. Hope to hear from you!

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.