Buttons have changed color in preview before submit

This morning, the buttons on our preview and submit page are gray on gray on the second page. They still function but I'm getting calls that users think they can't click on them because they are "grayed out".

I checked your form and the button are currently showing blue:

If this is not how they are supposed to appear, let us know and we will be happy to help you get things adjusted to how they should be.

Hi David, that is the first page. If you click on the preview and submit button, the buttons at the bottom of the second page are grayed out.

I see what you mean.  When I cloned the form, the button went back to normal:

Is there any sort of theme applied to your form?  Simply cloning the form or removing the theme applied should fix the preview buttons.

We have some CSS script to make the help selection stay on the left hand side of the page, so we can't remove it, and we can't clone it because we have a bunch of incoming links that would need to be rerouted. 

Is there any way to update the CSS for that button?

You can target the button in the preview before submit with the following CSS:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

.preview-submission-button {
    background : blue !important;
}
.form-submit-button{
       background : blue !important;
}

Change the colors to suit your form.

It seems like any change i make to the CSS impacts the conditions associated with that widget and overall look/feel of the form.

The preview button has its own styling. That's the reason why it does not change according to the submit button.

Have you tried my colleague's CSS codes? It should work.

Anyway, if you want the same styling on the preview buttons, you can use the following CSS codes.

button#backToForm, button#printForm, button#submitCheckedForm {

    text-shadow: 0 1px 0px #1e549d;

    border: 1px solid #3d7fb1;

    -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.40);

    -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.40);

    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.30), 0 1px 2px 0 rgba(0, 0, 0, 0.40);

    background: #57a9eb;

    background: -moz-linear-gradient(top, #57a9eb 0%, #3871c0 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3871c0));

    background: linear-gradient(top, #57a9eb 0%, #3871c0 100%);

}

Result:

Just inject the above CSS codes to your form. Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Hi, thank you - I have tried both options. They fix the button issue, however it changes the formatting on the form. 

Here is what the form looks like before injecting the CSS code:

This is what it looks like after injecting the CSS code:

If possible, I would like to change the buttons without impacting the look and feel of the rest of the form.

You can try adding the CSS via form Preferences.

It should not apply form designer's theme to your form in this case.

Hi, I think there are bigger problems happening, and this was just one of them. The submit function was not working during Edit submissions this morning. All of the apostrophes turned to code, and the conditional emails were not firing.

I resaved the conditions and retested and the emails are now working. I fixed the apostrophes, and ended up just removing the preview and submit widget for now until we can get that working properly.

Here is an example:

Thank you - going through preferences instead of the design builder worked without impacting the rest of the form!!

Ok, we are having a dilemma with this form today. I don't know if there was some kind of update yesterday, but we rely heavily on this form from an operational standpoint and it is not working as expected.

In addition to the things I have already listed today:

- Preview/submit issues

- Formatting issues with buttons

- Conditional email not working

We are having these following other issues:

- Not all fields viewable on the submissions view.

- On the field New hire's primary org code...it used to default to the supervisor's org code, but now it doesn't default. I have reset it.

- It looks like the rules are now being applied to the form in submission view. We used submission view to add additional information after a user submitted, so we need it to be the old way where we can see/edit any field, even the hidden ones.

-

It would be helpful if we could find out why this is happening, and everything that is or is not going to work now so that we can adequately plan resources and a workaround for users.  

You can revert your form to a previously working saved state using your revision history:

https://www.jotform.com/help/294-How-to-view-form-revision-history

Once your form is reverted back to the correct format, apply the CSS to fix the preview button via the preferences menu.

If hidden fields are filled without the previous fields filled, you may need to enable clear on hide in your forms options:

Hi there, I think I wasn't 100% clear. The data is missing from the form, even though it was initially selected. 

My apologies, it seems there are quite a few issues being presented here that are likely not related to the css issue on the preview.  I will have a look at the missing submission data while editing issue in the following thread shortly:

https://www.jotform.com/answers/1040227

For further issues, if you wouldn't mind opening a new thread for each, we will be happy to address those as well.