Switch positions of Save and Next buttons

  • Profile Image
    davidawiss
    Asked on August 10, 2020 at 02:07 AM
    this form's Save button needs to be where the Next button is and the Next button needs to be green:

    https://hipaa.jotform.com/202055644477053 

    Thanks!

  • Profile Image
    jherwin
    Answered on August 10, 2020 at 05:45 AM

    Can you please try this custom CSS code:

    .form-pagebreak-next {
        position: relative;
        left:100%!important;
        background: #01BD6F!important;
        color: white!important;
    }
    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
        position: relative;
        right: 40%;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    davidawiss
    Answered on August 10, 2020 at 11:47 AM

    That didn't quite do it. I have required fields and clicking the button without filling the form is awful. What I'm after is the Next button being more prominent than the Save button, but the aesthetics matching. 'Next' also needs to be white like save. It may be that the Save feature just isn't worth it, but please see below:


    1597074375save gif.gif

  • Profile Image
    Anita_K
    Answered on August 10, 2020 at 01:50 PM

    Hi there,

    thank you for coming back to us. I've modified the CSS according to your instructions.

    Please replace the current CSS with the code in this Pastebin:

    https://pastebin.com/kAtwP5PU

    Let us know if you are satisfied with the results.

  • Profile Image
    davidawiss
    Answered on August 10, 2020 at 04:42 PM

    We're almost there. I just need to switch the position of the Save button to be in the middle. It's too confusing for if it's to the far right.

    1597092102save gif2.gif

  • Profile Image
    jherwin
    Answered on August 10, 2020 at 09:14 PM

    Try to add this CSS in your form CSS section:

    .sacl-button.form-sacl-button {
        margin: 0px;
        margin-right: 100px!important;
        position: relative;
    }

    Demo Form: https://form.jotform.com/202222492325951

    Please give it a try and let us know how it goes.

  • Profile Image
    davidawiss
    Answered on August 13, 2020 at 10:42 PM

    This didn't seem to have an effect on the form (or in the sample). The buttons look great now, but I really would like the 'Next' button to appear on the far right and the 'Save' button to be in the middle.

    Thanks everyone for all your help!

  • Profile Image
    jherwin
    Answered on August 14, 2020 at 02:15 AM

    Can you please send us a screenshot and mark the form where you want to place the buttons? That way we can come up with the right CSS for your needs.

    GuideHow-to-Post-Screenshots-to-Our-Support-Forum

    Looking forward to your response.

  • Profile Image
    davidawiss
    Answered on August 14, 2020 at 01:27 PM

    Sure, I just want to switch these:

     1597426111Capture.JPG

  • Profile Image
    Carlos_C
    Answered on August 14, 2020 at 03:48 PM

    I'm currently looking at your form, I'll update you on this same thread as soon as I have some news.

  • Profile Image
    Carlos_C
    Answered on August 14, 2020 at 05:01 PM

    Hello,

    Thank you for waiting,

    Please add the following CSS code:

    .form-all .form-pagebreak-next-container {

    margin-right: -331px!important;

    }

    .form-pagebreak-next-container .form-pagebreak-save-container {

    margin-right: 227px!important;

    }

    If you need any further assistance, please let us know. We will be happy to help.

  • Profile Image
    davidawiss
    Answered on August 14, 2020 at 05:45 PM

    Ok, in combination with the CSS from pastebin above, I think there is a conflict. The buttons disappear completely with all this injected:

    #form-pagebreak-next_102 {

        height: 50px;

        width: 150px;

        background: #01BD6F;

        color: white;

    }

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next  {

        height: 50px;

        width: 150px;

        margin: 5px;

        background: #01BD6F;

        color: white;

    }

    .form-pagebreak-back, .form-pagebreak-next {

        max-height: 46px;

        max-width: 150px;

    }

    button.form-submit-reset:not([class*="simple_"]), button.form-submit-print:not([class*="simple_"]), button.form-submit-preview:not([class*="simple_"]), .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

        color: #ffffff!important;

        border: 1px solid #DEE2ED;

    }

    .form-pagebreak-next .form-pagebreak-next-container {

        position: relative;

        left:100%!important;

        background: #01BD6F!important;

        color: white!important;

    }

    .form-submit-button, button.form-submit-reset:not([class*="simple_"]), button.form-submit-print:not([class*="simple_"]), button.form-submit-preview:not([class*="simple_"]), .qq-upload-button {

        min-width: 95px;

    }

    .form-submit-button {

        position: relative;

        right: 5%;

    }

    .form-all .form-pagebreak-next-container {

    margin-right: -331px!important;

    }

    .form-pagebreak-next-container .form-pagebreak-save-container {

    margin-right: 227px!important;

    }

  • Profile Image
    Carlos_C
    Answered on August 14, 2020 at 08:51 PM

    I'll update you on this same thread as soon as I have some news.