Form Field Displaying Larger Than Preview
SOLVEI am creating a new mulit-stage form to mock up what this would look like on one of our HubSpot landing pages. I have my field padding set to 14px for the top and bottom, and on the preview, everything looks exactly how I want it. When I apply it to my Landing Page, the Phone Number field only seems to grow by 10 - 15px, making the second stage look unpolished.
I've attached some screenshots below. Does anyone know why this could be happening or any fixes?
Thank you in advance!
1 Accepted solution
Form Field Displaying Larger Than Preview
SOLVEIn many cases, the landing pages have CSS that overrides any styles you may set in the form editor - not always ideal but does have its benefits to maintain design consistency.
Depending on how your landing page template and theme were constructed, you might have the ability to edit the field styles, but sometimes the options are quite limited.
If you are unable to edit the field styles with either of the two suggested routes below, there is always the custom development route which would require a developer with HubSpot exeprience to go into the backend of the template and adjust the CSS styles for you. I'm happy to help scope this out if you need.
Two options to try:
1. Style tab of the Form module: Sometimes you have the option to adjust Field level styles within the module itself. If you don't see the option you need, then it was not developed to be an editable style setting and would require custom development.
2. Theme editor: Navigate to Settings > Content > Themes & Modules. From here, click into themes and "edit them" of the one you are using (some people have multiple installed). Depending on how the theme was developed, it might give you granular form style options. If not, then custom development would be needed to adjust styles for you.
I know its not ideal to hear that you might need custom development to help with the styling! Hopefully those two routes provide you with the edit options you need 🙂
Form Field Displaying Larger Than Preview
SOLVEIn many cases, the landing pages have CSS that overrides any styles you may set in the form editor - not always ideal but does have its benefits to maintain design consistency.
Depending on how your landing page template and theme were constructed, you might have the ability to edit the field styles, but sometimes the options are quite limited.
If you are unable to edit the field styles with either of the two suggested routes below, there is always the custom development route which would require a developer with HubSpot exeprience to go into the backend of the template and adjust the CSS styles for you. I'm happy to help scope this out if you need.
Two options to try:
1. Style tab of the Form module: Sometimes you have the option to adjust Field level styles within the module itself. If you don't see the option you need, then it was not developed to be an editable style setting and would require custom development.
2. Theme editor: Navigate to Settings > Content > Themes & Modules. From here, click into themes and "edit them" of the one you are using (some people have multiple installed). Depending on how the theme was developed, it might give you granular form style options. If not, then custom development would be needed to adjust styles for you.
I know its not ideal to hear that you might need custom development to help with the styling! Hopefully those two routes provide you with the edit options you need 🙂
