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

  • Profile Image
    mhorsten
    Asked on March 06, 2020 at 04:54 PM

    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.

  • Profile Image
    gerardw
    Answered on March 06, 2020 at 06:28 PM

    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:

    15835371190703_1.png

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

  • Profile Image
    flavioaguilar
    Answered on March 06, 2020 at 07:25 PM

    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.

    1583540546changebutton1.png

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

    1583540585changebutton2.png

    Hope it helped you! 

  • Profile Image
    mhorsten
    Answered on March 09, 2020 at 10:04 AM

    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?

  • Profile Image
    Vanessa_T
    Answered on March 09, 2020 at 12:43 PM

    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));

    }

    1583772168A.gif

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

  • Profile Image
    mhorsten
    Answered on March 09, 2020 at 12:55 PM

    Thank you Vanessa, this worked!!

  • Profile Image
    Vanessa_T
    Answered on March 09, 2020 at 02:09 PM

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

  • Profile Image
    mhorsten
    Answered on March 09, 2020 at 04:07 PM

    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?

  • Profile Image
    gerardw
    Answered on March 09, 2020 at 08:26 PM

    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 

  • Profile Image
    mhorsten
    Answered on March 10, 2020 at 04:33 PM

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