Interessado em preencher previamente os campos de seu formulário com valores de outros campos do mesmo formulário? Com o JavaScript, você pode fazer isso. Neste guia, vamos conduzi-lo pelo processo de criação do formulário e incorporar um snippet que extrairá o campo Nome da primeira página do formulário e preencherá automaticamente o campo Nome na segunda página do mesmo formulário.
Criando o formulário
Para este tutorial, estamos criando um formulário de várias páginas que terá um campo Name (Nome ) em ambas as páginas do formulário.
Se precisar de ajuda para criar um formulário de várias páginas, consulte esta documentação.
O Nome campo Formato para fins deste tutorial, está definido como Simples. 
Preenchimento prévio dos campos
Para preencher previamente os campos no mesmo formulário, precisaremos adicionar este snippet ao nosso site.
Se precisar de ajuda para saber como e onde adicionar snippets ao seu site, consulte 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 );
O snippet acima será executado somente no ID de formulário 1072 e pegará o valor inserido no primeiro campo Nome, que é o ID de campo 1, e preencherá previamente o segundo campo Nome na página dois do formulário, que é o ID de formulário 16.
Você precisará atualizar esses IDs para que correspondam aos seus próprios IDs para o formulário e os campos. Se precisar de ajuda para encontrar essas IDs, consulte este tutorial.
E isso é tudo o que você precisa! Gostaria de saber mais sobre o uso de query strings para conseguir isso também? Confira nosso tutorial sobre Como usar strings de consulta para preencher previamente campos de formulário de outro formulário.
Ação de referência
PERGUNTAS FREQUENTES
P: Posso adicionar vários campos em uma função?
R: Você pode adicionar quantos campos quiser dentro dessa única função. Um exemplo seria o preenchimento prévio dos campos Nome, E-mail e Telefone.
/**
* 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 );