Required field *

  • m1hunter
    Asked on August 15, 2016 at 8:20 AM

    I do not want the * symbol put on my form field when I make it a required field. How do I accomplish this?

  • Rose
    Replied on August 15, 2016 at 8:39 AM

    It is possible to make "* "symbol invisible via a custom css code. 


    If you send us  your form URL or ID where required icons are seen, We can write this custom css code for you to inject your form. Since, when I checked your form, there is no required field as far as I see.

    Waiting for your return.


  • m1hunter
    Replied on August 15, 2016 at 8:40 AM

    https://form.jotform.com/62273714441149

  • m1hunter
    Replied on August 15, 2016 at 8:43 AM

    The * screws up the hole form makes it look uneven. Is their a code to just do away with that *. I am going to be doing a bunch of forms. Is their a css code to that i can put in all of them. Also I forget how to inject css code.

  • Rose
    Replied on August 15, 2016 at 9:16 AM

    If you inject following css code to your form the whole required field icon " * "  seems invisible but gives warning to enduser if they miss to fill there. 

    .form-required {

        display : none !important;

     

    }

    The screen looks as below, when I applied necessary changing. 

    Required field * Image 1 Screenshot 20

     

    Here is the guidance about how to inject a custom css to your form. 


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


    If you need any further assistance from our side, please let us know. We would be glad to help you. 

  • m1hunter
    Replied on August 16, 2016 at 6:55 AM

    Cool we are almost their :). Is their any way I can stop the form from getting taller when the "This field is required." shows up. When the form gets taller on my site the form does not match the background I have behind it. Also I need to get rid of the "There are errors on the form. Please fix them before continuing."  

     

    Picture included to show you what I mean. One last thing can I make the text in the drop down menu the same size as the text boxes? Thanks for all your help.

    https://form.jotform.com/62282534730150     

    I have First Name as a required field in this form. Required field * Image 1 Screenshot 20

  • Rose
    Replied on August 16, 2016 at 9:23 AM

    Could you please explain what you mean by saying I can stop the form from getting taller when the 'This field is required.' shows up. "  Since, when I connected your website, and tried to fill it, it is seen just as below.  As i down the cursor, it goes down,too. I was not able to see and click your submit button. 

    Required field * Image 1 Screenshot 30

     

    However, if you inject below css code in addition to earlier one, the problem will be solved.

    .form-error-message {

        display : none !important;

    }

     

    .form-dropdown {

        font-size : 2em !important;

     

    }

    If this was the only concern and i misunderstood your issue, please accept my apologies but above code makes error warning message invisible  and fix font size of dropdown. Here is the screen shot of what i see after injection of code. 


    Required field * Image 2 Screenshot 41

    If you need any further assistance from our side, please note that you can always write us. We would be glad to help you. 

  • m1hunter
    Replied on August 22, 2016 at 7:16 AM

    https://form.jotform.com/62342416778158

    Thanks for all your help just a couple more things I decided to put back the "this field is required" but i still need to get rid of the text that display below when you hit the send button on my form which reads

    "There are errors on the form. Please fix them before continuing." 

     

    Also could I make the choose file text bigger to match the other font sizes on the form?

     

    Thanks again!!!!

  • Chriistian Jotform Support
    Replied on August 22, 2016 at 8:32 AM

    To remove the "There are errors on the form. Please fix them before continuing." message please try to inject this custom CSS code in your form.

    .form-button-error {

        display: none !important;

    }

    To increase the font-size of the File Upload button, please try to inject the custom CSS code below:

    input#input_7 {

        font-size: 20px !important;

    }

    You can adjust the font-size value (20px) to any size you want.

    Required field * Image 1 Screenshot 20

    Do let us know if you need further assistance.
    Regards.

     
  • m1hunter
    Replied on August 24, 2016 at 6:29 AM

    https://form.jotform.com/62363113164144

     

    Thank you so much so far. Two more things I need some css code for. I would like the text boxes hint examples to be bold to match the product / quantity drop down menus.(Name, email ect.) Also I would like the css code so I can make "Click here for best pricing" text bigger to match the other text in the form.  Also in the drop down menus how do I add a hint example instead of selected option being selected because I want to make the drop down menus required. 

  • Rose
    Replied on August 24, 2016 at 8:20 AM

    Regarding making error message field bold and making submit button text bigger, please inject following css code and it will be seen as you wish. 

    .form-submit-button {

        font-size : 20px !important;

    }

     

    .form-error-message {

        font-weight : bold !important;

    }


    Regarding making Dropdown menu required, please note that it is already a mandotory field. If your user does not choose anything, it gives error. 

    Here is the screen shot of what you will see after changing.
    Required field * Image 1 Screenshot 20

    If you need any other assistance by our side, please feel free to contact us. 

  • m1hunter
    Replied on August 24, 2016 at 11:43 PM

    Almost have I wanted the hint examples in the text boxes to be bold not the error messages. Where it says name , last name, email , size ect.  In the drop down menu I want the customer to see product but I do not want it to be selected just a hint example like the text boxes. Let me know if you understand what I am talking about I can explain it better if not. 

  • Chriistian Jotform Support
    Replied on August 25, 2016 at 1:52 AM

    You can inject the custom css below to make the placeholder in the textboxes bold.

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{

        font-weight: bold;

    }

    input::-moz-placeholder, textarea::-moz-placeholder {

        font-weight: bold;

    }

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {

        font-weight: bold;

    }

    input:-moz-placeholder, textarea:-moz-placeholder {

        font-weight: bold;

    }

    Required field * Image 1 Screenshot 30

    As for the dropdown menu, it looks like you were able to add a Product and Quantity text as the placeholder/hint example. If you would like to show the rest of the products without selecting them, you can increase the number of visible options on the dropdown by changing the value on the "Visible Options" button.

    Required field * Image 2 Screenshot 41

    If you need further assistance, please let us know.
    Regards.

     

  • m1hunter
    Replied on August 25, 2016 at 10:17 AM

    https://form.jotform.com/62342489259162

     

    Cool that made the placeholder in the textboxes bold but they are still that grey color can we make them black that is what I meant to say black not bold. What is the CSS code to make the placeholder in the textboxes black.
     Thanks for everything almost their :).

  • Chriistian Jotform Support
    Replied on August 25, 2016 at 11:34 AM

    You can use this custom CSS code in your form to change the placeholder font color to black.

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{

        font-weight: bold;

        color: #000000;

    }

     

    input::-moz-placeholder, textarea::-moz-placeholder {

        font-weight: bold;

        color: #000000;

    }

     

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {

        font-weight: bold;

        color: #000000;

    }

     

    input:-moz-placeholder, textarea:-moz-placeholder {

        font-weight: bold;

        color: #000000;

    }

     

    If you do not want to set the placeholder to bold, you can just remove the font-weight: bold; code in the given code above.

  • m1hunter
    Replied on August 26, 2016 at 3:54 AM

    https://form.jotform.com/62363040611140

    Thanks again that worked but I need the Messages place holder messages box to be black as well. What is the code for that.

  • Chriistian Jotform Support
    Replied on August 26, 2016 at 4:24 AM

    Here's the code to make the Messages placeholder black.

    .form-custom-hint {

        color: #000000!important;

    }

    Required field * Image 1 Screenshot 20

    Cheers.