How to Pre-Populate Fields in the Same Form

Interested in pre-populating fields on your form with values from other fields within the same form? With JavaScript, you can make this happen. In this guide, we’ll lead you through the process of creating your form and incorporating a snippet that will extract the Name field from page one of the form and automatically populate the Name field on page two of the same form.

Creating the form

For this tutorial, we’re creating a multi page form that will have a Name field on both pages of the form.

If you need any assistance creating a multi page form, please review this documentation.

Pre-populating the fields

In order to pre-populate fields in the same form, we’ll need to add this snippet to our site.

If you need assistance in how and where to add snippets to your site, please check out this 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 );

The above snippet will only run on the form ID 1072 and will take the value entered in the first Name field, which is field ID 1 and pre-populate the second Name field on page two of the form, which is the form ID 16.

You’ll need to update these IDs to match your own IDs for your form and fields. If you need help in finding these IDs, please check out this tutorial.

And that’s all you need! Would you like to learn more about using query strings to achieve this as well? Check out our tutorial on How to Use Query Strings to Pre-Populate Form Fields From Another Form.

Reference Action

wpforms_wp_footer_end

FAQ

Q: Can I add multiple fields in one function?

A: You can add as many fields as you want inside this one function. An example would be pre-populating the Name, Email, and Phone fields.

/**
 * 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 );