Add Submit button to last page break with Back button

  • pemhong
    Asked on May 23, 2017 at 4:47 PM

    Hi.  I saw several questions and answers regarding this issue.  I wish there was a simple way to simply put a Submit button to the last page break that contains the "Back" Button.  Can you please assist?  The solutions I found online was too specific to the projects that I couldn't just cut and paste to my CSS code.  I created a sample form for you to look at:

    https://www.jotform.com/build/71423724348153

    Thank you.

  • John_Benson
    Replied on May 23, 2017 at 5:47 PM

    I checked your form and I can see that the Back button is visible on the Last page along with the Submit button. Here's a screen animation:

    Add Submit button to last page break with Back button Image 1 Screenshot 20

    If by any chance, are you asking on how to move the Back button so it will be beside the Submit button? If yes, please let us know. 

    Hope that helps. If you have questions, please contact us again. Thank you.

  • pemhong
    Replied on May 23, 2017 at 6:26 PM

    Yes, your assumption was correct.  I would like to align those two buttons (Submit & Back) together.

    Thank you.

  • Mike
    Replied on May 23, 2017 at 9:01 PM

    There is no generic CSS to align the Page Break and Submit buttons on the same line. I personally suggest using standard setup to avoid issues in different browsers, screens resolutions and mobile devices.

  • pemhong
    Replied on May 24, 2017 at 9:36 AM

    Thanks for responding so quickly.

    (1) By "Standard Setup", do you mean what my sample form already has, where the "Submit" and "Back" buttons are staggered?

    Add Submit button to last page break with Back button Image 1 Screenshot 30

     

    (2) Just to clarify, is there a difference in doing Option 1 or Option 2 as shown below?  I could go with either or is the limitation the same?  If there is a way, please show me how.

     

    Add Submit button to last page break with Back button Image 2 Screenshot 41

    Thank you for your response.  I hope that if this cannot be done, it's a feature that you guys will add in the future.

  • Nik_C
    Replied on May 24, 2017 at 11:44 AM

    1) Yes, I'm sure that that's what my colleague had in mind. The standard setup means that no custom CSS is injected to align those buttons. 

    2) I must agree with my colleague that you could potentially experience some issues when it comes to the responsiveness of the button, but you could use the below CSS code, just copy and paste it in the Custom CSS field of your form:

    #id_54 {

        position: relative;

        top: 109px!important;

        left: 540px!important;

    }

    That will make the submit button align like this:

    Add Submit button to last page break with Back button Image 1 Screenshot 20

    Let us know how that worked for you.

    Thank you!

  • pemhong
    Replied on May 24, 2017 at 5:13 PM

    Thank you again for your quick response!  That was quite simple and exactly what I was looking for.

    I tested it on Chrome and Explorer and both looked fine.  On mobile; however, I see what you mean about the "Submit" button.  I had to scroll way right to even see the button.  I changed the Left location from 540 to 140 to place the Submit button closer to the Back button.  On mobile, the button was much wider, but at least you can see it next to "Back" button without scrolling.  It's a workable solution for now.

    What other issues are there besides how the button looks?  Does it still function and respond the same?  Just checking before I put this into the main form I'm working on.

    Thank you.

     

  • Support_Management Jotform Support
    Replied on May 24, 2017 at 6:32 PM

    What other issues are there besides how the button looks?  Does it still function and respond the same?

    With CSS, all you're changing is the look and feel of an element. Rest assured, functionality-wise, everything remains the same with your Submit button.

    If you need more help, don't hesitate to ask.

  • pemhong
    Replied on May 24, 2017 at 6:55 PM

    Thank you everyone for your help!