How To Add Custom CSS to E-mail Validator Button?

I added the 2-step E-mail Validator widget to my forms. And, it seems to be working, as expected. However, I notice when running tests that the "Verify" button in the 2nd step has the default grey background color. I thought it might at least be the same custom color that I set for the initial "Send" button, which I changed using CSS. But, I don't see an element ID for it in Advanced Designer. In fact, the 2nd step doesn't show up at all. So, I don't know how to customize the 2nd step's button. Is this possible? And if so, how?

Thanks!

Is this the form you are working on http://www.jotform.us/form/72736977588177?

I inspected that form and I saw that you already added the custom CSS code to the widget to style the 'Send' button. To apply the same style to the 'Verify' button add this CSS code to the E-Mail Validator widget CSS field:

input#codeSubmit {

                background: #00ff00 !important;

box-shadow: none !important;

-moz-box-shadow: none !important;

-webkit-box-shadow: none !important;

font: arial bold;

font-weight: bold;

letter-spacing: 1px;

font-size: 1em;

}

Here is my demo form: https://form.jotform.com/72751724379970 

Feel free to test it and clone it. 

Hope this will help. Let us know if you need further assistance.

Yes, that was the form BJoanna. And, that was the fix. Thanks!

Unfortunately, I couldn't find the element ID to make the appropriate changes myself, using either Advanced Designer or the browser's "Inspect" function. In fact, the element name you used in the 2nd step ("codeSubmit") doesn't appear in the builder at all, except for the ability to modify its text in the widget's Properties!?! It would be useful if the widget could be upgraded so that WYSIWYG capability encompasses the second step as well as the first, even though you won't see the 2nd step until form submit. That would give users the ability to easily customize the element's 2nd step in Properties just like they do the first. Please submit a suggestion to your development team for a possible upgrade for this feature.

Also, I notice that the element "name" tag you use to create your CSS code doesn't seem to appear in the browser's Inspect window. Yet, in numerous Forum topics, you and your colleagues indicate that that's JotForm's preferred method of identifying elements; including instructions such as "How to Find Field IDs and Names", and "Prepopulating Fields to Your JotForm via URL Parameters". Chrome|Inspect identified the element you coded for me as "input type="submit" id="codeSubmit" " (and the text input box as "input type="text" id="code" "). Frankly, there doesn't seem to be any rhyme or reason as to which elements appear in Inspect, and which ones don't; or, which ones appear in Properties|Advanced|Field Details, and which ones don't. Several element types don't show "name" tags in Inspect (i.e., text boxes, radio buttons and checkboxes). And, several types don't appear in Field Details. However, I've yet to read any Help Instructions or Forum strings that correctly address these exceptions. What am I missing here?

I am glad to hear that the code worked. 

Please note that widgets are loaded though iFrame and because of the is is not possible to check the CSS codes inside of the Advanced Designer. 

I found the element ID using the browser inspect function. I selected the button and clicked on New Style Rule (+ sign).

I am not sure what exactly are you requesting that we should report to our developers. 

Can you please open a new thread and provide us more details about your request there.

BJoanna -

I had no trouble finding the element's ID by right-clicking it, clicking "Inspect", and reading the highlighted code. However, I kept looking for the "name" tag which all the instructions and forum strings reference. There's no specific mention of these exceptions. I was totally looking for the wrong thing, and could have finished this myself had I known. I think JotForm's instructions need some updating in this regard!

And I'll open a new thread, as you suggest, to describe my feature request for adding elements from the 2nd step of the "E-mail Validator" widget to it's Properties window for ease of editing.

Thanks!