How to move Submit Button to Same Line as Back/Next Button on Multiple Pages?

Hello,

I need help formatting my Submit button named "save & exit" on multiple pages. I want the button to sit on the same line as the back/next buttons at the bottom of each page, except the last page, which has a separate submit button. Can you help with this?

Hi imccauley,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi imccauley,

You can use CSS to achieve this, let me show you how:

1. Copy the below:

button#input_398,

button#input_396,

button#input_402,

button#input_401,

button#input_400,

button#input_399 {

    position: absolute !important;

    top: 74px !important;

}

2. Then, in Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out the screenshot below to see my results:

You can also check out our guide about How to Inject Custom CSS Codes for more information.

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

Hi Dayron,

The fix looks perfect on your cloned form, but it didn't work on mine. Can you troubleshoot what went wrong or recommend another solution?

Hi imccauley,

Can you try replacing the CSS code with this updated one to move the button on your form?

button#input_398,button#input_399,button#input_396,button#input_401,button#input_400,button#input_402 {

  position: absolute !important;

  margin-top: 50px !important;

}

You can follow the steps provided by my colleague on how to add the code to your form. Here's what it'll look like:

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

Hi again,

I replaced the Dayron's CSS code with Jovito's and the results were the same--no change to the location of the button. Is there a setting that could be interfering with the custom code?

Hi imccauley,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi imccauley,

Could you try replacing the existing code with the updated code below:

button#input_398,button#input_399,button#input_396,button#input_401,button#input_400,button#input_402 {

 position: absolute !important;

 margin-top: 51px !important;

 right: 603px !important;

}

Take a look at the screencast of the result below:

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

Unfortunately, that's still not working.

I see that all three suggested CSS code inserts modify the top or margin-top and seem to work on your (Jotform Developers') cloned forms, but not on mine. I'm not sure why this is. Have any of you changed any other dimensions of the form to achieve the desired result? Are you using a particular browser?

Hi imccauley,

I have reviewed your custom CSS code and currently, there is a missing closing curly brace (}) on line 20 as shown in the screenshot.

Could you add the missing curly brace (}) as shown in the screenshot?

This is the reason why the CSS code provided by my colleagues are not working.

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

Amazing, that fixed it! Thank you so much for your help :)