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

    Need help in designing form using custom CSS codes

    Asked by m1hunter on October 23, 2016 at 10:34 AM

    I need CSS code to fix theses issues with my form thanks again.

    1. When the mouse hovers over the send info / images button it turns white. I need it to not turn any color at all.

    2. I need to change the Attach image / images button to this color #B71427.

    3. I need all the text boxes (First Name,Last name Ect.) Black like the messages box.

    4. When I submit the form with the required fields not field out I get a red border around them I would     like to make this red  border thicker / wider.

    5. One more thing when I upload images to my form the Send info / images button says Please wait.....

        I would like to change that to Attaching images....

    Page URL:
    https://form.jotform.com/62938639407165 

     

    Thanks for all of your previous help.

    Page URL:
    https://form.jotform.com/62938639407165

    css code please wait Inject custom CSS
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 23, 2016 at 12:22 PM

    1. When the mouse hovers over the send info / images button it turns white. I need it to not turn any color at all.

    button#input_15:hover{

        border: 3px solid #6DBDD6 !important;

        border-radius: 10px!important;

        font-weight: bold!important;

        height: 45px !important;

        width: 306px !important;

        background: #B71427;

        text-shadow: none;

        box-shadow: none;

        color: #FFFFFF;

     

    }

    2. I need to change the Attach image / images button to this color #B71427.

    .qq-upload-button.form-submit-button-cool_grey {

        background: #B71427 !important;

    }

    If you also want to have the border of the "Attach image / images" upload button similar to the "Send info / images for best pricing" submit button then use the CSS code below instead.

    .qq-upload-button.form-submit-button-cool_grey {

        background: #B71427 !important;

        border: 3px solid #6DBDD6 !important;

     

    }

    3. I need all the text boxes (First Name,Last name Ect.) Black like the messages box.

    *::-webkit-input-placeholder {

        color: #000;

    }

    *:-moz-placeholder {

        color: #000;

    }

    *::-moz-placeholder {

        color: #000;

    }

    *:-ms-input-placeholder {

        color: #000;

    }

    4. When I submit the form with the required fields not field out I get a red border around them I would     like to make this red  border thicker / wider.

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

        padding: 2px !important;

        border: 2px solid red !important;

     

    }

    5. One more thing when I upload images to my form the Send info / images button says Please wait.....

        I would like to change that to Attaching images....

    To update the "Please Wait..." message when you click the submit button in your form, you need to update that from the Preferences of the builder page. Edit "Form Warnings" under General and look for "Submit Button" then update the "Please Wait..." message. Don't forget to save the changes after.

    Below is a clone version of your form where I have applied the changes above.

    https://form.jotform.com/62964175444968

    If you have questions or you have any other concerns, please feel free to contact us anytime. Thank you.

  • Profile Image

    Answered by   on October 23, 2016 at 12:53 PM

    Thank you just what I needed. 

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 23, 2016 at 12:58 PM

    You're most welcome. I'm glad that it worked for you.

    Cheers! 

  • Profile Image

    Answered by m1hunter on November 16, 2016 at 01:53 PM

    I have another request for some CSS Code. On my form I need the first selection in the drop down boxes to not qualify as a required field. Example I need my customers to select a product before the form sends the info. So i need the product selection not to count as a required field until the user selects one of the products (Patches, lapel pins ,Challenge Coins). Same thing with the quantity drop down box. 

     

    https://form.jotform.com/63186194435158

  • Profile Image
    JotForm Support

    Answered by Mike_G on November 16, 2016 at 03:11 PM

    @m1hunter

    I have moved your concern to a new thread considering it is already about a different concern.

    Please click this link to go that thread.

    Thank you.