Autofilling Wufoo Form Fields & Other Tricks

Chris Coyier //

It's been a while since I've professed my love for Wufoo. Oh, sweet Wufoo. Thy delicious interface makes form building easy, nay, a pleasure. OK, a poet I am not. A solutions wrangler I am.

In creating a form with Wufoo, you get a special URL right on Wufoo.com where your form resides. You can send people there to fill it out, but much more commonly, you embed the forms directly on your site. You have fairly good design control via their theme manager, or complete control via custom CSS. But these embedded forms come in via an iframe, or through provided JavaScript code which also ultimately ends up as an iframe. Thus, markup control you do not have. (although if you want the HTML to do your own processing, the have templates). This is pretty much a good thing. It means your forms will submit to Wufoo properly without giving you the chance to screw anything up, and allows Wufoo to process it properly and give you access to all the other amazing things Wufoo does.

Now let's say we want to autofill some fields on the form. We don't have markup control so we can't adjust values. And since the form in is an iframe, we can't even access those fields with JavaScript. Fortunately, Wufoo offers a solution. If embedding via the JavaScript embed method (highly recommended), you can pass a defaultValues parameter to automatically prefill fields!

<script type="text/javascript">
                var x7x2q5 = new WufooForm();
                x7x2q5.initialize({
                'userName':'Wufoo-User-Name', 
                'formHash':'abc1234', 
                'autoResize':true,

                /* Autofill Magic! */
                'defaultValues':'field8=PREFILL-VALUE-HERE',
                
                'height':'562', 
                'ssl':true});
                x7x2q5.display();
 </script>

Notice the field8 name? Each field has a numbered name like that. You can find out those values by going under the forms "Code" area and clicking the "API information" button:

So to additionally prefill email in this example, you'd use 'field5=prefill@email.com'. You can prefill multiple fields by separating them with &'s: 'field5=prefill@email.com&field6=name'.

Use Case Scenarios

Multiple Similar Submissions

For the new Digging Into WordPress book, we have a form for submitting Errata. The form asks for page number, the errata, name and email. We've had some folks, very generously, submit lots of lots of little fixes. Every time they submit the form, they need to type our their name and email address, which could be awfully annoying/repetitive.

So in this case, we are going to need to prefill the form with values from the previous submission. This introduces another little issue... How do we get access to just-submitted data in order to use in pre-filling? Wufoo has a full API, but that's more than we need right now. While editing our form (under "Form Settings"), we can chose to either display text, or Redirect to Web Site. Typically just showing some text is a nice way to show a confirmation, but we'll be using the Redirect here. The Redirect URL supports templating, meaning that we can put some special code in it to pass data back to our own site.

In the case of the Errata form, we want their name and email to automatically filled out to make an additional submission easier. So after looking up the field ID's for those things, our redirect URL will look like this:

http://digwp.com/book/errata/?field3={entry:Field3}&field4={entry:Field4}&field5={entry:Field5}

Which results in this after submission:

http://digwp.com/book/errata/?field3=Chris&field4=Coyier&field5=chriscoyier@gmail.com

Now on the Errata page on our own website, we'll attempt to pull those values from the URL when the page loads:

<?php

    function clean($value) {

       // If magic quotes not turned on add slashes.
       if(!get_magic_quotes_gpc())

       // Adds the slashes.
       { $value = addslashes($value); }

       // Strip any tags from the value.
       $value = strip_tags($value);

       // Return the value out of the function.
       return $value;

    }

    $firstName = clean($_GET["field3"]);
    $lastName = clean($_GET["field4"]);
    $email = clean($_GET["field5"]);

?>

The cleaning function there is just to attempt to prevent malicious stuff being entered into the URL.

Now in our JavaScript embed, we'll echo out those PHP variables to prefill:

'defaultValues':'field3=<?php echo $firstName; ?>&field4=<?php echo $lastName; ?>&field5=<?php echo $email; ?>',

That should do it! Of course you'll want to provide some kind of feedback that the form was successful sent, so just check for the presence of one of the variables and spit out a message:

<?php if ($firstName) { ?>
            
   <div style="background: #d7ffd6; border: 5px solid #39c235; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding: 20px; margin: 0 0 25px 0; color: black; text-align: center; font: 18px Georgia, Serif;">
                 
      Thank you! We'll take a look and get 'er fixed for the next update.
                 
   </div>
            
<?php } ?>

Passing along (hidden) information

On Are My Sites Up, we have a Wufoo form for support requests. It is much easier for us to dig up information on people's accounts if we know what their account ID is. But people don't know what their account ID is. It's not important. We also have a particular setting that is important to know when doing support requests. So when creating this form in Wufoo, we'll create two fields for this data, but just by using a CSS Layout Keyword, we can hide those fields from displaying to the user.

But just because they are hidden, doesn't mean their values don't submit! We can still autofill them. AMSU is a Ruby on Rails app, and on this particular view I can access this user data, so I just spit it out in the defaultValues param when embedding the form:

'defaultValues':'field6=<%= current_user.id %>&field8=<%= current_user.timeouts_enabled %>',

A little behavioral spying

Wufoo themselves used this technique on their support form. They wanted to know what page of the site users were on when they opened the contact form (it must have been in a popup at the time). They used some PHP look at the URL and insert it into a hidden field on the form. The point was to see if users were coming from the Help area (proving they attempted to search for the problem themselves) or not.

If you wanted to learn where users were coming from when they got to your form, a hidden field where you prefill the HTTP_REFERRER might be cool:

$_SERVER['HTTP_REFERER']

It's very spoofable and generally not reliable, but for a little form like this, it will still likely gather some useful information.