What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to align back button beside submit button

    Asked by oseojoy 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

    Page URL:
    http://form.jotform.co/form/32176991481866

    back button thanks
  • Profile Image

    Answered by Athans 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
    JotForm Support

    Answered by EltonCris 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

    Answered by oseojoy 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
    JotForm Support

    Answered by EltonCris 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

    Answered by oseojoy 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

    Answered by oseojoy 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
    JotForm Support

    Answered by EltonCris 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!