Facebook Social Login: Fill form fields with details from Facebook

Follow

Hello,

I wanted to know if it’s possible for a form on an Unbounce page to be filled using the information of one’s Facebook profile?

Thanks!

Best answer by Johnny_Opao

Hey Michael - We don’t have a built in solution at the moment. However I put together a solution that should work in filling your forms with basic Facebook information. I’d be happy if you could give it a try and let me know if it works for your use case.

Add the script below to your ‘javascript’ box in the page builder

https://gist.github.com/johnnyopao/0f…

Be sure to update the section in the code labelled “UPDATE FIELDS BELOW” with your own fields IDs

To find the ID of your Unbounce fields open up the form builder, select a field, and look at the grey text below your field label. The grey value is the ID for that field.

Form builder panel with "Hide label" checkbox highlighted for the Name field's Field Label settings.

Once your form fields are configured drop a button on your page and set its URL to:

javascript:checkLoginState();

This will get the button working under the domain ‘unbouncepages.com’. However if you wish to use this under your own domain you’ll need to configure some settings within Facebook itself.

Keep in mind you’ll only need to follow the instructions below for the first time you setup your Facebook ‘app’.

One time setup: setting up your own Facebook form app

Head over to Social technologies | Meta for Developers  and enable access to your developer account.

At the top menu select ‘Apps > Create a new app’

Facebook Developers Apps menu open, with arrow pointing to "Create a New App" option.

Set your apps display name and choose a category. Once that’s done select ‘Settings’ from the left menu.

Facebook Developer app Settings panel with arrows highlighting Settings menu, Contact Email field, and Add Platform button.

Set the ‘Contact Email’ and select “Add Platform”. Choose ‘Website’ and define your domain URL.

From the left menu select ‘Status & Review’. Toggle the switch to turn your app ‘Live’

Facebook Developers portal showing "Status & Review" selected and the app's public availability set to "No"

Your app is now configured! The last step is to obtain your App ID. Select ‘Dashboard’ from the menu and copy your ‘App ID’

Facebook Developers dashboard with App ID field highlighted with an arrow for the Company Form Fill app.

Head back over to the Facebook form fill script and replace the App ID with your own:

JavaScript code showing FB.init() with appId field highlighted by a blue arrow indicating where to enter your Facebook App ID.

That’s it! Remember this configuration only needs to be done once, afterwards you simply need to paste the updated script on your page and set your button to javascript:checkLoginState();