Como pré-popular campos no mesmo formulário

Interessado em pré-popular campos no seu formulário com valores de outros campos dentro do mesmo formulário? Com JavaScript, 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.

Criação do 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 alguma assistência na criação de um formulário de várias páginas, revise esta documentação.

Pré-popular os campos

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

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

Terá de atualizar estes IDs para corresponder aos seus próprios IDs de formulário e campos. Se precisar de ajuda para encontrar estes IDs, consulte este tutorial.

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

Ação de Referência

wpforms_wp_footer_end

FAQ

P: Posso adicionar múltiplos campos numa função?

R: Pode adicionar quantos campos quiser dentro desta função. Um exemplo seria pré-popular 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 );