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 do I insert custom back and next buttons for page breaks?

    Asked by niamoretoronto on September 20, 2013 at 09:33 AM

    Hi I have a form with 3 pages and I have 3 different page break buttons that I would like to use to guide the user in filling out my forms.  I've already customized the submit button, but there is no similar feature for the back and next buttons for page breaks.  I understand that there is a way of doing this with CSS but I'm not sure how.

    page break buttons custom buttons back and next button customizing jotform
  • Profile Image

    Answered by jedcadorna on September 20, 2013 at 12:11 PM

    Good day,

     

    You can customize this by following this steps:


    1. You can use button style

     

    OR

     

    2. You can inject custom CSS and get the page break field ID and insert some CSS script.

     

    Example

    /*Code Starts Here*/

    Note: .form-pagebreak-back # will differ from the pagebreak field ID

    /* Page break button*/

    #form-pagebreak-back_7{width: 348px;

    margin-top: -10px; cursor: pointer;-moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;padding:8px 18px;color: #154d0e;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-shadow:1px 1px 0px #518d8a;border:1px solid #268a16 !important;-moz-box-shadow:inset 0px 1px 0px 0px #c9efabzz;

    -webkit-box-shadow:inset 0px 1px 0px 0px #c9efab;

    box-shadow:inset 0px 0px 0px 0px #c9efab;background: #4ea20a; /* old browsers */

    background: -moz-linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#518d8a), color-stop(100%,#518d8a)); /* webkit */

    background: linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bd82f', endColorstr='#4ea20a', GradientType=0 ); /* ie */

    }


    #form-pagebreak-back_7:hover{

    border:1px solid #268a16 !important;

    background: #518D76; /* old browsers */

    background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */

    background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */

    }


    #form-pagebreak-back_7:active{

    border:1px solid #268a16 !important;

    position: relative;

    top: 1px;

    background: #5bb215; /* old browsers */

    background: -moz-linear-gradient(top, #5bb215 0%, #80dd32 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bb215), color-stop(100%,#80dd32)); /* webkit */

    background: linear-gradient(top, #5bb215 0%, #80dd32 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb215', endColorstr='#80dd32', GradientType=0 ); /* ie */

    }

    /*Code Ends Here*/

     

    For your reference here are some of the functions that are included in the code:

    #form-pagebreak-back_7 - You can set your color,size,height etc inside this function.

    #form-pagebreak-back_7:hover - This is when you hover your mouse and see the effects changed, you can set it here.

    #form-pagebreak-back_7:active - After clicking on the submit button it sets to active link and the settings inside here will take effect.

     

    Here sets the roundess of the button:

    -moz-border-radius:.5em;

    -webkit-border-radius:.5em;

    border-radius:.5em;

     

    background: - sets the background color

    border: - The border property is used as a shorthand method to specify one or more of the 3 border values (width, style, and color) all in one place. This property applies to all 4 sides

     width: - The width property is used to specify the width of the content area of an element's box

     

     

    This block of code below sets the gradient color of your button and its browser's flexibility to display the settings (You can play around with colors, just change the one that starts with "#" ex. #518D76 change to #000000)

     

    background: #518D76; /* old browsers */

    background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */

    background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */

     

    Gradient Sample:

    Gradient

     

    Just let me know if you have more questions. You can play around with the colors and style but the basic format to follow is the above steps.

     

    Thanks,

  • Profile Image

    Answered by niamoretoronto on September 20, 2013 at 02:09 PM

    Hi,

    Thank you jedcadorna for that very thourough response.  However, I should have been more specific.  I have 3 images that I would like to use as buttons. 

    I was able to use a combination of your answer, as well as this thread: http://www.jotform.com/answers/234769-Customizing-Back-next-button-problem to solve my problem. 

    I then stumbled upon another issue, my buttons were overlapping, which I was able to solve it with this thread: http://www.jotform.com/answers/220700-Page-break-buttons-overlapping


    Now my problem is that empty grey boxes are showing where my images are supposed to be.  Everything looks fine in the Jotform editor.  However, when I preview my form or go to the website where my form is embedded the images that I've inserted don't show.  The buttons still work, but they're just empty grey boxes.  How do I fix this?


    Here is my form url: http://form.jotform.ca/form/30965176980263

     

    This is the custom CSS that I've inserted:

    /*Page break button*/

    #form-pagebreak-back_63

    {

    display:url("http://www.jotform.com/uploads/niamoretoronto/form_files/Date-Details-Button.jpg") no-repeat  !important;

    text-size:12px;

    float:left;

    margin-left:20px;

    background:url("http://www.jotform.com/uploads/niamoretoronto/form_files/Date-Details-Button.jpg") no-repeat  !important;

    width:150px !important;

    height:50px !important;

    box-shadow: none !important;

    border: none !important;

    }

    #form-pagebreak-next_63

    {

    display:block;

    text-size:12px;

    float:lright;

    margin: 0px 0px 0px 160px;

    background:url("http://www.jotform.com/uploads/niamoretoronto/form_files/Your-Details-Button.jpg") no-repeat  !important;

    width:150px !important;

    height:50px !important;

    box-shadow: none !important;

    border: none !important;

    }

    #form-pagebreak-back_65

    {

    display:block;

    text-size:12px;

    float:left;

    margin-left:20px;

    background:url("http://www.jotform.com/uploads/niamoretoronto/form_files/Your-Details-Button.jpg") no-repeat  !important;

    width:150px !important;

    height:50px !important;

    box-shadow: none !important;

    border: none !important;

    }

    #form-pagebreak-next_65

    {

    display:block;

    text-size:12px;

    float:right;

    margin: 0px 0px 0px 160px;

    background:url("http://www.jotform.com/uploads/niamoretoronto/form_files/Verification-Button.jpg") no-repeat  !important;

    width:150px !important;

    height:50px !important;

    box-shadow: none !important;

    border: none !important;

    }

     

  • Profile Image

    Answered by jedcadorna on September 20, 2013 at 04:16 PM

    Hi,

    Can you please update your CSS with this. http://pastie.org/pastes/8342595/text and let me know if it works.

     

    Thanks,