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 make the page break corners round?

    Asked by criterions on June 19, 2015 at 09:45 AM

    I added a rounded corners to one of my forms (I like the look better) but it is clashing with the page break widget. The page break widget is square and interferes with the bottom rounded corners of the form. Is it possible to stylize the page break to have rounded corners?

    style page break style page break custom CSS
  • Profile Image
    JotForm Support

    Answered by Aury on June 19, 2015 at 10:08 AM

    Please add the following CSS Code to your form:

    #cid_17 div.form-pagebreak {
        border-radius : 25px 25px 25px 25px;
    }

    #cid_43 div.form-pagebreak {
        border-radius : 25px 25px 25px 25px;
    }

    From the form builder, open your form in edit mode, click on Preferences, click the Form Styles tab, add the CSS code as indicated below:

    Please read this guide to show you step by step how to add CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have any other question, please let us know.

  • Profile Image

    Answered by criterions on June 19, 2015 at 10:42 AM

    Thanks - works great except for the final page. When I get to the submit page, the back button appears within a square container.

  • Profile Image
    JotForm Support

    Answered by david on June 19, 2015 at 12:26 PM

    Adding this code should change all the "Back" buttons to the same look:

    .form-pagebreak-back{
    border-radius : 25px 25px 25px 25px;
    }

    If you have any further questions, let us know and we will be happy to help.

  • Profile Image

    Answered by criterions on June 19, 2015 at 01:06 PM

    sorry - I described it wrong. I don't want the button itself to be rounded but the page break 'container' to be rounded. On the first two pages it works great and matches perfectly with the form's rounded corners. But when I go to the last where the submit button is, the page break 'container' returns to its square status and messes up the form's rounded edges.

    Hopefully I'm making some kind of sense. :)

  • Profile Image
    JotForm Support

    Answered by Aury on June 19, 2015 at 01:15 PM

    I am sorry for the misunderstanding.

    Please add the following CSS:

    .form-pagebreak-back-container, .form-pagebreak, .form-pagebreak-next-container {
        background: none transparent;
    }
    As you can see, we are triggering the containers.

    Outcome:

    Let us know if we can assist you further.

  • Profile Image

    Answered by criterions on June 19, 2015 at 01:25 PM

    Awesome- thanks a bunch!