Comment pré-remplir les champs d'un même formulaire ?

Vous souhaitez pré-remplir les champs de votre formulaire avec des valeurs provenant d'autres champs du même formulaire ? Avec JavaScript, c'est possible. Dans ce guide, nous vous aiderons à créer votre formulaire et à y intégrer un extrait qui extraira le champ Nom de la première page du formulaire et remplira automatiquement le champ Nom de la deuxième page du même formulaire.

Création du formulaire

Pour ce tutoriel, nous créons un formulaire multi-pages qui aura un champ Nom sur les deux pages du formulaire.

Si vous avez besoin d'aide pour créer un formulaire multi-pages, veuillez consulter cette documentation.

Pré-remplissage des champs

Afin de pré-remplir les champs du même formulaire, nous devons ajouter ce snippet à notre site.

Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, veuillez consulter ce tutoriel.

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1386;
            var nameField1 = 0; // ID of the field to grab name from
            var nameField2 = 13; // ID of the field to pass value to

			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length && $('#wpforms-' + formID + '-field_' + nameField1).length && $('#wpforms-' + formID + '-field_' + nameField2).length) {
				// Update value for nameField2 when nameField1 changes
				$('#wpforms-' + formID + '-field_' + nameField1).on('change', function() {
					$('#wpforms-' + formID + '-field_' + nameField2).val($(this).val());
				});
			} else {
				console.error('Form or field does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );

L'extrait ci-dessus ne s'exécutera que sur le formulaire ID 1072 et prendra la valeur saisie dans le premier champ Nom, qui est le champ ID 1, et pré-remplira le deuxième champ Nom sur la page deux du formulaire, qui est le formulaire ID 16.

Vous devrez mettre à jour ces identifiants pour qu'ils correspondent à vos propres identifiants pour votre formulaire et vos champs. Si vous avez besoin d'aide pour trouver ces identifiants, consultez ce tutoriel.

Et c'est tout ce dont vous avez besoin ! Vous souhaitez en savoir plus sur l'utilisation des chaînes de requête ? Consultez notre tutoriel sur Comment utiliser les chaînes de requête pour pré-remplir les champs d'un formulaire à partir d'un autre formulaire.

Référence Action

wpforms_wp_footer_end

FAQ

Q : Puis-je ajouter plusieurs champs dans une même fonction ?

R : Vous pouvez ajouter autant de champs que vous le souhaitez à l'intérieur de cette fonction. Un exemple serait de pré-remplir les champs Nom, Email et Téléphone.

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1072;
            var nameField1 = 1; // ID of the name field on page 1
            var nameField2 = 16; // ID of the name field on page 2
            var emailField1 = 2; // ID of the email field on page 1
            var emailField2 = 19; // ID of the email field on page 2
            var phoneField1 = 5; // ID of the phone field on page 1
            var phoneField2 = 29; // ID of the phone field on page 2
			
			// Function to set the value of a field on page 2 based on the value of a field on page 1
			function setFieldValue(field1, field2) {
				$( `#wpforms-${formID}-field_${field1}` ).on('change', function() {
					$( `#wpforms-${formID}-field_${field2}` ).val($(this).val());
				});
			}
			
			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length) {
				// Set the name field from page 1 to page 2
				setFieldValue(nameField1, nameField2);
				
				// Set the email field from page 1 to page 2
				setFieldValue(emailField1, emailField2);
				
				// Set the phone field from page 1 to page 2
				setFieldValue(phoneField1, phoneField2);
			} else {
				console.error('Form does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );