Come pre-popolare i campi nello stesso modulo

Interessato a pre-compilare i campi del tuo modulo con valori provenienti da altri campi dello stesso modulo? Con JavaScript, puoi farlo accadere. In questa guida, ti accompagneremo attraverso il processo di creazione del tuo modulo e l'incorporazione di uno snippet che estrarrà il campo Nome dalla pagina uno del modulo e pre-compilerà automaticamente il campo Nome nella pagina due dello stesso modulo.

Creazione del modulo

Per questo tutorial, stiamo creando un modulo multipagina che avrà un campo Nome su entrambe le pagine del modulo.

Se hai bisogno di assistenza nella creazione di un modulo multipagina, ti preghiamo di consultare questa documentazione.

Pre-compilazione dei campi

Per pre-compilare i campi nello stesso modulo, dovremo aggiungere questo snippet al nostro sito.

Se hai bisogno di assistenza su come e dove aggiungere snippet al tuo sito, dai un'occhiata a questo tutorial.

/**
 * 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 );

Lo snippet sopra verrà eseguito solo sull'ID modulo 1072 e prenderà il valore inserito nel primo campo Nome, che è l'ID campo 1, e pre-compilerà il secondo campo Nome nella pagina due del modulo, che è l'ID modulo 16.

Dovrai aggiornare questi ID per farli corrispondere ai tuoi ID per il modulo e i campi. Se hai bisogno di aiuto per trovare questi ID, dai un'occhiata a questo tutorial.

E questo è tutto ciò di cui hai bisogno! Vuoi saperne di più anche sull'utilizzo delle query string per ottenere questo risultato? Dai un'occhiata al nostro tutorial su Come utilizzare le query string per pre-compilare i campi del modulo da un altro modulo.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Posso aggiungere più campi in una funzione?

R: Puoi aggiungere quanti campi desideri all'interno di questa singola funzione. Un esempio sarebbe la pre-compilazione dei campi Nome, Email e Telefono.

/**
 * 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 );