How to change E-Mail Validator button color

  • Profile Image
    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!

  • Profile Image
    sabbirahmedchow
    Answered on September 13, 2017 at 02:56 AM

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

     

  • Profile Image
    candy
    Answered on September 13, 2017 at 03: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;

    }

    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.

  • Profile Image
    rwaldenjr
    Answered on September 13, 2017 at 06: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!