How to Put the Page Break and Submit Buttons in One Row?

How do I have the back, save for later and submit buttons all on the one line?

Hi MaylonCollege,

Thanks for reaching out to Jotform Support. I understand that you'd want the 'Back' button, 'Save' button, and the 'Submit' button all under the same row or line. Is that right? If so, they should all be under the same row by default when all those features are added together on the form.

Here's a screenshot as a reference:

If they're separated in your Form, could you send us your Form URL? This so we could understand the situation better and provide you with a proper solution. It is possible that your Submit button was separated by the Divider Element. This could be the reason why your buttons are not all in the same row.

Here's a screenshot as a reference:

Keep us updated and let us know if you need any more help.

Here is the link as requested

https://form.jotform.com/232557317715055

Thanks for you help

Hi MalyonCollege,

Thanks for getting back to us. I have checked your form and could verify that the Back, the Save for Later and the Submit button are not aligned. Fixing this issue is possible, let me walk you through it.

First, you will have to align the Submit button to the right, let me show you how:

1. In Form Builder, scroll down to the Submit button, then click on it.
2. Then, click on the Gear Icon on its right to open the Submit Properties.
3. Finally, in the right panel, set the Button Alignment to Right.

Now, to align the Back button with the other buttons, you have to inject a CSS code. Let's do it:

1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
2. Next, click on the Style tab.
3. Scroll down to Inject Custom CSS and paste the code provided below, finally click on Save at the bottom:

/*--align back button beside submit--*/

#cid_152 {

  margin-top: 12px !important;

  margin-left: 375px!important;

  position: absolute;

}

Result:

Also, if you want to set a solid color to the Submit button, please consider adding also this CSS code:

/*--solid color to submit button--*/

button.form-submit-button.form-submit-button-simple_rose.submit-button.jf-form-buttons.jsTest-submitField.useJotformSign-button.useJotformSign {

    background: #ff00007d;

}

Result:

Here you can test this demo form or clone it to better understand how it was configured. 

Give it a try and reach out again if you have any other questions.

Hello,

I added the CSS code as per your video but it didn't change my button alignment. I must still not be doing it correctly.

Hi MalyonCollege,

I checked your form and can see that the buttons are already aligned in one row. Please check out the screenshot below for my result:

Can you clear your browser's cache or use an incognito mode and check your form again? If the same thing happens again, kindly share with us a screenshot of the screen showing the buttons you'd like to align.

Keep us updated and let us know if you need any help.

I tried an incognito window and cleared the google cache and it is still incorrect

Hello MalyonCollege,

Thanks for getting back to us. Please view the form in preview or live mode instead of the form builder. The form's back and submit buttons were separated due to the theme, but my colleague aligned them using CSS in live view. Here's what is showing on my end when I view your form using this link: https://form.jotform.com/232557317715055

Let us know if you have any other questions.