How to make the page break corners round?

  • Profile Image
    criterions
    Asked 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?

  • Profile Image
    Aury
    Answered 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
    criterions
    Answered 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
    david
    Answered 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
    criterions
    Answered 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
    Aury
    Answered 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
    criterions
    Answered on June 19, 2015 at 01:25 PM

    Awesome- thanks a bunch!