Spacing between lines / Error State does not display correctly

Hi,

My form naturally has a space between name and email

Error state toggled

The email field has id: input_4. when i reduce the margin top, it displays correctly but error state hides the email placeholder

Looking at my css, is there a better way to write some of these?

Hiding the required field * ( i used form label top display none)

zero margin for top and bottom of form (form buttons wrapper and page section each have margin -30px, etc)

Any feedback is greatly appreciated.

Thank you!

Hello,

Thank you for reaching out.

The reason for this behavior is that you're targeting the "child element". So when you push it using margin-top, it gets cut off by his parent.

You should try to target the #id_4 instead of the #input_4.

This will affect the parent, and the weird behavior you're experiencing will disappear.

Gaetan

Hello,

Can you please check the other css as well?

I am also getting this error when I try to submit without completing the form.

As you can see, it hides the name field completely

Is there a way to remove all padding, margins from a form instead of using these 2 for example?

Thanks

Can you please try this CSS and see if this works for you.

@media screen and (max-width: 768px)

.pageLogo-mobile, ul.page-section {

  max-width: inherit;

  margin-top: 43px !important;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know how it goes.

Hi,

Here's the form, and its inside a narrow div:

http://emergeenergysolar.com/v1.html

I removed the first part since its always the same size on mobile vs desktop and I was left with this:

ul.page-section {

  max-width: inherit;

  margin-top: 43px !important;

}

This fixes that problem but it leaves a 43px gap on the top which is not what we want.

Is there a JS code I could add if errors are shown and that message pops up?

Other ideas?

Thanks,

How about hiding the error bar since it's redundant and at the same time showing the error below the field. In my opinion, error bar would be beneficial for long forms due to the "See Errors" button, but for short forms like this, you can just hide it.

If you are ok with that, you can disable it in form settings.

That is a great solution!

I agree on redundancy part, this is perfect.

Thank you!