Home / Archive / Multi Step Donation Form
Duplicate Snippet

Embed Snippet on Your Site

Multi Step Donation Form

This snippet provides a foundation for converting the donation form into a multi-step donation form.

Code Preview
php
<?php
/**
 * This snippet provides a foundation for converting the donation form
 * into a multi-step donation form.
 */
add_action( 'charitable_donation_form_before', function() {
	?>
<script>
( function($) {
	$(document).ready( function() {
		var section = 1;
		var current_section = 1;
		var last_section;
		$('#charitable-donation-form > .charitable-form-fields > .charitable-fieldset').each( function(fieldset) {
			var $fieldset = $(this);
			$fieldset.attr('data-section', section);
			if (section !== current_section) {
				$fieldset.addClass('charitable-hidden');
			}
			section += 1;
		});
		last_section = section;
		$('.charitable-submit-field button').addClass('charitable-hidden');
		$('.charitable-submit-field').append('<div class="button charitable-button button-primary btn next"><a href="#">Continue</a></div>');
		$('.charitable-submit-field').append('<div class="button charitable-button button-secondary btn inverted"><a href="#" class="hidden">Back</a></div>');
		function updateSection(previous_section) {
			$('.charitable-fieldset[data-section=' + previous_section + ']').addClass('charitable-hidden');
			$('.charitable-fieldset[data-section=' + current_section + ']').removeClass('charitable-hidden');
			if ( last_section === current_section ) {
				$('.charitable-submit-field .button.back a').removeClass('charitable-hidden');
			} else if ( 1 === current_section ) {
				$('.charitable-submit-field .button.back a').addClass('charitable-hidden');
			}
		}
		$('body').on('click', '.charitable-submit-field .button.next a', function(e){
			e.preventDefault();
			previous_section = current_section;
			current_section += 1;
			updateSection(previous_section);
		});
		$('body').on('click', '.charitable-submit-field .button.back a', function(e){
			e.preventDefault();
			previous_section = current_section;
			current_section -= 1;
			updateSection(previous_section);
		});
	});
})( jQuery );
</script>
	<?php
});

Comments

Add a Comment