How to change size of Next and Back buttons

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

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

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!

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