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

    Change required Textbox field border to color red when empty

    Asked by members1 on December 07, 2014 at 06:28 AM

    Hi;

    In this form I have used

    .form-line-error {

    background:none ;

    }

    .form-error-message {

    display: none !important;

    }

    .form-required {

    color: transparent !important;

    }

    #input_1 {width: 188px !important;}.form-submit-reset{

    font-size:0;

    }.form-submit-reset:after {

    content: "Cancel";

    font-size: 12px;

     

    }

    CSS code... but I also want to remove the RED border (around the input field) which appears when visitor proceed without providing his/her member Id. 

    I want to do it because when this red border appears then the size of the input field shrink but I want that the red border appears with out shrinking the input field size. If it is possible then please help me other wise please provided me the CSS code which make disable the red border.  

    ACTUALLY I WANT JUST TO CHANGE THE TEXT BOX (INPUT FIELD) BORDER INTO SIMPLE RED FROM GRAY (WHICH APPEARS NORMALLY) WHEN ANY VISITOR WILL TRY TO PROCEED WITHOUT FILLING MEMBER CODE.

    Thanks in advance.....:)

    Page URL:
    http://form.jotform.me/form/43254872974466

    shrink message textbox field required field
  • Profile Image
    JotForm Support

    Answered by jonathan on December 07, 2014 at 08:20 AM

    Hi,

    Can you please clarify what exactly it was you wanted to achieve on the Textbox field *required indicator?

    I checked your jotform http://www.jotform.me/form/43254872974466 and I can already see the changes you described (base on my understanding) happening on the form.

    See screenshot below

     

    Is this not what you wanted to achieved? 

    Please describe more with details and we will assist you have it on your jotform.

    Thanks.

     

     

     

  • Profile Image

    Answered by members1 on December 07, 2014 at 08:31 AM

    Hi jonathan;

    If you minutely check the form after click on proceed then you can see that when this red border appears then the size of the input field shrink (it will be easy for you if you see the position of the buttons) and the border is not clear... there is little shadow and the border is not just a single red border without shadow.

    I want to remove this shadow and want to make my input field FIXED WIDTH (After clicking Proceed, without providing Member ID).

    and Thanks a lot for your reply............

     

  • Profile Image

    Answered by members1 on December 07, 2014 at 09:08 AM

    Hi jonathan;

    Now I am able to solve the problem "the border is not clear... there is little shadow and the border is not just a single red border without shadow. by injecting this code 

    textarea:focus, input:focus{

    outline: 0;

    }

    .form-line-error input:not(#coupon-input), .form-line-error textarea {

    border: 1px solid #FF3030;

    -moz-box-shadow: 0 0 0px #FF3030;

    -webkit-box-shadow: 0 0 0px #FF3030;

    box-shadow: 0 0 0px #FF3030;

    background-color: #FFFFFF;

    }

    Please help me for the SHRINK problem.

  • Profile Image
    JotForm Support

    Answered by jonathan on December 07, 2014 at 09:43 AM

    Hi,

    Thank you for the clarification.

    Upon closer inspection, I can see now what you meant. 

    The Textbox and buttons indeed look likes they shrink from normal size when the required validation is triggered.

     

     

    Let me check for the right CSS code to prevent this.

    I will get back to you quickly with update.

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on December 07, 2014 at 10:46 AM

    Hi,

    Please test this jotform http://www.jotform.me/form/43404363329452

    This are the CSS code I used

     

     

    .form-input .form-error-message, 

    .form-input-wide .form-error-message {

    visibility:hidden !important;

    }

    .form-line-error input,

    .form-line-error textarea,

    .form-validation-error {

    border: 1px solid #FF3030 !important;

    -moz-box-shadow: 0 0 0 #FF3030 !important;

    -webkit-box-shadow: 0 0 0 #FF3030 !important;

    box-shadow: 0 0 0 #FF3030 !important;

    padding: 0px !important;

    }

    .form-required {

    color: transparent !important;

    }

    .form-line-error {

    background: none repeat scroll 0 0;

    }

    #input_1{

    width: 182px;

    height: 21px;

    padding: 0px !important;    

    }

     

    Tell me if this works or not.

    Thanks.

  • Profile Image

    Answered by members1 on December 08, 2014 at 06:47 AM

    Sorry jonathan....

    Your provided CSS code is not working.. it provide same results as before. http://www.jotform.me/form/43254872974466 

  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2014 at 08:08 AM

    Hi,

    Please search for the following rule in the jotform's CSS and change 1px to 2px:

    .form-line-error input,
    .form-line-error textarea,
    .form-validation-error {
    border: 1px solid #FF3030 !important;
    -moz-box-shadow: 0 0 0 #FF3030 !important;
    -webkit-box-shadow: 0 0 0 #FF3030 !important;
    box-shadow: 0 0 0 #FF3030 !important;
    padding: 0 !important;
    }


    Thanks

  • Profile Image

    Answered by members1 on December 08, 2014 at 08:21 AM

    Hi again,

    first of all thanks to jonathan and abajan for trying to solve my problem and providing me such a beautiful assistance. 

    but I have applied all codes but the code provide by jonathan is perfect for Firefox and the code provide by abajan is perfect for Google.

    I hope you can understand my problem... now which CSS code should I use.

    Is it not possible to provide a CSS code which will be perfect for both Firefox and Google and IE?
  • Profile Image

    Answered by val on December 08, 2014 at 08:47 AM

    Hi,

    I've tested this to all browsers the CSS provided on my colleagues, it seems they are all working on IE, FF and Chrome.

    Sorry, but I need to create a new thread on your new question, related to cross browser and you will be answered here:

    http://www.jotform.com/answers/471118

    Thanks.

     

     

  • Profile Image

    Answered by members1 on December 08, 2014 at 09:10 AM

    Hi val;

    CASE 1: (FIREFOX and IE)

    .form-line-error input,
    .form-line-error textarea,
    .form-validation-error {
    border: 2px solid #FF3030 !important;
    -moz-box-shadow: 0 0 0 #FF3030 !important;
    -webkit-box-shadow: 0 0 0 #FF3030 !important;
    box-shadow: 0 0 0 #FF3030 !important;
    padding: 0 !important;
    }

    If you minutely check the form after click on proceed then you can see that when this red border appears then the size of the input field increases (it will be easy for you if you see the position of the buttons). But this problem is not appears in Google chrome.

    CASE 2: (Google)

    .form-input .form-error-message, 

    .form-input-wide .form-error-message {

    visibility:hidden !important;

    }

    .form-line-error input,

    .form-line-error textarea,

    .form-validation-error {

    border: 1px solid #FF3030 !important;

    -moz-box-shadow: 0 0 0 #FF3030 !important;

    -webkit-box-shadow: 0 0 0 #FF3030 !important;

    box-shadow: 0 0 0 #FF3030 !important;

    padding: 0px !important;

    }

    .form-required {

    color: transparent !important;

    }

    .form-line-error {

    background: none repeat scroll 0 0;

    }

    #input_1{

    width: 182px;

    height: 21px;

    padding: 0px !important;    

    }

     

    If you minutely check the form after click on proceed then you can see that when this red border appears then the size of the input field shrink (it will be easy for you if you see the position of the buttons). But this problem is not appears in FF and IE.

  • Profile Image
    JotForm Support

    Answered by Charlie on December 08, 2014 at 09:49 AM

    Hi,

    I see that my colleague made a separate thread for that other concern, please refer to this link for the updated response regarding that matter. Here's the link: http://www.jotform.com/answers/471118.

    Thank you.