Comment pré-remplir les champs dans le même formulaire

Vous souhaitez pré-remplir des champs de votre formulaire avec des valeurs provenant d'autres champs du même formulaire ? Avec JavaScript, vous pouvez y parvenir. Dans ce guide, nous vous accompagnerons dans le processus de création de votre formulaire et d'intégration d'un extrait de code qui extraira le champ Nom de la page un du formulaire et pré-remplira automatiquement le champ Nom de la page deux du même formulaire.

Création du formulaire

Pour ce tutoriel, nous créons un formulaire multipage qui comportera un champ Nom sur les deux pages du formulaire.

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

Pré-remplir les champs

Afin de pré-remplir des champs dans le même formulaire, nous devrons ajouter cet extrait de code à notre site.

Si vous avez besoin d'aide sur comment et où ajouter des extraits de code à 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 de code 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 second champ Nom sur la page deux du formulaire, qui est le formulaire ID 16.

Vous devrez mettre à jour ces ID pour qu'ils correspondent à vos propres ID de formulaire et de champ. Si vous avez besoin d'aide pour trouver ces ID, veuillez consulter ce tutoriel.

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

Action de référence

wpforms_wp_footer_end

FAQ

Q : Puis-je ajouter plusieurs champs dans une seule fonction ?

R : Vous pouvez ajouter autant de champs que vous le souhaitez dans 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 );