Contact

    Center align a HubSpot form submit button

    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.

    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.  

    HubSpot form markup

     

    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":

    HubSpot live form markup

     

    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

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    New call-to-action
    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    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.