Create and Edit Forms

With the forms editor, you can create and use forms to collect visitor information for your HubSpot CRM. Multi-step forms can be created using the forms editor. Style your form to reflect your business's identity and branding.

You can add your form to your HubSpot pages using the HubSpot form module, to an external site using the form embed code, or to a standalone page with a share link.

Create a new form

To create a new form:

• In your HubSpot account, navigate to Marketing > Forms.
• In the top right, click Create form.

Please note: You can only associate a form with a Business Unit when creating the form. Learn more about associating a form to a Business Unit.

• Select the Form Editor.
• In the top right, click Next.
• Select a pre-made template, or to build your own, select the template Start from blank.
• At the top, click the edit pencil icon to edit the form name.

Add and edit form fields

Add form fields to collect information from your website visitors and contacts. Each form field must be associated with a HubSpot property. To add a form field:

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the top left, click the + add icon.
• In the left panel, click and drag the field type onto the form preview on the right to include them on your form. Fields can be placed above, below, or next to other fields. 
• When adding a Phone number field, the country code you select from the dropdown menu will be set as the default for that field.
• In the right panel, click and enter the field label. When entering the field label, a list of similar existing properties will appear. 
  • In the Connect field to a property dialog box, click a suggested property.
  • To connect your form field to a different property, click Search properties. 

• To add a connected property, in the left panel, click to expand the Connected property section. Click the property that you want to connect to the form field. 
• To use an existing property as a connected property with a field on your form, use the search bar to search for an existing property. The object type of the field added can determine whether the form submission appears on the activity timeline of associated records.

• To create a new property and use it as a connected property with a field on your form:
  • Click Create new.
  • In the right panel, set up your form field.
  • Review your property rules, then click Create. By default, the option to Show in forms, pop-up forms, and bots will be selected. After creating your new property, it will be automatically associated with the form field. Learn how to manage your properties.

• To add a property as a field on your form, click Properties on the left panel:
  • Use the All properties dropdown menu to select contact, company, ticket or custom object properties.
  • If you're using a ticket property, click the dropdown menu in the dialog box and select help desk or an inbox to connect the form to. When the form is submitted, a ticket will be automatically created. 
  • To add the property as a field on your form, click and drag the property onto the form preview. Fields can be placed above, below, or next to other fields. 
• After adding your form field, to edit a field's options:
  • In the right panel, click the field in the form preview. 
  • In the left panel, click to expand the Field options section. The options here may vary depending on the field's property type, learn more about the additional field customization options available.
    
    • Help text: informational text below the field's label to help the visitor complete the field.
    • Placeholder text: text that appears in the input box for the field. The text will disappear when the visitor enters a value in the field, and will not come through in the submission, even if the field is left empty.
    • Default value: a value that will be submitted for the field by default unless changed by the visitor.
    • Hidden field: when this option is toggled on, the field will have its value set through the form submission, but the field will not appear to the visitor. Once the setting is toggled on, set the default value that'll pass into the property when the form is submitted.
    • Required field: when this option is toggled on, the field must be completed to submit the form. If a form field has been set as required, it cannot be set as hidden. 

Add additional form elements

Add additional Text & Media or Security to your form. Similar to form fields, these elements can be placed above, below, or next to other fields. 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the top left, click the + add icon.
• In the left panel, click Other.
• Click and drag the elements onto the form preview on the right to include them on your form.

Add conditional logic to forms (Content Hub or Marketing Hub Professional and Enterprise only)

After adding your form fields, you can set up conditional logic to hide or show relevant fields, or redirect visitors to other HubSpot pages based on their previous responses.

For each form, you can add up to 100 rules with 10 conditions per rule.

To set up conditional logic on your form: 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the top left, click the workflows logic icon.
• In the left panel, click Add logic.
• In the logic section, configure your conditional logic rules. For example, if you filter by City and select is any of Dublin, the conditional logic rule will only apply to records with the value Dublin.
  
• To delete a filter, click the deletee delete icon. 
• To clone a filter, click the duplicate clone icon. 
• To add additional filters to the rule, click add Add filter to this group.
• To add an additional group to the rule, click add Add group. 
• If you’ve added multiple filters or groups to the rule, click the AND OR dropdown menu between the filters and groups to apply AND or OR logic: 
  • AND: All filters in the rule must be true for the rule to be triggered. 
  • OR: Only one filter in the group must be true for the rule to be triggered. Learn more about AND or OR logic. 

• In the Then section, click the dropdown menu to select on-form actions. You can choose from the following:
  • Show a field: if the user's responses match the criteria set in your rules, show a specific field. 
  • Hide a field: if the user's responses match the criteria set in your rules, show a specific field. 
  • Skip to step: if the user's responses match the criteria set in your rules, skip to a specific step. To use this option, the form must have at least three steps. Learn more about adding form steps. 
  • Redirect to: if the user's responses match the criteria set in your rules, redirect them to a HubSpot page or an external URL. Users in a Sales Hub Enterprise or Service Hub Enterprise account can redirect forms to a meeting link on a scheduling page.

• Depending on the action selected, fill in the required fields. 
• To apply the conditional logic, Click Save and Activate. 

Manage conditional logic rules

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the top left, click the workflows logic icon.
• To add another rule, click Add logic.
• To edit a rule, click the Actions dropdown menu and select Edit. 
• To delete a rule, click the Actions dropdown menu and select Delete. 

Add and edit form steps 

Create multi-step forms to encourage users to complete multiple form segments instead of a single long form. To add a form step in a multi-step form:

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the right panel, hover between two existing steps and click the + add icon. A new step section will appear. Then, you can set up form fields and additional form elements in the step panel. 

• To rearrange the order of a step, hover over the step. Then, in the top left of the step, click and drag Step [x] to reposition it. 
• To clone a step, hover over the step and click the duplicate clone icon. You can't clone steps that include an email, reCAPTCHA, or data privacy fields.
• To delete a step, hover over the step and click the delete delete icon. 
• A progress bar visually indicates how much of the form a user has completed, improving form completion rates. To edit the progress bar: 
  • Hover over the progress bar and click the edit pencil icon. 

• • In the left panel, you can edit the progress bar and toggle it on or off: 
    • The progress bar is added to all forms by default. To turn off the progress bar, toggle the Progress bar switch off. This will remove the progress bar from all form steps.
    • In the Format section, choose how you want the text to appear on the progress bar. You can select from the following options: Show percentage on completion, Show number of steps, or Show no text. 

Edit the step layout and background banner 

Choose from predefined step layouts using the quick layout switcher and customize your form background banner. 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• Hover over the form step and click the edit pencil icon in the top right. 
• In the left panel, click the Style tab and select a step layout. 
• To remove the layout, click Remove layout in the top right. 

• Click Banner background to expand the section:
  
  • Toggle the Background color switch on to customize your form's background banner.
  • Select a color and opacity.
  • Click the Gradient dropdown menu to add a gradient.
  • Use an image for the banner background. You can upload an image from your HubSpot files, browse images from your computer's hard drive, or use AI assistants to generate images. 

Style your form

Customize the text, input fields, button, and background for your form and form steps. Style options configured in the Global Styling tab will be applied to all form steps. You cannot style individual form steps separately. 

Please note: it's not possible to set your form as raw HTML in the updated editor. Only forms built using the legacy editor can be set as raw HTML. 

To style your form: 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• On the left side, click the Styling icon.

• When customizing your Text, Input fields, or Button, you can choose from existing styles using the Quick field input styles. Alternatively, you can manually customize the style for each component of your form:
  • Fields: customize the field, including background and borders. You can also customize the font, font-size and colors for your labels, as well as the colors for your help text, placeholders, and error text. 
  • Buttons: customize the button's height, corner rounding, background, gradient, and add a drop shadow to the button. You can also customize the font, font-size, and color for the button text. 
  • Paragraph (Rich Text): customize the font, font size, and color for your body text. 
  • Heading: customize the font and text color of your heading. You can choose to add drop shadow to your header text. 
  • Background: customize the background for your form and form steps. You can choose to set a background color or use an image for the background. You can use AI assistants to generate images. You can also choose to set a border for your form.
  • Progress bar: customize the progress bar on your form, including the color of the progress line and the font of the progress bar. 

Automate your form 

Turn on simple automation features such as sending a follow-up email to a contact or sending automatic internal email notifications to other HubSpot users. You can also use the form submission as a trigger in a simple workflow. 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the left panel, click thesettis automati workflows automation icon.

• To create a simple workflow: 

  • In the Automate what happens after a form is submitted section:
    • To automatically trigger a follow-up email after each form submission, under Send an email after form submission, click Create this workflow. 
    • To create your own workflow from a blank template, under Create your own simple workflow, click Create new workflow. In the right slide-in panel, under Trigger the action(s) when, select the option A contact submitted a form. 
• To add other workflow actions, click the + plus icon. 
  
  
• To turn on a workflow, next to the workflow name, click to toggle the switch on. Then, click Got it. After publishing your simple workflow, any changes made to the workflow will automatically apply to currently enrolled contacts. 

Customize form settings

Configure the form's settings, including what happens to the corresponding contact after a form is submitted, user notification settings, and the form's default language. You can set the contact's marketing status, lifecycle stage, and more. Some options may not be displayed depending on your HubSpot subscription. 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the left panel, click the settings settings icon.
• On the General tab, configure the following general form settings:
  
  • Automatically create new contacts from unknown email addresses: select this option to create a new contact record for every submission with a unique email address. If the email address submitted matches an existing contact record in your database, the details on the existing record will be updated.
    • If this option is turned off, HubSpot will first attempt to associate the submission with an existing contact with the submitted email address. If no contact exists at that email address, HubSpot will recognize and update your contacts based on the cookies in their browsers. This may result in contacts being overwritten if the same form is submitted multiple times from the same device.
    • If this option is turned on, when a contact submits the form using a different email on a browser where there is already a cookie, views will not be tracked for this contact. The Pre-populate contact fields with known values option will also be automatically disabled.
  • Set new contacts as marketing contacts: if your HubSpot account has access to marketing contacts, you can automatically set any contacts who have submitted this form as marketing. This includes both new and existing contacts.
  • Pre-populate fields for returning visitors: if a contact previously visited your site and submitted a form, and HubSpot was able to store and track their cookies, any known field values can be pre-populated on the form. This option is enabled by default. Learn more about pre-populated form fields. 
    
  • Form shortening: if you've purchased Breeze Intelligence credits, you can streamline your forms by automatically hiding any form fields that can be filled in by Data Enrichment. Learn more about form shortening. 
  • Add to marketing campaign: if you have a Marketing Hub Professional or Enterprise subscription, you can associate the form with a campaign:
    • To associate your form with an existing campaign, click the Campaign dropdown menu and select a campaign.
    • To associate your form with a new campaign, click the Campaign dropdown menu and click Create campaign. Then, continue setting up your campaign. 
  • On submission, update contact and company lifecycle stage: click the Set lifecycle stage to dropdown menu and select a lifecycle stage. When visitors submit the form, any new or existing records will be set to the selected lifecycle stage. 
    • You cannot move a record's lifecycle stage backwards. If an existing contact or company with a later lifecycle stage submits a form, the lifecycle stage will not be updated. 
    • The lifecycle stage set in a form will overwrite the default lifecycle stage configured in your HubSpot settings.

• To customize submission settings, in the left panel, click the Submission Settings tab. Customize the following form submission settings: 
  • Send to contact owner: automatically send a notification to the contact's owner. If a contact has no owner, no notifications will be sent. Learn more about object ownership in HubSpot.
  • Send to other users: select the default teams or individuals to send submission email notifications to, regardless of contact ownership. Recipients set here will be overwritten by recipients set in the form options on HubSpot pages.
  • Additional email domains to block: enter specific email domains to block from form submission. For example, if you'd like to block submissions from email@domain.com, you can add domain.com. To block submissions from all free email providers, click to toggle the Block free email providers switch on. 

• To customize your form language settings, click the Language & Region tab. Click the Primary language dropdown menu, then select a default language for your form. Error messages, labels for default properties, help text, placeholder text, and default values will be translated into this language.
• To create an AI translation of your form (Marketing Hub or Content Hub Professional and Enterprise only):
  • Toggle the Enabled AI translations for all form content AI switch on.
  • In the Primary language dropdown menu, select the language into which you want to translate the form. Error messages, labels for default properties, help text, placeholder text, default values, custom labels, rich text, and consent text will be translated automatically into this language.
  • If you've updated your form since the previous translation, click Retranslate now to update the translation.

Manage live validation on form fields

If you’ve set validation rules for a property, these rules will apply to form fields, and visitors must meet these requirements to submit the form. Live validation on form fields gives visitors immediate feedback on their input, making it easier to correct errors and complete forms accurately.

For example, if you've set a validation rule for the Order Number property to contain only numeric values, visitors will receive feedback to correct any non-numeric entries.

By default, live validation on forms is turned on. To manage live validation on form fields: 

• In your HubSpot account, click the settings settings icon in the top navigation bar.

• In the left sidebar menu, navigate to Marketing > Forms.

• Click the Submission Settings tab. 
• Toggle the Enable live validation of form fields switch on or off.
• In the bottom left, click Save. 

Use your form

After creating a new form or making your form updates, you'll need to update your form to make the changes live. Then, add it to your HubSpot content, use the form embed code to add it to an external page, or share it as a standalone page with a share link. 

• In your HubSpot account, navigate to Marketing > Forms.
• Create a new form or hover over an existing form and click Edit. 
• In the top right, click Review and update to publish your form updates.
• To share your form, embed it on a HubSpot page or embed it on an external site, in the top right, click Share, then select from the following options:
  • Embed with HubSpot: embed your form on a HubSpot CMS website page, landing page, or with HubSpot CTAs. 
  • Get embed code: use an embed to add your form on an externally hosted page. To track analytics for your form on an external page, your HubSpot tracking code must be installed on the page. Learn more about adding a HubSpot form to an external site. 
    • At the bottom of the page, click Copy.
    • Paste the embed code into the HTML module on your page.
  • Copy a share link: use a URL to share the form as a standalone page.
    • Click Copy to copy the form page's URL to your clipboard.
    • In your browser, open a new window or tab and paste your form page's URL in the address bar to load it. You can also share the form page URL directly with others to give them access to the form.