Está interessado em preencher previamente os campos do seu formulário com valores de outros campos do mesmo formulário? Com o JavaScript, é possível fazer isso. Neste guia, vamos guiá-lo pelo processo de criação do seu formulário e incorporar um snippet que extrairá o campo Nome da página um do formulário e preencherá automaticamente o campo Nome na página dois do mesmo formulário.
Criar o formulário
Para este tutorial, estamos a criar um formulário de várias páginas que terá um campo 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 domínio Formato para efeitos deste tutorial é definido como Simples. 
Preenchimento prévio dos campos
Para preencher previamente os campos no mesmo formulário, precisamos de adicionar este snippet ao nosso site.
Se precisar de ajuda sobre 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 só será executado no formulário ID 1072 e pegará o valor inserido no primeiro campo Nome, que é o campo ID 1 e pré-preencherá o segundo campo Nome na página dois do formulário, que é o formulário ID 16.
Terá de atualizar estes IDs para corresponderem aos seus próprios IDs para o seu formulário e campos. Se precisar de ajuda para encontrar essas IDs, consulte este tutorial.
E é tudo o que precisa! Gostaria de saber mais sobre como usar query strings para conseguir isso também? Confira nosso tutorial sobre Como usar query strings para pré-preencher campos de formulário de outro formulário.
Ação de referência
FAQ
P: Posso adicionar vários campos numa função?
R: Pode adicionar tantos campos quantos quiser dentro desta ú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 );