Form Field Placement & length Issues

Hi there,

I was wondering if anyone had any advice or suggestions on how to fix an issue I’m having with form field styling.

On the landing page where we’re using the form, there doesn’t seem to be a way to stylize the form fields so they are long enough.

If I add padding in or around the field, you are forced to click into the field and have your cursor in the middle.

If you remove the padding the field becomes super short and wonky looking.

Any suggestions or guidance would be very much appreciated

Hello @TBromb, Happy Friday!

Thank you for posting in our Community! Are you able to access the page source to edit from there? ( This knowledge base) and ( This knowledge base ) contains more information.

I want to invite our top experts to this conversation @danmoyle @GRajput @TomM2 any suggestions for the @TBromb matter?

Thank you,

Pam

Hi @TBromb

  1. Yes we could stylize the form so that it doesn’t looks long for that I have Suggestions for you :

We could use the placeholder texts boxes instead of using labels in the top of fields as in the screenshot below :

2. Another way is that we could use the HubSpot Progressive profiling functionality which asks information step by step. Here is the link for better understanding of Progressive profiling : Use progressive fields in forms (legacy)

@TBromb this would really be down to your website’s stylesheet, it looks like you’re already adding in some custom styling (those icons aren’t standard HubSpot forms) so you can continue to style the fields through the stylesheet you’re using to do that if you like!

You’ll need to find the css classes for the fields and set their width through a css rule for the field width! There’s a great guide on this on the knowledgebase here.

You’ll need some experience with css though!

@TBromb it looks like @TomM2 probably has your answer.

My thought is to start with a few questions.

Is the landing page you’re putting this form on, a HubSpot page? If yes, the theme settings are where I’d go to see what those say. If not, it’s on your main site’s CSS.

Also, in your form settings, what do you have set for your form width?

When you say the form fields aren’t long enough - what do you mean by that? Is there not enough space for the characters you need? That would go back to form width for me. It should be set to 100% width, or if you want a specific pixel width you could do that, too. It’s in the form settings under “style & preview,” under “style,” and general.

Hope that further helps!

Thanks for the tag @PamCotton :slightly_smiling_face: