Form Designer is applying its own styles to my form

So I was working with my "submit" buttons at the bottom of my customized forms.  When I chose the submit button and then "button style" which used to just let you pick a new button...this whole snazzy new redesign my whole entire form thing came up.  Which is fine.  I figured out easily enough how to do the one tiny thing I wanted to do (which was add some contrast to the text on the button by making the text black).   BUT I changed nothing else and it automatically made all my fields narrower and I had to go back and fix them all. They still aren't exactly the way they were.

This is not very user friendly at all.  I get you are trying to add awesome new features but I just wanted to do one simple thing.  I hundreds of forms and I don't have time to mess around with this for everyone.

I'm trying to make my website more user friendly so changing the font to black makes the submit button stand out more.  It seems like they way you have this design set up is more suited for creating a brand new form.  I liked being able to edit just one element/field on my existing forms.

Hi,

I checked your form's Revision History - http://www.jotform.com/form/40776201071951. The form looks like this in your Revision last Sep 22.

And in the Revision 05:43 AM your form looks like this:

I noticed that in the Revision, the CSS property was also changed which might cause the issue.

I just want to confirm the steps you made to change the Button text font color. You have changed the font color of the button using the Designer Mode > Button Styles > Font Color. Is it correct?

We will wait for your response.
Regards.

I answered via email but I don't see it here.  Here is my answer:

I didn’t even change the button to begin with.  When I went to try to change the button I noticed that the screen that came up was not just for the button it was for the whole form.  I thought perhaps I had clicked the wrong thing so I clicked the X at the top left to exit out.  That’s when Jotform put the gray background and changed the width of all of my text boxes and drop downs. 

The only reason I went back in to this edit screen was to make the background white again and try to put my text boxes and dropdowns back the way they were and that is when I figured I might as well change the button font too.  But now the phone and fax look ridiculous.  I used to just change the width for each field separately not overall.  I didn’t change any CSS.  I don’t know CSS so I don’t mess with it unless someone at Jotform gives me code to insert.

The problem I have with this is that it apparently reverted to some defaults or something without me even saving.  Without me even making any changes.  So I can’t go in and change my button font color without having to redo the entire form again and I don’t have time for that.

I understand what you mean. Unfortunately the Form Designer will load some of the (default) styles that will be added to your form.

These in 90% or more make your form more responsive and help with few more things, which is why they are there, but at some cases, like yours where you had everything already set up as you wanted it, it might cause a bit more work.

Now if this happens, there are 2 things that you can do:

1. Use the Revision History to change back to the previous styles: How to View Form Revision History

2. let us know what you would like to do and we would be happy to give you the CSS that will help you with the same.

I know what you mean by the previous buttons being available that allow you to apply some changes rather quickly by yourself, but would like to recommend taking a look at these quick video guides on Form Designer, which will show you how easy it is to utilize the Form Designer to do the work for you instead. The videos can be seen here: Video Course: Form Designer Basics

Of course, do let us know if you happen to have any issues reverting back, or if you need any CSS and we would be happy to assist with the same :)

Understood!  Your link to the revision history was enough to make me happy for today :)  I put it back the way it was.

Later when I have time I will look at redoing all of them to be more responsive and up to date, we just have a lot of forms and I can't do them all now.  Thank you so much for your quick response.

You are welcome. I am happy to hear that :)

Now in regards to your buttons.

At this time they look like this:

Now if you set it to black, they seem as if something is missing in my opinion - at least without making text a bit larger as well or some other style applied to it, as you can see:

Now, I presume that the white with a tad of black shadow under it looks best:

It keeps the buttons in the same cheerful style as the rest of the form, while it is easier to read it from the original, but this is just my opinion.

For the original look no CSS changes are needed, so I will start with the black font CSS. This is it:

button.form-submit-button.form-submit-button-simple_green_apple, button.form-submit-reset.form-submit-button-simple_green_apple {
    color: black;
    text-shadow: none;
}

If you add that CSS to your form following these steps (so that you do not enter Form Designer): Inject Custom CSS Codes it will make the buttons look as on the second screenshot.

- just as a note, please do add the CSS after all the other code (if any) in that field.

Now if you wish to have them look as the last screenshot above - white font with a dash of shadow behind it, then you should add this code instead:

button.form-submit-button.form-submit-button-simple_green_apple, button.form-submit-reset.form-submit-button-simple_green_apple {
    text-shadow: 0 0 2px black;
}

- following the same steps as mentioned above.

The only thing to note is to add only one of these, otherwise they will "fight" one with another and the one that is under the other will be the main CSS.

Do let us know how it goes :)

You've read my mind!  I'm trying to get a bit more contrast to make these as easy to read for our users as possible.  I'm going to take your advice and use the CSS for the white with the black shadow.  I've recently had issues with my eyes (years of contact lenses and staring at screens) and things with low contrast are hard to read.  I realized maybe some of our customers might have problems like this too!

Thanks for taking the time to help me with this.  I really do appreciate it!

On behalf of my colleagues you are most welcome.  If there is anything else you would like to change, let us know and we will be happy to help.