topic Form Field Displaying Larger Than Preview in Lead Capture Tools

Form Field Displaying Larger Than Preview

CTreinen — Tue, 11 Mar 2025 20:30:27 GMT

I 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!

This is what it looks like on the landing pageThis is what it looks like in the form preview screen

Re: Form Field Displaying Larger Than Preview

JStreit1 — Tue, 11 Mar 2025 21:05:45 GMT

In 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 🙂

Re: Form Field Displaying Larger Than Preview

CTreinen — Fri, 21 Mar 2025 16:57:23 GMT

You directed me to the right areas to look, and after some frustration learning some CSS, I was able to write, edit, and test my way into fixing this issue. Thank you, I really appreciate the help!

Re: Form Field Displaying Larger Than Preview

JStreit1 — Fri, 21 Mar 2025 16:59:45 GMT

Wonderful - I'm so glad you were able to get the styling to work!