How to change E-Mail Validator button color

  • rwaldenjr
    Asked on September 13, 2017 at 12:43 AM

    I've changed the default grey color button backgrounds on all my forms to complimentary colors; all except the "Validate" buttons for the "E-Mail Validator" elements. There isn't an option in Properties to change it like with the Submit button. And, I can't find the Button ID in CSS to manually change it.

    If you look at my "Contractor Questionnaire" form, for instance (the E-Mail Validator element is at the bottom of the first page), I'm trying to change it to "color : #b0c4de". How do I achieve this?

    Thanks!

  • sabbirahmedchow
    Replied on September 13, 2017 at 2:56 AM

    You can try changing this to "background: #b0c4de" instead of "color: #b0c4de".

     

  • candy
    Replied on September 13, 2017 at 3:04 AM

    I have cloned your form named "Contractor Questionnaire" on my side in order to test it. 

    I have seen that you have an E-mail Validator widget on your form that you want to change the design of its button. You can only do that by injecting custom CSS codes to widget settings as you can find detailed information at the following guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    So, if you want to change its color, you can add following CSS codes to the widget settings as you can see the screenshot below:

    #mailSubmit{

    background: #b0c4de !important;

    box-shadow: none !important;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    }

    How to change E Mail Validator button color Image 1 Screenshot 20

    Moreover, you can find the button ID of the widget via inspecting option of your browser. You can check the following page in order to learn more about this feature: http://kb.oboxthemes.com/articles/how-to-get-css-styles-for-elements/ 

    I hope this helps.

    If you need any further assistance, let us know.

  • rwaldenjr
    Replied on September 13, 2017 at 6:20 PM

    AWESOME Candy! That did the trick. I even added some additional CSS to the button, now that I know how to find it. You rock!