Wufoo offers a great way to create forms easily, be it for competitions, suggestions or just general contact information. With this tutorial, you can learn to extend the Wufoo forms you create with Facebook functionality, so you can prefill forms. This method uses the embeddable JavaScript code that Wufoo provides after creating your form.
1. Create a form
Start by creating a basic form in Wufoo. I’ve device to create a very basic form with three text fields and a few radio buttons to capture the user’s name, email address and gender:
2. Get the Form Hash and Username
Once your form is created, we want to get the code. You can do this by going to [Forms], and then clicking on [Code] for the form you want. The click on [API Information] and look for the Hash. We need to copy and paste this into the following JSBin template, where it says form_hash_here. We also need to enter your Wufoo Username where it says wufoo_username_here.
3. Setup Facebook
The next step is to setup Facebook. You need to create a new Facebook App and then use the Application ID in the JavaScript tab, replacing app_id_here with your Application ID. Remember to update your app settings so that it points to your JSBin code:
If you like, you can use my Facebook ID instead of creating a new application. App ID: 515655801779004.
4. Update the JavaScript Code
Now that your form is setup, we need to modify the JavaScript code that prefills in the form after the user logs into Facebook. This is done right after the FB.api() function call. You need to use the name of the fields in your form to tell the JavaScript code what to fill in.
For example, in my form, the first name field is named Field1. So in my JavaScript code, I need to prefill the first name here by doing the following:
options.defaultValues += 'Field1=' + escape( response.first_name ) + '&';
Similarly, for the email address, the field is named Field3. To prefill this, I can do the following:
options.defaultValues += 'Field3=' + escape( response.email ) + '&';
Repeat the above process until you pre-fill all the fields in your form. If you are unsure as to what other details you can obtain from Facebook, the console.log(response); line will output the result of the API call to the JavaScript console on JSBin when a user logs in:
5. Test the Code
You are now ready to test your code. You can do so by opening your JSBin code in a new URL (don’t use the Output tab directly as Facebook doesn’t work there) – this can be done by going to https://jsbin.com/{jsbin-id}/latest, replacing {jsbin-id} with the ID for your code.
You can test my version of the app here: https://jsbin.com/dikene/latest and you can see the code here.
If all goes well, you will be asked to login to Facebook when clicking on the button. After a few seconds, the form will be rendered with your Facebook details in the correct fields. You can then click the [Submit] button to send the details to Wufoo, after which you’ll see the “Thanks” page.
Bonus: Hide the Login Button
As a bonus, you can hide the Facebook Login button after the user clicks it. To do this, you can add the following line to the JavaScript code, just after the wufoo.display(); line in the code.
$('.fb-login button').fadeOut();