Difficulty Level: Intermediate. This post assumes a solid understanding of HubSpot tools and some technical knowledge. Instructions are detailed and can be applied as they appear on the post.
Last Updated: October 31, 2019
When you add a form module to a template, it'll display a dummy form that has four fields (First Name, Last Name, Company and Email) and a submit button with the text "Get Free Widget".
This dummy form doesn't have a wrapper around the submit button so, unless you set it to display "block", margin "auto" and set a fixed width (which is not ideal), it's tricky to center align it.
However, a live form on HubSpot wraps the button in a div with the class "actions" within another div with the classes "hs_submit" and "hs-submit":
You can add a text-align "center" to either of these classes to center-align the submit button. Adding the following CSS snippet to your stylesheet should do the trick:
.hs-form .hs-submit { text-align: center; }
Written by: Stephanie O'Gay Garcia
Last Updated: October 31, 2019
I'd appreciate if you could take a moment to let me know how I can improve this article.
Hi! 👋 I'm a freelance HubSpot Website Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.
HubSpot is a full suite of Marketing, Sales and Services tools. Learn more here.
Note: as a HubSpot affiliate I will earn commission if you decide HubSpot's the right software for you! :)