Add Submit button to last page break with Back button

  • Profile Image
    pemhong
    Asked on May 23, 2017 at 04: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.

  • Profile Image
    John_Benson
    Answered on May 23, 2017 at 05: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:

    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.

  • Profile Image
    pemhong
    Answered on May 23, 2017 at 06:26 PM

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

    Thank you.

  • Profile Image
    Mike
    Answered on May 23, 2017 at 09: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.

  • Profile Image
    pemhong
    Answered on May 24, 2017 at 09: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?

     

    (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.

     

    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.

  • Profile Image
    Nik_C
    Answered 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:

    Let us know how that worked for you.

    Thank you!

  • Profile Image
    pemhong
    Answered on May 24, 2017 at 05: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.

     

  • Profile Image
    Jim_R
    Answered on May 24, 2017 at 06: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.

  • Profile Image
    pemhong
    Answered on May 24, 2017 at 06:55 PM

    Thank you everyone for your help!