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

    Remove pagebreak top border and background

    Asked by tristansmith on October 01, 2014 at 10:35 AM
    custom page
  • Profile Image
    JotForm Support

    Answered by david on October 01, 2014 at 12:21 PM

    Hi,

    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.

  • Profile Image

    Answered by tristansmith on October 01, 2014 at 12:31 PM
    This is ridiculous.
    I have asked many questions over the last day and you still have not address my questions?
    Did you refer to the page I am working on?
    Do you see a white line above the “get free report Button”?
    I want to get rid of this!!!!!!!!!!!
    Tristan Smith
    Cabrillo Mortgage and Realty
    www.1SanDiegoHomes.com
    619-564-6986 direct
    619-202-7729 fax
    ...
  • Profile Image

    Answered by tristansmith on October 01, 2014 at 12:38 PM

    Again, you did not address my simple question. I have a white line that shows up in my form that I want to get rid of. Try looking at the web page before responding!

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 01, 2014 at 02:01 PM

    @tristansmith

    Our sincere apologies.

    It happens that you have posted several questions that's why we are getting confused. Your question on this thread does not contain any explanation that's why we are unable to get it straight. May we suggest you to stick to 1 question per thread to avoid any confusions.

    Upon looking at your form now http://form.jotformpro.com/form/42734704083958 I can't seem to find the white line you've mentioned. Were you able to sort this out?

    Additionally, if you want to move the the form header title onto the box (as well as remove the error background highlight), you can add this CSS codes.

    .form-all {padding-top: 78px;}

    .form-line-error {background: none;}

    .form-required{display:none;}

    Result:

    If there's anything else you need help with, let us know here.

    Regards!