How to create a form for your landing page

Last Updated: March 27, 2014

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.

2. Create 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.

3. Enter in the details for your 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.

 

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.
6. Configure the form options

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.

7. Save the form

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.

9. How to link the form to a landing page

Next Article: How to create a thank you page