Prefill HubSpot Form Fields

Introduction

Prefilling a form allows you to pre-populate your form with data from an existing HubSpot record (company, contact, deal, or ticket). There are two ways to prefill a form with data from HubSpot:

Static prefill: Prefill data on form load using URL parameters.

Dynamic prefill: Prefill data based on user input to implement a search-like functionality.

Let us create a form that allows a user to update their company information, based on a given company ID.

Create a form

On your Formcrafts dashboard ↗ click on Add Form → Start from scratch. Enter a Form name and hit enter. This will create a new form.

You can also create a new form by clicking on Add Form → Use a Template and selecting a template. This would allow you to skip this step.

Now add some basic fields to your form using the Add field button on the top-left corner of the form editor:

1. company_id (Hidden)
2. Company name (One line text)
3. Company website (One line text)

Hidden fields can be prefilled using URL parameters. So if you want to prefill the hidden field with the ID 12345 you can share your form using a link like:

app.formcrafts.com/my-form?company_id=12345

Learn more about using hidden fields and form prefill via URL.

Lookup company

In this step we will use the hidden field’s value to fetch the company record from HubSpot.

Click on the Lookups button on the top-left corner of the form editor, and then click on the Add lookup button.

Edit the new lookup, and under (select source) find HubSpot, and click on Connect to HubSpot.

This will open a popup window where you can connect to your HubSpot account.

Select Company as the Object type. Under Lookup rules map Company ID to the company_id field in your form. Under Company properties select the company properties that you want to fetch. In this case, we are fetching the company name and website. Our lookup rule looks like this:

This lookup rule is configured to fetch a HubSpot company record where the Company ID matches the value of company_id field (which is a hidden field populated via a URL parameter).

This tutorial uses company ID as the lookup rule. You can add additional rules using Add condition. Example, you can lookup a record based on record ID and website. This method also assures a higher level of security.

Prefill form fields

Our form is configured to lookup the record. The last step is to use the record properties from this lookup to prefill the form fields.

Edit the Your name field, and under Prefill value type in @. This will open the references dialog. Find and select Company name under HubSpot lookup references.

Do the same for the Company website field.

Now click on Preview to open the form in a new tab. Edit the URL and add &company_id=xxxxxxx at the end, with a valid company ID. It should prefill the form with the company data.

Update company

We have successfully prefilled the form with company data. The last step is to create a workflow which will update the company in HubSpot when the form is submitted.

Click on the Workflows button on the top-left corner of the form editor, and then click on the Add workflow button.

Now edit the new workflow, and click on Add action. Under (select action) find HubSpot, and click on Connect to HubSpot.

Configure the action to Update a company, and create field mappings between the form fields and the company fields in HubSpot.

This workflow action will find a company with the given company ID, and update company properties.

Notes

In the above example we prefilled the form using data available to us when the form loads, i.e. the contact ID in the URL. We can also prefill the form based on user input. We call this dynamic prefill.

The lookup conditions reference a hidden field in the form. Instead, you can create a picklist field, or a one line text field, and use the value of this field to fetch the HubSpot record.

Formcrafts will watch this field for changes, and automatically update the lookup results.