How to Pre-Populate Fields in the Same Form

Introduction

Would you like to pre-populate fields on your form with a value from another field of the same form? Using JavaScript you can achieve this. In this tutorial, we’ll walk you through creating your form and adding your snippet that will take the Name field from page one of the form and pre-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.

Adding the snippet

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($){

			var formID = 1072; // Change form ID
            var nameField1 = 1; // Change name field ID to grab name from first 
            var nameField2 = 16; // Change name field ID to pass value to second

			$( `#wpforms-${formID}-field_${nameField1}` ).on( 'change',function() {
                // Update value for nameField2
                $( `#wpforms-${formID}-field_${nameField2}` ).val($(this).val());
			});

        });
    </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.

Related

Action Reference: 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($){

			var formID = 1072; // Change form ID
            var nameField1 = 1; // Change name 1 field ID 
            var nameField2 = 16; // Change name 2 field ID
            var emailField1 = 2; // Change email 1 field ID
            var emailField2 = 19; // Change email 2 field ID
            var phoneField1 = 5; // Change phone 1 field ID
            var phoneField2 = 29; // Change phone 2 field ID
			
			// Set the name field from page 1 to page 2
			$( `#wpforms-${formID}-field_${nameField1}` ).on('change',function() {
                // Update value for nameField2
                $( `#wpforms-${formID}-field_${nameField2}` ).val($(this).val());
			});
			
			// Set the email field from page 1 to page 2
			$( `#wpforms-${formID}-field_${emailField1}` ).on('change',function() {
                // Update value for nameField2
                $( `#wpforms-${formID}-field_${emailField2}` ).val($(this).val());
			});
			
			// Set the phone field from page 1 to page 2
			$( `#wpforms-${formID}-field_${phoneField1}` ).on('change',function() {
                // Update value for nameField2
                $( `#wpforms-${formID}-field_${phoneField2}` ).val($(this).val());
			});

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );