Créer un formulaire ACF "multi-étapes" : chaque groupe de champs (type "Groupe") est une étape du formulaire

0readme.md

Démonstration en vidéo

Explications

• Créer un groupe de champs ACF et activer l'option "Multi-étapes"
• Créer des champs de type "Groupe" et les remplir des sous-champs nécessaires. Chaque champ "Groupe" sera une étape à part entière dans le formulaire.
• Insérer le formulaire front-end avec acf_form en ajoutant les 2 champs de types hidden (acf_multisteps_form & acf_multistep_current_step).
• Enjoy !

1acf_group_field_options.php

<?php

/**
 * Add the option on the field group to user "multisteps" form (each step is in a "group" type field)
 */
function msk_acf_add_step_option_to_fields_group($field_group) {
	// Steps
	acf_render_field_wrap([
		'label'			=> __('Multi-étapes', 'mosaika'),
		'instructions'	=> 'Utiliser les champs de type "Groupe" pour activer le remplissage du formulaire en plusieurs étapes séparées.',
		'type'			=> 'select',
		'name'			=> 'is_multisteps_form',
		'prefix'		=> 'acf_field_group',
		'value'			=> (isset($field_group['is_multisteps_form'])) ? $field_group['is_multisteps_form'] : 'default',
		'choices' 		=> [
			'default'			=>	__("Groupe standard", 'mosaika'),
			'multisteps'		=>	__("Multi-étapes", 'mosaika'),
		]
	]);
}
add_action('acf/render_field_group_settings', 'msk_acf_add_step_option_to_fields_group');

2acf_multisteps_form_javascript.js

// Using jQuery in that case
(function($) {
	$acf_form = $('.acf-form').eq(0);
	$multisteps_form_hidden = $acf_form.find('[name=acf_multisteps_form]');
	is_multisteps_form = ($multisteps_form_hidden.length > 0);

	if (is_multisteps_form) {
		acf_multisteps = {
			groups : [],
			current_step : '',
			$current_step : $acf_form.find('[name=acf_multistep_current_step]')
		};

		acf.add_action('ready_field/type=group', function($el) {
			group_key = $el.data('key');

			acf_multisteps.groups.push(group_key);

			// Hide group
			if (acf_multisteps.groups.length > 1) {
				$el.hide();
			} 
			
			// Save current step
			else {
				acf_multisteps.current_step = group_key;
				acf_multisteps.$current_step.val(group_key);
			}
		});	

		acf.add_action('validation_success', function(){
			last_group_key = acf_multisteps.groups[acf_multisteps.groups.length - 1];

			// Not last step, hide current step and go to next one
			if (acf_multisteps.current_step != last_group_key) {
				$current_step = $('.acf-field-group').filter('[data-key=' + acf_multisteps.current_step + ']');
				$next_step = $current_step.next();

				acf.validation.valid = false;

				$current_step.slideUp();
				$next_step.slideDown();

				acf_multisteps.current_step = $next_step.data('key');
				acf_multisteps.$current_step.val(acf_multisteps.current_step);

			// Last step : submit form
			} else {

				acf.validation.valid = true;

			}
		});
	}
})(jQuery);

3acf_multisteps_form_validation.php

<?php

/**
 * Bypass field validation (except current step fields) if it's a multisteps form
 */
function msk_acf_multisteps_form_validate_only_current_step_fields($valid, $value, $field, $input) {
	if (isset($_POST['acf_multisteps_form'])) {
		$current_step = $_POST['acf_multistep_current_step'];
		
		if ($field['parent'] == $current_step) {
			return $valid;
		} else {
			return true;
		}
	}
	
	return $valid;
}
add_filter('acf/validate_value', 'msk_acf_multisteps_form_validate_only_current_step_fields', 10, 4);

4acf_multisteps_front_end_form.php

<?php

// Put that in a shortcode, or in a template, or where you want...
acf_form(array(
	'post_id'			=> 'new_post',
	// Edit your field group(s) ID(s)
	'field_groups' => ['group_59d4ccb30b330'],
	'html_after_fields' => implode(' ', [
		'<input type="hidden" name="acf_multisteps_form" value="1"/>',
		'<input type="hidden" name="acf_multistep_current_step" value="0" />',
	])
));