How to align back button beside submit button

  • Profile Image
    oseojoy
    Asked on August 06, 2013 at 10:58 PM

    how do i make this back button go away after my submit button.

     

    also i want my form transparent and this back button is not.

     

    Thanks

  • Profile Image
    Athans
    Answered on August 06, 2013 at 11:29 PM

    Hi,

     

    I am not a pro on this one but base on my understanding. You want to hide the back button when the user click submit.

     

    You need to insert this in your css code:

     

    #form-pagebreak-back_12 {

    display: none;

    }

    Where form-pagebreak-back_12 is the field ID's

     

    Here is the tutorial how to inject custom css code:

    1) Go to setup and embed

     

    2) Click the preferences

     

    3) Click Form Style

    How to find the field Id:

    1) Select the web form in "My Forms" to edit it.

    2) Select the field and right click the mouse then click 

    3) At the bottom part you will see the field Id

     

    I hope this helps you.

  • Profile Image
    EltonCris
    Answered on August 07, 2013 at 01:20 AM

    @oseojoy

    In addition to Athans, that's how "Page break" tool is designed. It would display "Next" button on the first page and "Back" button on the second page. That's the reason why you see "Back" button after hitting next button. That's added so you can navigate back from the previous section of the form.

    Anyway, to removed the "Back" button and it's background container. Use the following codes and inject it to your form.

    .form-pagebreak-back-container{

    display:none;

    }

    .form-pagebreak {

    border-top: none !important;

    background: none !important;

    }

    To inject this, please refer to Athans guide posted above.

    Thanks!

  • Profile Image
    oseojoy
    Answered on August 07, 2013 at 01:18 PM

    well, that's an aweful lot of help :) let me ask you this, is there any way i can put the back button on the same line as the submit? I have shrunk my submit and clear buttons, if i can put that back button right to their left side, ie between submit button and the field before it in order, it would be really nice. right side will work as a 2ndary alternative and current deletion solution would be my last choice.

     

    it just didnt look right, not that i do not get the use or logic of it. so i if u can please help me with moving it around per above and lining it up, please let me know.

     

    Thanks guys

  • Profile Image
    EltonCris
    Answered on August 07, 2013 at 02:27 PM

    @oseojoy

    Yes, that's possible. Simply inject the following CSS codes to your form. I put labels in it so you can identify which is it for.

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

    .form-pagebreak-back-container{

    margin-top: -58px;

    }

    /*--remove pagebreak background--*/

    .form-pagebreak {

    border-top: none !important;

    background: none !important;

    }

    Result should look like this.:

    Thanks!

  • Profile Image
    oseojoy
    Answered on August 07, 2013 at 03:19 PM

    WORKED :) despite my next/back button going funky for first page in the editor, but my actual form appears fine

     

    Thanks

  • Profile Image
    oseojoy
    Answered on August 13, 2013 at 05:26 PM

    Could you please take a look at my beta launch new form at http://form.jotform.us/form/32246420096146 and please tell me what code to inject to get the back button next to submit again, without it going messed up on other pagebreaks where it needs to stay in line with next button.

     

    Also, I would love to be able to get all my pagebreaks including my submit button lined up centered on my form.

     

    would highly appreciate a guided response like u did above as I would still need to reference it for yet a newer version of the form in the works that i cannot complete until i get to my other computer for saved images as i would need to use the full source code of the form.

  • Profile Image
    EltonCris
    Answered on August 13, 2013 at 06:13 PM

    Hi,

    I think this is similar to your other request here: http://www.jotform.com/answers/255895

    Kindly check my colleagues solution and let us know if you need anything else.

    Thanks!