Cómo pre-rellenar campos en el mismo formulario

¿Interesado en pre-rellenar campos en tu formulario con valores de otros campos dentro del mismo formulario? Con JavaScript, puedes hacer que esto suceda. En esta guía, te guiaremos a través del proceso de creación de tu formulario e incorporación de un fragmento que extraerá el campo Nombre de la página uno del formulario y pre-rellenará automáticamente el campo Nombre en la página dos del mismo formulario.

Creación del formulario

Para este tutorial, estamos creando un formulario de varias páginas que tendrá un campo Nombre en ambas páginas del formulario.

Si necesitas ayuda para crear un formulario de varias páginas, revisa esta documentación.

Pre-rellenando los campos

Para pre-rellenar campos en el mismo formulario, necesitaremos añadir este fragmento a nuestro sitio.

Si necesitas ayuda sobre cómo y dónde añadir fragmentos a tu sitio, echa un vistazo a este 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 );

El fragmento anterior solo se ejecutará en el ID del formulario 1072 y tomará el valor introducido en el primer campo Nombre, que es el ID de campo 1, y pre-rellenará el segundo campo Nombre en la página dos del formulario, que es el ID del formulario 16.

Necesitarás actualizar estos IDs para que coincidan con tus propios IDs de formulario y campos. Si necesitas ayuda para encontrar estos IDs, echa un vistazo a este tutorial.

¡Y eso es todo lo que necesitas! ¿Te gustaría aprender más sobre cómo usar cadenas de consulta para lograr esto también? Consulta nuestro tutorial sobre Cómo usar cadenas de consulta para pre-rellenar campos de formulario de otro formulario.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Puedo añadir varios campos en una función?

R: Puedes añadir tantos campos como quieras dentro de esta única función. Un ejemplo sería pre-rellenar los campos Nombre, Email y Teléfono.

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