Buttons have changed color in preview before submit

  • Profile Image
    Deborah.Miller
    Asked on January 18, 2017 at 01:25 PM

    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".

     

  • Profile Image
    david
    Answered on January 18, 2017 at 02:09 PM

    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.

  • Profile Image
    Deborah.Miller
    Answered on January 18, 2017 at 02:46 PM

    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.

  • Profile Image
    david
    Answered on January 18, 2017 at 03:11 PM

    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.

  • Profile Image
    Deborah.Miller
    Answered on January 18, 2017 at 04:39 PM

    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?

  • Profile Image
    david
    Answered on January 18, 2017 at 06:11 PM

    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.

  • Profile Image
    Deborah.Miller
    Answered on January 18, 2017 at 06:43 PM

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

  • Profile Image
    EltonCris
    Answered on January 18, 2017 at 09:30 PM

    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

  • Profile Image
    Deborah.Miller
    Answered on January 19, 2017 at 11:53 AM

    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.

  • Profile Image
    Mike
    Answered on January 19, 2017 at 01:07 PM

    You can try adding the CSS via form Preferences.

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

  • Profile Image
    Deborah.Miller
    Answered on January 19, 2017 at 01:22 PM

    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:

     

  • Profile Image
    Deborah.Miller
    Answered on January 19, 2017 at 01:28 PM

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

  • Profile Image
    Deborah.Miller
    Answered on January 19, 2017 at 03:01 PM

    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.

    -

    Data is missing. When we open a form to edit, some of the data is missing that was initially entered. For example, a user can't select the appointment type without selecting a hire type. Once they do that, the employee class is populated. When I open a form, I can see the employee class populated without the hire type or appointment type listed. Example is submission 360579328416608621.

    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.  

  • Profile Image
    david
    Answered on January 19, 2017 at 04:17 PM

    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:

  • Profile Image
    Deborah.Miller
    Answered on January 19, 2017 at 04:28 PM

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

  • Profile Image
    david
    Answered on January 19, 2017 at 06:02 PM

    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.