¿Le interesa rellenar previamente los campos de su formulario con valores de otros campos del mismo formulario? Con JavaScript, esto es posible. En esta guía, le guiaremos a través del proceso de creación de su formulario y la incorporación de un fragmento que extraerá el campo Nombre de la página uno del formulario y rellenará automáticamente el campo Nombre en la página dos del mismo formulario.
Creación del formulario
Para este tutorial, vamos a crear un formulario multipágina que tendrá un campo Nombre en ambas páginas del formulario.
Si necesita ayuda para crear un formulario de varias páginas, consulte esta documentación.
En Nombre campo Formato para el propósito de este tutorial se establece en Simple. 
Rellenar previamente los campos
Para rellenar previamente los campos del mismo formulario, tendremos que añadir este fragmento a nuestro sitio.
Si necesitas ayuda sobre cómo y dónde añadir snippets a tu sitio, consulta 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 sólo se ejecutará en el formulario ID 1072 y tomará el valor introducido en el primer campo Nombre, que es el campo ID 1, y rellenará el segundo campo Nombre en la página dos del formulario, que es el formulario ID 16.
Tendrá que actualizar estos IDs para que coincidan con sus propios IDs para su formulario y campos. Si necesita ayuda para encontrar estos ID, consulte este tutorial.
¡Y eso es todo lo que necesitas! ¿Le gustaría aprender más sobre el uso de cadenas de consulta para lograr esto también? Echa un vistazo a nuestro tutorial sobre Cómo utilizar cadenas de consulta para rellenar previamente los campos de un formulario desde otro formulario.
Acción de referencia
PREGUNTAS FRECUENTES
P: ¿Puedo añadir varios campos en una misma función?
R: Puede añadir tantos campos como desee dentro de esta función. Un ejemplo sería rellenar previamente los campos Nombre, Correo electrónico 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 );