- Starter or Enterprise
- Starter, Professional, or Enterprise
- Starter, Professional, or Enterprise
- 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.
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.
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
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:
|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.
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.
If you choose to clone the default form module you will get everything from the form field above including the following.
|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.
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
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.
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.
These 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.
Another 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".
This 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.
Thank you for your feedback, it means a lot to us.