Skip to content

Instantly share code, notes, and snippets.

@psaikali
Last active January 25, 2021 21:17
Show Gist options
  • Save psaikali/bc2aa5dd80ed43529b16f066ccc44b2c to your computer and use it in GitHub Desktop.
Save psaikali/bc2aa5dd80ed43529b16f066ccc44b2c to your computer and use it in GitHub Desktop.
Créer un formulaire ACF "multi-étapes" : chaque groupe de champs (type "Groupe") est une étape du formulaire

Démonstration en vidéo

Explications

option

  • 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 !
<?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');
// 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);
<?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);
<?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" />',
])
));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment