HubSpot forms

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Starter or Enterprise
  • Sales Hub
    • Starter, Professional, or Enterprise
  • Service Hub
    • Starter, Professional, or Enterprise
  • CMS Hub
    • Professional or Enterprise

Use HubSpot forms to capture information from users which you can then access throughout HubSpot. Captured form data can be used in assets such as smart content, lists, workflows, content personalization, and more.

Forms are a core part of the HubSpot suite, and can be created in a HubSpot account of any subscription level. You can share links to forms directly with users, submit form data via the API, and embed them on your website pages using the CMS.

In this guide, learn more about how to incorporate forms into your website with the CMS. To learn how to create forms on HubSpot, check out HubSpot's Knowledge Base.

Adding forms to website pages

After creating a HubSpot form, you can add it to your templates and pages. There are multiple ways that a form can be added to a template and which one you choose depends on your use case. Below, learn how to add forms to a template using the following methods:

Using the form module

Using the default form module, content creators can select forms and configure form options within the page editor. To enable this, you can add the form module to a drag and drop area in your template.   

{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %} {% dnd_section vertical_alignment='MIDDLE' %} {% dnd_column width=6, offset=6 %} {% dnd_row %} <!-- Form module tag for use in templates --> {% dnd_module path='@hubspot/form' %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

If you're not using a drag and drop area in your coded template, you can generate the forms module with the following syntax. Using this tag, you can also specify form details, such as setting a specific form or its redirect options. You can learn more about using the form HubL tag in the section below.

{% module "form" path="@hubspot/form" %}

Using a custom module

There are some cases where you may be creating a custom module that incorporates a form alongside some other content, such as images or text blocks. To accomplish this, you can either use the form field or clone the existing form module and build your new module from there as a starting point. 

The form field is a simpler version of the form module that gives you basic form functionality, including:

Options Description
Form selection dropdown A dropdown menu that enables content creators to select an existing form. 
Form submission redirect An option for choosing whether the submitter will be redirected or shown an inline thank you message on form submission.
Redirect link If you choose to redirect a submitter, you can enter the URL of the page the user will be redirected to.
Thank you message If you choose to show an inline thank you message, you can enter your message here.

You can add the form field to a module in the design manager by selecting it through the Add field > Selectors > Form option.

Add the form field to your module

From there, you can then copy the snippet for the form field to add to your custom module by choosing Actions > Copy snippet when hovering over the field in the editor.

copy the form snippet for your field

If you choose to clone the default form module you will get everything from the form field above, including:

Options Description
Title Add a that will be displayed above the form when its rendered.
Email notification override A toggle that will allow you to override the default email address for the form notifications. If toggled on, you will see a text field to add the new email addresses.
Add to workflow A toggle that will let you enroll submissions into the desired workflow. If toggled on, you will be presented with a dropdown to choose a workflow.
Follow up email A toggle that will let you send a follow-up email once the form has been submitted. If toggled on, you will be presented with a dropdown to choose a follow-up email. If you don't have an existing one, you will be given the option to create a new one.
Salesforce campaign Specifies the Salesforce campaign to enroll contacts who submit the form into. Only available if the Salesforce integration is installed.
GoToWebinar link Specifies the GoToWebinar webinar to enroll contacts who submit the form into. Only available if the GoToWebinar integration is installed.

You can further build your form with additional options that can be used alongside the default form module. Below is an example of a cloned default module wrapped in a <section> tag and with an additional color field to add a background color to the section.

Adding onto the cloned form module

Using the form HubL tag

The module form field generates a HubL form tag when you copy snippet, as mentioned above. The HubL tag has many parameters you can provide. It's easiest to use copy snippet when working from the design manager. When working locally, refer to the HubL tags documentation, which details all of the parameters available.

{% module "form" path="@hubspot/form" form={ "form_id": "9e633e9f-0634-498e-917c-f01e355e83c6", "response_type": "redirect", "message": "Thanks for submitting the form.", "redirect_id": null, "redirect_url": "http://www.google.com" } %}

Using the form embed code

You can use a JavaScript embed code to add a form to page where a module or HubL tag isn't ideal, such as on external pages. Using this method, you can also extend the functionality of the form through advanced options. Below is a sample of the form embed code with extended functionality. 

<!--[if lte IE 8]> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "[YourPortalIdHere]", formId: "00000000-0000-0000-0000-000000000000", cssClass: "class-applied-to-form", submitButtonClass: "class-applied-to-submit-button", onFormSubmit: function($form) { // YOUR SCRIPT HERE } }); </script>

Form styling

While HubSpot offers form styling from a global setting and form specific setting level, you can also style a form depending on how it's added to your CMS pages.

Please note: all forms generated on the HubSpot CMS (excluding using the form embed code) will ignore any styling that is configured via the global form settings or the form's individual settings. 

Styling forms via the default form module or HubL tag

HubSpot forms added to HubSpot pages can be styled using your website's CSS. HubSpot includes a number of different classes and attributes on forms that are generated where you can apply styling. As a starting point, refer to the HubSpot Boilerplate's form CSS, which represents the best practices for how to style forms.

Styling forms via a custom module

Forms inside custom modules can be styled by CSS in the module's CSS pane within the design manager. By keeping CSS scoped to the module, you can ensure that whenever the module is added to a page, the styling comes with it. It's recommended to add a wrapper to the form, then using that wrapper as the top-level selector for the CSS. This will prevent your custom module's form styling from being overwritten by additional styles in your websites main stylesheet. Below is a screenshot of the custom module from above with form styling added to the CSS Pane.

Custom Module with CSS

Styling forms added via the form embed code

When using the form embed code, you can style the form using the global form styling settings or using your website's CSS.

Using the global form styling settings enables you to configure default settings for every form in the account. You can also override these styles on an individual form within the form editor.

Global Form Styles

When choosing to style the form using your website's CSS, you should first turn on the option Set as raw HTML form within the form editor. This allows the form to be rendered on the page as HTML instead of an iframe, which makes styling easier. Learn more about styling embedded forms on the Knowledge Base.

Set as raw HTML form setting

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.