Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta name="description" content="Facebook Login with Wufoo form submission." />
    <script src="//code.jquery.com/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>Wufoo Form with Facebook Login</title>
  </head>
  <body>
    <div class="fb-login">
      <button class="btn btn-primary btn-lg" data-loading-text="Please wait..."><em class="fa fa-facebook-square"></em> Enter with Facebook</button>
    </div>
    <div id="wufoo-form">
      <!-- Paste Wufoo HTML code here -->
    </div>
  </body>
</html>
 
body {
  margin: 10px;
}
#wufoo-form {
  display: none;
}
.fb-login {
  text-align: center;
}
 
// Facebook Setup
window.fbAsyncInit = function() {
  FB.init({
    appId      : 'app_id_here',
    xfbml      : true,
    version    : 'v2.0'
  });
};
// Facebook JavaScript
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// jQuery Functions
$(document).ready( function() {
  // on click function for Facebook login button
  $('.fb-login button').on( 'click', function( e ) {
    // remove previously checked values
    // this is only required if you are using radio buttons or checkboxes
    $('[name="Field105"]').removeAttr('checked');
    // Trigger login to Facebook, asks for 'email' permissions
    FB.login(function(){
      // on login, get the user's details
      FB.api('/me', 'get', {}, function (response ) {
        // debug
        console.log(response);
        // add the user's details to the form
        // form names must match your HTML code
        $('[name="Field1"]').val( response.first_name );
        $('[name="Field2"]').val( response.last_name );
        $('[name="Field3"]').val( response.email );
        // check the correct gender box
        if ( response.gender == 'male' ) {
          $('#Field105_1').attr('checked', 'checked').trigger('click');
        } else if ( response.gender == 'female' ) {
          $('#Field105_2').attr('checked', 'checked').trigger('click');
        } else {
          $('#Field105_0').attr('checked', 'checked').trigger('click');
        }
        // submit the form
        $('#form1').submit();
      });
    }, {scope: 'email'});
  });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nirajpro
0viewers