Como Pré-preencher Campos no Mesmo Formulário

Interessado em pré-preencher campos em seu formulário com valores de outros campos dentro do mesmo formulário? Com JavaScript, você pode fazer isso acontecer. Neste guia, vamos guiá-lo através do processo de criação do seu formulário e incorporação de um trecho de código 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.

Criando o formulário

Para este tutorial, estamos criando 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, revise esta documentação.

Pré-preenchendo os campos

Para pré-preencher campos no mesmo formulário, precisaremos adicionar este trecho de código ao nosso site.

Se precisar de ajuda sobre como e onde adicionar trechos de código ao seu site, confira 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 trecho de código acima só será executado no ID do formulário 1072 e pegará o valor inserido no primeiro campo Nome, que é o ID do campo 1, e pré-preencherá o segundo campo Nome na página dois do formulário, que é o ID do formulário 16.

Você precisará atualizar esses IDs para corresponder aos seus próprios IDs de formulário e campos. Se precisar de ajuda para encontrar esses IDs, confira este tutorial.

E é tudo o que você precisa! Gostaria de saber mais sobre como usar strings de consulta para conseguir isso também? Confira nosso tutorial sobre Como Usar Strings de Consulta para Pré-preencher Campos de Formulário de Outro Formulário.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Posso adicionar vários campos em uma função?

R: Você pode adicionar quantos campos quiser dentro desta única função. Um exemplo seria pré-preencher os campos Nome, Email 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 );