Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

Create HubSpot Forms

How to add Forms to website pages in HubSpot and modify the layout

icon-maka-form

FORMS

Adding forms to your website allows you to gather helpful information about your visitors and contacts. Easily create compelling form designs with your choice of layouts and style settings.

sec-form-style-boxed-glassmorphism

Page Speed Impact

LOW

Forms with fewer fields, like newsletter subscription forms with only an email field, have less code that has to load.

MEDIUM

Even with limited styling, forms with multiple fields will have a greater impact on page speed.

HubSpot's code for forms adds extra code to the page that has to be loaded.

Additional impact on desktop and mobile if images are added to the rich-text editor without lazy loading and/or compression.

An image or video background also impacts page performance.

TIPS

Convert images to WebP where possible to meet criteria to serve images in next-gen format.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

Created dedicated pages for your forms and create compelling CTA sections on your content pages instead of adding the form to the page directly.

FAQ

What is the difference between the POWER Sec Form and HubSpot Form module?

The POWER Sec Form allows you to choose from a variety of form designs and layouts and is a pre-styled section.

The HubSpot Form module is only the form component that can be used in custom sections. The styling for this form can be done separately in Theme Settings.

How do I translate my forms?
  HubSpot Knowledge Base create a form in multiple languages

Setup Instructions

When creating forms for POWER theme, the styles will be applied automatically by the theme or module settings, so you won't need to create the style in the Form Editor.

Create Forms for Your HubSpot Website Pages

Marketing  → Lead Capture → Forms

To create a new form, click Create Form and complete the steps.

  HubSpot Knowledge Base create forms in HubSpot
  HubSpot Knowledge Base create a form in multiple languages

Helpful Links: Settings for Theme Styles and Settings for the Sec Form Module.

Form Styles for POWER Theme

Theme Settings → Styling → Forms

The global form style can be configured in the Theme Settings, which will then be applied to all pages with the POWER Sec Forms module.

Theme Settings → Colors → HubSpot Default → HubSpot Forms Module

You also have the option to set the colors for the default HubSpot Forms module globally in Theme Settings.

Theme Settings → Colors → HubSpot Default → Submit Button

Option to configure the colors globally for the Submit Button used for HubSpot Forms.

Marketing → Website → Website Pages

Within the POWER Sec Forms module, you also have the option to override the global settings and change the style and layout of the form.

POWER Footer → Subscription Form

Option to add a Subscription Form to your website footer. How to set up the Subscription Form in the Footer.

The Footer is designed to work with a form that has just one field for Email Address, adding additional fields will break the styling and you will see the button in the wrong spot.

If you need a form with more fields, we recommend creating a section above the footer using the POWER Sec Form module to style a form that will capture the information you need.

Once set up, you can use the Save Section feature to easily add this to the pages where you need the form to appear or create a Global Module that can be added to multiple pages and edited in one location (similar to the header and footer).

Another option to further reduce the impact on page speed is to create dedicated pages for your website forms (also easier to track conversions) and create compelling CTA sections on your content pages that link to the form page.

Next Steps

Now you're ready to start converting inbound leads, get newsletter signups, and gather important information across your website so it's time to learn a bit about CTAs.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.