How do I customize the SAVE button for the 'Continue Forms Later' function?

I enabled the 'Continue Forms Later' function which added the SAVE button to each one of my pages. However, it is set to white colour so it's completely invisible on my form until you hover over it. How do I customize the colour of this button? It's set in line with my 'NEXT' button but when I click on the settings, it only allows me to alter the NEXT.

Please insert this CSS code into the form:

button.form-sacl-button {

    color: #fafafa !important;

    border: 1px solid #e4e4e4 !important;

    background: #0756f2;

    box-shadow: none;

    text-shadow: none;

    margin: 0 8px 0 0;

}

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

Result:

Do review and let us know if this will work for you.

Hi @mhorsten,

In order to customize the Save button, you will have to inject some CSS code to your form.

Below is the code I recommend you use in this case. If you know CSS, you can change those values and edit the button style as you prefer.

.form-sacl-button {

    color: #f8f8f8 !important;

    background: #0000cd !important;

    border: 1px solid #dcdcdc !important;

    box-shadow: none

    text-shadow: none

}

To inject it to your form, you must go to the Styles menu in your Form Designer.



Then you will scroll down, paste the code to the Inject Custom CSS field and click on Save.

Hope it helped you! 

Thank you both for this code. I've placed it in.  On the form builder screen, I can now see my save button! However when I preview my quiz, or launch the quiz using the URL on the publish tab, it is still gone (the same as the screen shot). I went back in to make sure it saved my code and it is there. Any suggestions?

I've changed the CSS into below to make it look like the Next button, including the style when hovered:

button#input_scl_108.form-sacl-button {

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf));

  color: #777777 !important;

  border: 1px solid #dcdcdc !important;

  box-shadow: inset 0px 1px 0px 0px #ffffff;

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

}

button#input_scl_108.form-sacl-button:hover {

    border: 1px solid #dcdcdc !important;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb));

}

If you would like to have a different design, kindly specify in detail.

Thank you Vanessa, this worked!!

You are most welcome. If you need anything else, don't hesitate to contact us again.

Sorry to come back to this again... I've discovered the fix only worked on Page 1 of my form. Is there a way I can apply it to every page?

You will need to add the field IDs for the other Save buttons into the same code:

button#input_scl_108.form-sacl-button, button#input_scl_109.form-sacl-button, button#input_scl_19.form-sacl-button, button#input_scl_6.form-sacl-button, button#input_scl_10.form-sacl-button, button#input_scl_85.form-sacl-button, button#input_scl_86.form-sacl-button, button#input_scl_89.form-sacl-button, button#input_scl_90.form-sacl-button, button#input_scl_93.form-sacl-button, button#input_scl_94.form-sacl-button, button#input_scl_97.form-sacl-button, button#input_scl_100.form-sacl-button, button#input_scl_101.form-sacl-button, button#input_scl_105.form-sacl-button, button#input_scl_107.form-sacl-button {}

same goes for the hover code:

button#input_scl_108.form-sacl-button:hover, button#input_scl_109.form-sacl-button:hover, button#input_scl_19.form-sacl-button:hover, button#input_scl_6.form-sacl-button:hover, button#input_scl_10.form-sacl-button:hover, button#input_scl_85.form-sacl-button:hover, button#input_scl_86.form-sacl-button:hover, button#input_scl_89.form-sacl-button:hover, button#input_scl_90.form-sacl-button:hover, button#input_scl_93.form-sacl-button:hover, button#input_scl_94.form-sacl-button:hover, button#input_scl_97.form-sacl-button:hover, button#input_scl_100.form-sacl-button:hover, button#input_scl_101.form-sacl-button:hover, button#input_scl_105.form-sacl-button:hover, button#input_scl_107.form-sacl-button:hover {}

I have added these into the demo form here: https://form.jotform.com/200687674118966 

You can clone it if required: How-to-Clone-an-Existing-Form-from-a-URL 

 Thank you, I understand the code now! This worked perfectly.