Hi @jonte98
Sorry for the delay here.
Thank you for the screenshot.
I was able to replicate the same behaviour on my lab site, it is happening because the pagination HTML is actually added to a different place and only an empty div is added to where you define in the Form as a page break.
https://monosnap.com/file/qEGUWW7l3sVc4BIHKrqMIMQakajJ6W
But it is not a bug as the Form add the buttons on the fly on the bottom of Form.
I am afraid we can’t use CSS without breaking the position and using the Position absolute as it can cause more issues.
A workaround is to copy the Button HTML content and paste it on the HTML field,
For example:
<div class="forminator-pagination-footer" style="display: flex; justify-content: space-between;"><button class="forminator-button forminator-button-next">Next</button></div>
The structure will look like this:
https://monosnap.com/file/l42m2Kl6qj6jwOKC4w8dNZf8xfpsN1
https://monosnap.com/file/x0xVJQmGffSAsYMJTvlMzsImfL61VQ
Then you can use CSS to hide the regular button and only show the button inside the HTML field.
#html-1 .forminator-pagination-footer{
margin-top: 20px;
}
#html-1 .forminator-pagination-footer button{
width: 100%;
display: initial !important;
}
.forminator-pagination-footer button{
display: none !important;
}
https://monosnap.com/file/mQLQ0RUe1QmRVRFO2mDfbko4ThZtZv
However, you will need to do this for each step and extend the CSS code.
Best Regards
Patrick Freitas
