Spacing between lines / Error State does not display correctly

  • Profile Image
    Asked on December 11, 2020 at 03:12 PM


    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!

  • Profile Image
    Answered on December 11, 2020 at 04:51 PM


    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.


  • Profile Image
    Answered on December 11, 2020 at 05:12 PM


    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

    1607724660_5fd3ee74724f0_Screenshot 2020

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



  • Profile Image
    Answered on December 11, 2020 at 08:06 PM

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

    @media screen and (max-width: 768px)
    .pageLogo-mobile, {
      max-width: inherit;
      margin-top: 43px !important;

    1607735197_5fd4179d49895_Clone of Form -


    Let us know how it goes.

  • Profile Image
    Answered on December 11, 2020 at 09:44 PM

    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.

    1607740985_5fd42e39e8a75_The Easiest Onl

  • Profile Image
    Answered on December 11, 2020 at 09:55 PM

    That is a great solution!

    I agree on redundancy part, this is perfect.

    Thank you!