Web Niraj
  • Facebook
  • Flickr
  • Github
  • Linkedin
  • Twitter
  • YouTube
Online portfolio, code examples and developer blog
  • About
  • Contact
  • Portfolio
  • WordPress
Search the site...
  • Home
  • Code Examples
  • Wufoo JavaScript Forms with Facebook Login

Wufoo JavaScript Forms with Facebook Login

0

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:

Screen Shot 2014-08-13 at 12.00.41

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:

Facebook App Settings

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:

Facebook_Console

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();
Facebook, JavaScript, jQuery, Wufoo

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

StackExchange / StackOverflow

profile for Niraj Shah on Stack Exchange, a network of free, community-driven Q&A sites

Support Me

Buy Me a Coffee

PSN Profile

Tags

ACL Amazon Web Services Android Android 4.4 KitKat Android 5.0 Lollipop Apache Backup Bash Bug Command Line Cordova cPanel / WHM Facebook Facebook Graph API Facebook PHP SDK 4.0 Facebook Social Plugins Fan Page Flash Geolocation Google Nexus 5 Hacking HTML5 Input Sanitization iOS JavaScript jQuery Laravel 5 Laravel 5.2 Linux Mac OS NodeJS Parse PDF PHP Plugin Portfolio Review Security Server SSH SSL Sysadmin Tutorial WordPress WordPress Plugins
© 2011-2025 Niraj Shah
  • Blog
  • Portfolio
  • WordPress
  • About Me
  • Contact Me
  • Privacy Policy
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Privacy Policy