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

What are HubSpot Forms?

HubSpot forms allow you to capture multiple types of information from users (such as address information, email addresses, and feedback) which you can then use throughout the HubSpot Ecosystem in areas such as smart content, workflows, content personalization, and more in your day-to-day operations. They are a core part of the HubSpot suite and are available across all hubs of the platform (Marketing, Sales, and Service), not just the CMS. 

To learn how to create forms on HubSpot, you can refer to our knowledge base article here.

How can I add a HubSpot form to my templates?

Once you have your HubSpot forms created, you can then add these forms to your templates inside of the CMS. There are multiple ways that a form can be added to a template and which one you choose depends on your use case.

Using the form module

The common method used for adding a form to a template is by including the form module. This would allow content editors to be able to select a form and configure options for the form on the page editor. Below on lines 6 & 7 is a sample of how the form module can be used inside of your drag and drop area on your template to generate the form selection module in the page editor. 

HubL
{% 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 are not using a drag and drop area in your coded template, you would then use the forms module with the following syntax

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

Using a custom module

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

Using the form field vs cloning the default form module

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

Options Description
Form selection dropdown Choosing a form from the dropdown menu that will be rendered on the page
Form submission redirect Allows you to choose if a user will be redirected or shown an inline thank you message when the form is submitted
Redirect link If you choose to redirect a user, 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 by selecting it through the Add field > Selectors > Form options.

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 the following.

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.
GoToWebinar link Specifies the GoToWebinar webinar to enroll contacts who submit the form into.

The Salesforce Campaign and GoToWebinar Link options will only be shown and available when you have the corresponding integration installed.

You can then build upon this and create additional options that can be used alongside the default form module. Below is an example of a cloned default module where we have added a wrapping <section> tag around the form and an additional Color field for giving the section a background color. The added items have been outlined. 

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 we advise referencing the HubL tags page which details all of the parameters available.

Using the form embed code

When adding forms to external non-HubSpot CMS pages (and in rare situations on HubSpot CMS Pages themselves) you can make use of the HubSpot Form Embed Code. This is a javascript snippet that you can add to your external CMS pages (or a HubSpot Custom Module) to generate your form while also providing the ability to extend the functionality of the form. Below is a sample of the form embed code with extended functionality. 

HTML
<!--[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>

How can I style my HubSpot forms?

While HubSpot offers form styling from a global setting and form specific setting level, how you style your HubSpot Forms is dependent upon how they are added to your CMS pages.

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 form specific level settings. 

Styling forms added to HubSpot CMS Pages via the HubSpot Form Module or Form Tag

If your HubSpot form is being added to your page(s) that are hosted on your HubSpot CMS, you can simply use your website's stylesheets to add the desired CSS markup and style your HubSpot Forms. HubSpot includes a number of different classes and attributes on forms that are generated where you can apply styling. As a starting point, please refer to the HubSpot Boilerplate's Form CSS, which represents the best practices for how to style forms.

Styling forms added via a Custom Module

If your form is being implemented inside of a custom module, you can add your form styling code to the CSS Pane inside of the custom module. This will ensure that whenever this module is added to a page, that page will also have the added form styling. When using custom modules, we recommend adding a wrapper to the form and using that 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 our custom module from above with form styling added to the CSS Pane.

Custom Module with CSS

Styling forms added via the HubSpot Form Embed Code

HubSpot offers different options for styling your HubSpot Forms when using the Form Embed Code. One option is using the global form styling settings where you can choose pre-defined settings for all your forms. 

Global Form StylesThese settings are the defaults for the form embed version of every form you create in your account. You can override these styles on a form-by-form basis using the options located in your Styles & preview tab in the form editor. 

Form level override settingsAnother option for styling your forms is to use your own stylesheets from your website. When choosing to use your own stylesheets with the form embed code, we strongly recommend toggling on the option "Set as raw HTML form".

Set as raw HTML form settingThis will allow the form to be rendered on your page as HTML instead of the standard IFRAME rendering (which includes the CSS styling selected from the global or form level settings) that is done when using the embed code. For more information on styling your form embeds please refer to our knowledge base article.