How to change size of Next and Back buttons

  • Profile Image
    DrDrake
    Asked on December 17, 2014 at 12:56 PM

    Hello,

    i want to make a bigger size in my Form of the "next" and "last" Button.

    How can i do this?

     

    Thank you very much for your support

  • Profile Image
    Ben
    Answered on December 17, 2014 at 02:58 PM

    Hi,

    To make the change to both back and next buttons you should add this CSS code to your jotform:

    .form-pagebreak-next-container, form-pagebreak-back-container {
        height: 50px;
        width: 150px;
    }
    .form-pagebreak-next-container > button, .form-pagebreak-back-container > button {
        height: 100%;
        width: 100%;
    }

    If you want to change the height and width to some other size, just edit the first rule above (the bold parts).

    You can see here how to inject custom CSS codes.

    Do let us know how it goes.

    Best Regards,
    Ben

  • Profile Image
    DrDrake
    Answered on December 17, 2014 at 03:19 PM

    Its works perfectly, thank you so much Ben :-)

    Have you also an CSS code how i can make the font bigger? That will be great!

  • Profile Image
    Ben
    Answered on December 17, 2014 at 04:30 PM

    Hi,

    Thank you, that is great to hear.

    To make them bigger we would need to change the second rule, by adding font-size: 30px; value-property pair.

    It would end up looking like this:

    .form-pagebreak-next-container > button, .form-pagebreak-back-container > button {
        font-size: 30px;
        height: 100%;
        width: 100%;
    }

    This is the entire CSS code here:

    .form-pagebreak-next-container, form-pagebreak-back-container {
        height: 50px;
        width: 150px;
    }
    .form-pagebreak-next-container > button, .form-pagebreak-back-container > button {
        font-size: 30px;
        height: 100%;
        width: 100%;
    }

    - I have again marked with bold the sections that can be adjusted to find the option you like the most.

    Do let us know how it goes :)

    Best Regards,
    Ben