Multiple Form Submissions with Prefilled Fields

Save time by using this trick to prefill data on forms.

Not already signed up for Wufoo? Let's get started!

By: Chris Coyier

Let’s suppose you want to make it as easy as possible for users of your Wufoo form to submit it multiple times. Perhaps you are having a Haiku writing competition and your form is for submitting those Haikus. You say that multiple submissions are encouraged and, to drive that home, you set the redirect URL directly back to the form itself. But when that form loads again, the fields will be blank or filled with their predefined values. That’s not being as helpful as you could be! After all, they’ve just filled in their name and email address, so can’t the form remember that? There is a way!

View Multiple Form Submissions Demo

Step 1: Create the form

Create new form

If you need help with creating new forms, check out our form creation documentation.

Step 2a: Redirecting to form on Wufoo.com

If you are using your form directly on Wufoo.com, as shown in the callout below, you will need to use the URL parameters method for prefilling your form.

http://example.wufoo.com/forms/example-form/

You can prefill fields by appending to the URL, specifying the field and which value you would like prefilled.

/def/field2=PREFILL-VALUE

Each field has a specific ID. To work out which field has which ID, click the Code button while hovering over your form in the Form Manager. Then click the API Information button.

Field IDs

In our example we are prefilling the “Your Name” and “Email” fields. These fields have IDs of 2 and 3 respectively. Now, in order to access the actual submitted values, we’ll have to use our Templating system. Through this, we can use placeholders such as {entry:Field1} that will be swapped with real values upon submission. So our full redirect URL becomes:

https://examples.wufoo.com/forms/submit-a-haiku-about-forms/def/field2={entry:Field2}&field3={entry:Field3}

Redirect URL with URL Params

To learn more, check out our documentation about URL modifications.

Step 2b. Redirecting to an embedded form

The recommended embed method for Wufoo forms is the provided JavaScript code. This JavaScript can be altered to prefill values inside the form. You pass a new defaultValues parameter to the initialise function. The alteration should look something like this. Just as above, the field# refers to the field IDs.

var m7x3a7 = new WufooForm();
    m7x3a7.initialize({
    'userName':'username', 
    'formHash':'m7x3a7', 
    'autoResize':true,

    // NOTE: This is the line we are adding to the default snippet.
    'defaultValues':'field2=NAME-HERE&field3=EMAIL-HERE',

    'height':'234'});
m7x3a7.display();

In order to make the values prefill properly with previously-submitted data, we’ll have to pass that submit data through the redirect URL and then snag it from there. So let’s make our redirect URL point back to the URL where we have this form embedded:

https://yoursite.com/haiku/?field2={entry:Field2}&field3={entry:Field3}

If you are using PHP, you can snag those URL parameters and drop the values into the JavaScript embed code:

'defaultValues':'field2=<?php echo $_GET["field2"]; ?>&field3=<?php echo $_GET["field3"]; ?>',

If you are using the iFrame embed method, you can use the URL structure as described in Step 2a to append to the URL of the iFrame src attribute, filling in the values with the same $_GET method as above.

Step 3: Thank you message

Unfortunately, if you are redirecting directly to your form on Wufoo.com, you won’t be able to display a thank you message. However, if you are embedding the form on your own site, you can. Just get the page to watch out for the presence of one of those URL parameters, if it is present, and then display the thank you message.

if (isset($_GET['field2'])) {
    echo "<div class="message">Thank you for your submission! Please feel free to enter again.</div>";
}

Multiple Form Submissions / Thank You Message

Conclusion

So that’s how you make your forms more multi-submission friendly! Prefilling fields can be useful in lots of situations. We also only very briefly touched on our Templating system, which is also more widely useful. Stay tuned for more tips about using both of those. If you missed the demo link at the top, here it is again:

View Multiple Form Submissions Demo