HubSpot has a forms module but it's lacking in features. Here we will learn how we can create a powerful contact form for HubSpot.

Unlike HubSpot's default forms, our contact form can:

  1. Be split across multiple pages or multiple steps
  2. Use conditional logic to show or hide fields
  3. Customized to suite our brand and colour scheme
  4. Embedded on any website as an inline form or popup form

1. Create a new form

On the FormCrafts dashboard, click New Form. Enter the name and click Create Form.

We are now on the form edit screen. Before adding fields to our contact form, enable HubSpot. Click on Addons (top-left corner) -> Marketing -> HubSpot -> Enable.

Now click on the Add Field icon to the top-right and add a couple of fields to our HubSpot contact form:

  1. custom text field
  2. one line input labelled Your Name
  3. one line input labelled Phone Number
  4. email field labelled Contact Email
  5. checkbox field labelled Your Role
  6. submit field.

The checkbox field Your Role will be mapped to the Buying Role custom property in HubSpot. With FormCrafts you can easily autofill the options defined in HubSpot. Edit your checkbox field and look for Autofill next to the Options List. Here you would select HubSpot Contact Props -> Buying Role.

Our HubSpot contact form should look like this:

HubSpot contact form
HubSpot contact form

2. Map form fields to HubSpot contact props

Our form is ready, but we need to map our form fields to their respective HubSpot contact properties.

Go back to Addons (top-left corner) -> Marketing -> HubSpot. Once enabled click on Add Action. Under (select action) choose Create and under (select module) choose Contact.

Map Your Name to First Name, Your Email to Email, Phone Number to Phone Number, and Your Role to Buying Role.

Our final field map looks like this:

Mapping HubSpot contact form fields to HubSpot properties
Mapping HubSpot contact form fields to HubSpot properties

3. Sharing and embedding the contact form

Our HubSpot contact form is ready, and we can easily share or embed our form.

All forms come with an easy share link that looks like this: The links can be customized to something like this:

You can also embed your HubSpot contact forms on any website, as inline forms or popup forms.

To access these options click on Share / Embed (top-left corner).

HubSpot pop up forms
HubSpot contact form: pop up embed