Save and Submit button align with Back button

Can I put the back, save and submit button all on same line?

Hi Scott,

Thanks for reaching out to Jotform Support. Are you referring to this form? If yes, you can add this custom CSS code to align the Save and Submit button.

.form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {

margin-left: 70% !important;

margin-top: 4% !important;

position: absolute !important;

}

This guide will help you add the custom CSS code to your form. Here's what it looks like on my cloned form:

Give it a try and let us know if you need any help.

It did not work. This is what it looks like now.

Hi Scott,

I’ve modified the code above to better suit your needs. All you need to do is add this CSS code. Let me walk you through how to do it:

1. In the Form Builder, select the paint roller icon in the upper-right corner.
2. In the Form Designer panel on the right, go to Styles at the top.
3. Enter your code under Inject Custom CSS. All changes are saved automatically.

.form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {

    margin-left : 70% !important;

    margin-top : 4% !important;

    position : absolute !important;

}

Check out the screencast below for the results Give it a try and reach out again if you have any other questions.

back save and submit Still do not line up properly on the last page, see picture with codes attached

Hi Scott,

Keep in mind that the appearance in the Form Builder may differ from what you'll see in the actual live form or in preview mode, especially when custom CSS is applied. I recommend previewing or opening the live form to confirm if the issue still appears.

I also adjusted some of the CSS to help make the layout fully responsive across all screen sizes. Let me show you how:

1. First, copy this code:

.form-label.form-label-auto {

    display: block;

    float: none;

    text-align: left;

    width: 100%;

}

.form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {

    margin-left: 70% !important;

    margin-top: 7% !important;

    position: absolute !important;

}

@media only screen and (max-width: 480px) {

.form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {

        margin-left: 0 !important;

    }

.form-pagebreak-back-container {

        padding: 16px!important;

        text-align: right!important;

        min-width: 100%!important; 

}

.form-pagebreak-next-container {

    min-width: 100%!important;

    float: right!important;

    padding-left: 18px!important;

    padding-right: 19px!important;

}

}

2. In your Form Builder, click the Paint Roller icon located at the upper-right corner of your page.

3. In the form Designer, go to the Styles tab, erase the existing code, and paste the copied code inside the Inject Custom CSS area.

That's it. Test your form, and you'll see that the submit button is now properly aligned. Check out the screencast below for the result:

You can check out my demo form for your reference. This guide will show you how to clone the form and make it your starting one.

Give it a try and let us know how it goes.