How to create a form for your landing page

Last updated: June 13, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise
HubSpot forms help you gather new contacts for your company and obtain additional information from your existing contacts.

Instructions

1. Go to the Forms tool

Navigate to Contacts > Forms.

2. Create a new form

Click on the Create new form button to begin creating a new form.

If you have the professional or enterprise version of HubSpot, you might find that you want to reuse and edit forms across multiple landing pages so that you can use the progressive profiling feature to hide fields a visitor has already answered and replace them with a question they have not yet answered. To learn more about progressive profiling, click here

3. Enter in the details for your form

In this next step, you should enter a name for the form and make any changes to the submit button text using the Details tab.

The form name is only used inside your HubSpot account and cannot be seen by the visitor, so choose a name that is descriptive enough for your colleagues to be able to find it later on when linking it to a landing page.

The submit button text should include an action verb so that your visitors clearly understand the benefit of completing the form.

4. Choose the fields for the form

Click on the Fields tab and drag and drop the fields that you want on the form into the default fields section of the page.

Insert-field
If you haven't already created a contact property for a detail that you want to capture on the form, you can easily create a new one by clicking on the Create new button next to the Search fields box.

5. Edit any of your form fields

When editing a form field, you have several customization options.

Make field required - When this option is selected, a visitor will not be able to submit the form until this field is completed.

Toggle the button to make the field required.

Make field hidden - Selecting this option will make this field invisible to the visitor. It may then be used for other internal purposes such as setting a default value by which to categorize submissions from this form. You can use this option to set a property value for a field that sets a contact's persona or lifecycle stage.

To access this option, click on the Edit icon above a field.

Make smart field - Selecting this option will hide this field if the visitor has previously answered this question or if the property already has a value on their Contact record. The email field will always remain visible on the form, but will be pre-populated with the data from previous submissions.

Toggle the button to make the field smart.

Label - This will be the main label for the form field.

Placeholder - This is the text that appears in the form field box before anything is typed.

Help Text - Any text entered here will be presented beneath the field's label to help the user complete the field.

Default Value - Entering a default value will place that value in the field. This value will be submitted unless the user changes the value.

To access these options, click on the Edit icon above a field.

6. Configure the form options

  • Add separator - You can drag in a separator to build headers or custom HTML separators into your forms.
  • Pre-populate fields with known values - You have the option to pre-populate any fields with the known value for the visitor. So if you have a visitor that has already given you their first name, last name and email address and your form asks for those details, those fields would be pre-populated with the answers they've already given you. You could also make common fields like those smart fields so that you don't ask a visitor for a detail that you already know about them.
  • Disable cookie tracking? - You can disable cookie tracking if you want each form submission to create a new contact. Disable cookie tracking if you want to manually enter contacts and prevent them from deduplicating. Be aware that if you disable cookie tracking, you won't be able to make smart fields, and analytic information such as page view history and source data will not be available.
  • Notified when submitted - Type in the email addresses of who should be notified when this form is completed. You can separate multiple email addresses with commas.
HubSpot Help article screenshot

7. Save the form

Click on the Save form button to save your changes to the form. If you're editing an existing form that already appears on live pages, saving the form here will automatically update the form on those pages.

8. Preview the form

You can click on the preview toggle to look at what the form would look like with default styling on a landing page.

 

9. How to link the form to a landing page

When editing a landing page, you can link a form to it by using the Form drop-down menu to select the form you created. Please note that your landing page must contain a Form module in order to add the form.

What happens when a visitor hits the submit button?

When a visitor fills out your form and hits the submit button, you will want to give them access to the content of the offer right away. The two ways easiest to do this are to redirect them to a thank you page or replace the form on the landing page with an inline thank you message.

Makes sure you choose Redirect to another page or Display an inline thank you message, then either choose the page you're redirecting your visitor to or the thank you message they'll receive.

HubSpot Help article screenshot

How do I change the style of the form and the form submit button?

If, after adding your form to your landing page, you want to change the look of your form, take a look at some articles below that will help you accomplish this:

Previous article:

Next article: