What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to remove blurry red line around one of the field boxes?

    Asked by Esther17 on August 15, 2016 at 04:14 PM

    Hi there,

    I've just created this form but when I do something random in the email box, to see what comes up, it has a nice red line and everything but it also has this odd outer line in red (the faint blurry one) that I don't really want.. I've tried to remove it via css but everything I tried didn't seem to do anything.. perhaps I'm missing something?

    The form link is: http://homeatlast.ekdesigns.co.uk/retreats.html (a bit further down the page)

    or the form title is: Home at Last - Retreat Form

    Also, I don't suppose the 'Please fill the required fields' could be changed to white instead of red?  It's just that the green background makes it a little hard to read.

    Thanks!

    Esther.

    Page URL:
    http://homeatlast.ekdesigns.co.uk/retreats.html

    form-line-error required field
  • Profile Image
    JotForm Support

    Answered by jonathan on August 15, 2016 at 06:06 PM

    You must be referring to the required field error styles.

     

    Please try adding this CSS codes on your form.

     

    .form-line-error {

        box-shadow: none !important;

    }

     

     

    .form-button-error {

        color: #ffffff;

    }

     

    Let us know if this did not work.

    Thanks.

     

     

  • Profile Image

    Answered by Esther17 on August 16, 2016 at 06:26 AM

    Hi there,

    I've tried adding those bits in, which I think may have partly been in there before, but I don't think it worked.. or at least, it's not saving so it's hard to tell!  The saving dotted circle keeps going round and round.. I refreshed the page but it's still the same.  Perhaps you could check my code to see if I've done it correctly?

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on August 16, 2016 at 09:25 AM

    I apologize. I also applied them on test form and they were not working.

     

    I just realize your form was actually heavy formatted already with a lot of CSS codes. It seems the existing @media codes were overwrithing the regular CSS codes.

    I'll check more how it can be fixed. I'll get back shortly.

  • Profile Image

    Answered by Esther17 on August 17, 2016 at 12:08 PM

    Hi there, any ideas about how this could be fixed yet?

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Jim_R on August 17, 2016 at 02:38 PM

    Hello @Esther17, to check if the actual CSS codes work, I stripped off your form's entire custom CSS codes and only entered the declaration to remove the box-shadow and it worked.

    With that in mind, due to the number of custom codes injected on your form, there's definitely something that overwrites the codes suggested by my colleague (and that's what I'm trying to figure out right now).

    Give me some time and I'll update you on this same thread if I stumble upon something.

    Thanks in advance for your patience.

  • Profile Image
    JotForm Support

    Answered by Jim_R on August 17, 2016 at 02:58 PM

    All right, I managed to find a way around it. I'm not sure what's causing the problem but I fixed it by declaring the CSS at the top before all the other CSS codes you injected.

    For testing purposes, these are what I did to my cloned form:

    1. I have set the fields as required so it's easier to emulate the box shadow and text color

    2. I changed the background to closely match what you have on your website (so it's easier to see what's happening)

    RESULT:

    So, just use the same CSS codes that my colleague, Jonathan, provided, only this time, place it right at the top (no need to use the !important tag):

    .form-line-error {

        box-shadow: none;

    }

    .form-button-error {

        color: #ffffff;

    }

    ...the rest of your custom css codes goes here.

    Give it a whirl and let us know how it goes.