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

    Changing the page break button style and alignment

    Asked by locomotivedisplaycases on December 12, 2015 at 04:06 AM

    I know this has been asked before, I have looked at various answers on the forum and playing around with CSS coding but with little results. So please can you help.

    I am trying to use my own images as page buttons to match my website and layout. The first screenshot is what my form looks like now the second is the result I want to achieve. whilst I don't have the button images saved in my images on my jotform account if provided with the right coding solution I should be okay. I would need the buttons to align on the left.

    Hope you can help. David 

    Page URL:
    http://locodisplaycasestwo.webeden.co.uk/order-form/4591313846

    button style button alignment page break buttons next back
  • Profile Image
    JotForm Support

    Answered by Welvin on December 12, 2015 at 01:03 PM

    This is possible by adding a custom CSS codes in your form. I'm now working on this and will let you know later for the codes. 

  • Profile Image
    JotForm Support

    Answered by Welvin on December 12, 2015 at 01:12 PM

    Inject the following custom CSS codes to your form:

    .form-pagebreak-next {

        border : 1px solid #344E60;

        background : #344E60;

        border-radius : 0;

        padding : 12px 45px !important;

        color : #fff;

        box-shadow : none;

        margin-left: -50px

    }

    .form-pagebreak-back {

        border : 1px solid #DEDEDE;

        border-radius : 0 !important;

        padding : 12px 45px !important;

        color : #555555;

        margin-left : 30px;

        background : #F0F0F0;

        box-shadow : none;

    }

    .form-pagebreak {

        border-top : none;

        background : none;

    }

     

    Here's how to inject the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. I would suggest adding it in the designer. 

    Here's a clone version of your form showing the changes: https://form.jotform.com/53455525438965.

    In the "Order Information" tab, you will have to delete the page break and replace it with a new one so the design will be changed to our default.

    Please get back to us if you need further assistance about this matter.

  • Profile Image

    Answered by locomotivedisplaycases on December 13, 2015 at 03:46 AM

    Thanks for all your help, I can now alter alignment css to suit. Much appreciate your excellent support. David

  • Profile Image
    JotForm Support

    Answered by abajan on December 13, 2015 at 08:15 AM

    On behalf of my learned colleague, you're most welcome, David!

    Cheers