Hiding the previous button when using paypal

Hi there @troop5

While I’m unable to view the page for which you posted a link, I believe I understand what you’re asking for. ??

The answer is, yes, the “Previous” button on the last page of your form can be hidden with CSS using the general sibling selector (~) like so:

#forminator-custom-form-xxxx--page-2 ~ .forminator-pagination-footer .forminator-button-back {
display: none;
}

Change the ID (xxxx in the above example) to the ID of your form, and change the page number (2 in the above example) to the number of the last page in your paginated form. Note that the pages start at 0, so if you have 3 pages in your form, the last one would be 2.

Cheers!
Patrick

Thank you for the reply – but it didn’t work quite as expected. I applied the CSS code you suggested in the Custom CSS section for the form and it did eliminate the “previous” button – but it did so on all 3 pages (page 0, page 1, and page 2 – as numbering starts with 0 per your post).

I can live with this except it creates an odd formatting issue:

1. On page 0 the “Next” button appears right justified
2. On page 1 the “Next” button appears left justified
2. On page 2 there is no “Next” button, which is correct, and the PayPal completion appears left justified

I assume the “Next” is on the right on page 0 because that is considered appropriate, but it moves to the left on page 1 because there is no longer a “Previous” button on the left. Applying text-align: doesn’t seem to help, even if I add it as follows (is my coding correct? XXXX is placeholder for the form ID):

#forminator-custom-form-XXXX–page-1 ~ .forminator-pagination-footer .forminator-button-next {
text-align: right;
}

Left, right or centered, it doesn’t matter to me as long as it is consistent across the pages. Any ideas? Thank you for any help.

Hi @troop5

Would it be possible sending the form URL and we can see the correct selectors for your page/form?

Best Regards
Patrick Freitas

Same page as my “hidden calculation” problem. The link is as follows:

test event registration

https://troop5.com/event-registration/?EventName=2021%20Canoe%20Campout&ScoutPrice=40&AdultPrice=0&SeatBelts=1&Allergy=0&StartDate=09-11-2021&EndDate=09-12-2021

To be clear, it all works as the “previous” button is now hidden (which solved a lot of mobile issues), but I am unclear on how to keep the next button from moving between pages 0 and 1.

I can live with it, but I really do appreciate your help! Love the wpdatatables integration too!

Hi @troop5,

Could you please try the following code and see whether that helps?

<?php

add_action( 'wp_footer', function(){
	?>
	<script>
		(function($){
			$(function(){
				let _form = $('#forminator-module-1545');
				if( _form.length ){
					_form.on('forminator.front.pagination.move', function(){
					    if(_form.find('#forminator-paypal-submit').css('visibility') === 'visible' ){
					    	_form.find('.forminator-button-back').hide();
					    }
					});
				}
			});
		})(window.jQuery);
	</script>
	<?php
}, 21 );

Please check this link on how to implement the above code as a mu-plugins:
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Please do note that the above workaround will only work if you keep the “Load form using AJAX” setting disabled, the option is available when you edit the form under the “Behaviour” tab > Rendering.

I hope this helps. Have a nice day ahead.

Kind Regards,
Nithin

Hello @troop5 ,

We haven’t heard from you for some time now, so it looks like you don’t have more questions for us.

Feel free to re-open this ticket if needed.

Kind regards
Kasia

• This reply was modified 3 years, 1 month ago by Amin - WPMU DEV Support. Reason: hit send too soon