Forms

Set up and style forms on HubSpot pages

Last updated: October 13, 2020

Applies to:

All products and plans

Once you've created a form in HubSpot, you can add it to any form module on a HubSpot page. On a page-by-page basis, you can also set up follow-up actions and customize the styling for elements of your form, including the submit button and form fields.

Please note: settings and styling changes will only apply to the form module on the selected page and will not affect your form on other pages.

Set up your forms

  • In your HubSpot account, navigate to your landing pages or website pages.
  • Hover over an existing page with a form module and click Edit, or create a new page.
  • In the page editor, click the form module.
  • On the Options tab in the left panel, customize the form's settings for this page:
    • Form title: enter a name for the form on this page.
    • Choose a form: click the dropdown menu to select the form that will appear in the module on this page. Click the Actions dropdown menu to create a new form, clone a form, view other pages using this form or navigate to the full forms editor. Learn more about setting up forms.
form-editor-options
    • Navigate to the Form content section to edit your form fields, button text and GDPR settings for your form.
      • Form fields: Drag and drop fields to edit the order they will display. To add additional form fields click Add another form field, click the Choose a property dropdown menu and use the search bar to search for a field. 

Please note: it is not possible to drag and drop form fields in the inline editor for fields in multi-column forms or when part of a custom module.

move-form-fields
    • Button text: enter the text to display on the button on your form.
    • GDPR options: in the dropdown menu, select the notice and consent information to display on your form.
    • Captcha (SPAM prevention): click to toggle the Captcha (SPAM prevention) switch on to display Google's invisible reCAPTCHA.
  • Navigate to the Thank you section to configure what happens when a visitor submits on your form.
    • What will a visitor see after submitting your form: customize the visitor's experience when they submit your form on this page. If you select Redirect to another page, click the Redirect link dropdown menu to select a HubSpot thank you page or enter a URL. If you select Display an inline thank you message, enter a thank you message in the text box.
  • In the Form options section, click to toggle the Always create new contact for email address to on to create a new contact record for every form submission with an email address even if they already exist on your HubSpot account.
  • Configure your form submission notifications and follow up emails.
    • Send form notifications to specified email addresses instead of the form defaults: by default, form submission notifications will be sent to any recipients added in the form's options. To overwrite the form's default recipients and select notification recipients for submissions on this page, click to toggle the Send notifications to specified email addresses instead of the form defaults switch on. Once the setting is enabled, click the Email addresses dropdown menu to select recipients.
    • Add to workflow: click to toggle the Add to workflow switch on to automatically enroll contacts into a specific workflow when they submit the selected form on this page. Once the setting is enabled, click the Workflow dropdown menu to select a workflow for enrollment or click Create new to create a new workflow..
    • Send a follow-up email: click to toggle Send a follow-up email switch on to automatically send a follow-up email to contacts when they submit the selected form on this page. Once the setting is enabled, click the Email dropdown menu to select a follow-up email. To make changes to the selected email, click Edit, or click Create new to create a new email.
    • Salesforce campaign: if you have the Salesforce integration enabled, you can associate a form with an active Salesforce campaign by clicking the dropdown menu and selecting a campaign. Learn more about associating forms with Salesforce campaigns.
  • Click Apply changes.

Style your forms on HubSpot pages

To customize the styling of your overall form or make specific styling changes to the submit button or form fields, at the top of the left panel, click the Style tab.

Please note: forms that appear on HubSpot pages can only be custom styled on a page-by-page basis. Embedded forms on external pages or standalone form pages must be styled in the form editor or styled with CSS in your external stylesheet.
  • At the top, use the tabs to select the element of your form you want to style. 
edit-form-style
  • Customize the selected element of your form using the text and alignment options below.
  • Click Apply changes to save your changes to the module.
  • Click Publish or Update to take your changes to the page live.