CMS Development

Aytan_l
Member

How to center the submit button in form module on landing page?

Hi! I am relatively new to Hubspot. I have a form in a landing page and I would like to have the submit button sit in the center and not be on the left.

 

Also we are seeing that on an iPhone the button looks like a simple pill whereas on Android/Desktop it is the regular rectangle shape.

 

Where can I access how to make the changes? Thanks!

0 Upvotes
1 Reply 1
Jsum
Key Advisor

How to center the submit button in form module on landing page?

@Aytan_l,

 

Target the specific button or all buttons in your css. 

 

You'll want to check out this and this to understand about using the css "appearance:none;" attribute.

 

Then use the inspector tool in your browser (ctl+shift+i or cmd+shift+i an click on the element selector in the top left of the console.) and checkout how hubspots form wrapping works.

 

I would almost guarantee  that your buttons are set to "display: inline;". You can either apply :text-align: center; to it's wrapper (ensure that he wrapper is 100% of the form width) or you can apply display: block; margin: o auto; to the button itself.

 

The latter option will change the submit button to a block element so it will stetch to 100% of it's container unless you put a width limit on it such as "width: 250px;". the "margin: 0 auto;" part is what makes it center.