Switch positions of Save and Next buttons

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!

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.

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:

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.

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.

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.

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!

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.

Guide: How-to-Post-Screenshots-to-Our-Support-Forum

Looking forward to your response.

Sure, I just want to switch these:

 

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

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.

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;

}

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