How to Pre-Populate a Wufoo Form with Answers from a Previous Wufoo Form

There are two quote forms (a short one and a long one) on this website, and both of them are Wufoo Forms. Read my comment on Judy Knight’s website on why I chose to have two quote forms. Someone who had filled out both quote forms suggested to me that I should pre-populate the visitor’s answers on the second quote form for a better user experience. I agreed, so I contacted Wufoo Support to find out if this could be done with their forms.

Luckily, they told me that it is possible, but to pre-populate a Wufoo Form with answers from a previous Wufoo Form requires a little knowledge of PHP, JavaScript, and query strings in URLs. You also need to be a paying Wufoo subscriber. In this blog post, I’m going to cover how to pre-populate a Wufoo Form in WordPress.

Other Blog Posts About Wufoo

• How to Style Wufoo Forms with Custom CSS
• An Introduction to Wufoo Forms
• 3 Kick-Ass Form Solutions for WordPress

In order to pre-populate a Wufoo Form with answers from a preceding Wufoo Form with WordPress, you will have to:

1. Find the API IDs that you need from the preceding Wufoo Form.
2. Add those API ID’s to the confirmation page URL on your website.
3. Store the values produced by the API IDs in a shortcode.
4. Use the generated shortcode in the JavaScript code of the Wufoo Form that will be pre-populated.

Find the API IDs that you need from the preceding Wufoo Form

You can find all of the API IDs of a form by going to Forms -> Your Form -> More -> API Information. See below for a screen recording on how to find a form’s API IDs (courtesy of Wufoo).

Take note of all of the API IDs that you’ll use by typing or writing them down. You don’t want to depend on your memory for a tedious task like this.

Add the preceding Wufoo Form’s API IDs to the confirmation page URL

When adding the API ID’s to your confirmation page URL, they will take the form of {entry:Field1}. You would replace the 1 with your Wufoo Form’s API ID. You’ll need to specify variables for each of the API IDs. If your confirmation page URL is www.example.com/thank-you, then to pass the first name, last name, and email field answers to the confirmation page, the URL would look like www.example.com/thank-you/?firstname={entry:Field1}&lastname={entry:Field2}&emailaddress={entry:Field3}, but you would use your own API IDs for the numbers. You can also use whatever you want for the URL variable names (e.g. firstname, fn, etc).

When you’ve come up with the confirmation page URL with all of the parameters, you’ll paste it in the Confirmation Options section under the Form Settings tab like so:

Make sure that your confirmation page has another Wufoo Form embedded in it because you need a Wufoo form to pass the answers to.

Store the values produced by the API IDs in a shortcode

This is where you’ll need a little understanding of PHP and WordPress. You’ll need to assign PHP variables to each of the variables in the URL. For example, if your confirmation page URL is www.example.com/thank-you/?fname={entry:Field1}&lname={entry:Field2}&email={entry:Field3}, the variables would be fname, lname, and email. You would add PHP code that looks like the following to a plugin file or your theme’s functions.php file.

Each PHP variable gets its value from the appropriate GET variables in the URL. If the variable has a value, then it’s returned in the function. If it doesn’t, nothing(”) is returned. The add_shortcode function is used to create a shortcode that will output an answer from the previous Wufoo form.

Insert the shortcodes into the JavaScript code of the Wufoo Form that will be pre-populated

You’ll need to find the API IDs of your second Wufoo Form and take note of the ones that you want to pre-populate. You want to make sure that field values taken from the first form correspond to the correct fields in the second form (i.e. the first name field answer from the first form matches the first name field in the second form). Make sure you’re using the JavaScript embed code for your second Wufoo form. You will look for the line that begins with ‘defaultValues’ and use the shortcodes as values for the fields like so:

'defaultValues':'field3=[first-name]&field4=[last-name]&field8=[email]'

The WordPress visual editor by default won’t output JavaScript at least not directly. One way that you can output JavaScript in the WordPress visual editor is to use the Code Embed plugin which allows you to define a custom field with JavaScript code.

That’s it! To test if your confirmation page will show a pre-populated Wufoo Form, you can play around with the URL like this:

www.example.com/thank-you/?fname=George&lname=Washington&email=me@example.com

If everything was done correctly then you should have a pre-populated Wufoo Form like this:

Now that our second quote form is pre-populated with info from the first, our visitors are able to have a better experience. They don’t have to type in the same information twice. I’m able to rest easy now.

Thanks for reading this post. I couldn’t have done this without Wufoo’s tech support. Although they didn’t have an article to solve my exact problem, they provided me with these three articles to get the wheels churning:

• Multiple Form Submissions with Pre-Filled Fields
• URL Modifications
• Using Templating to Customize Notifications and Confirmation Emails

If you liked what you read, please feel free to share it on your social media pages or comment below.