Using Your Formstack Form in a Facebook Tab

Written by Chris Lucas on January 15, 2013

Posted in Form Hacks, Lead Generation

Let’s face it. Facebook is everywhere. Your sister, brother, colleague – heck, even your mom – is using it to keep in touch. But, if you are like 9 million small businesses, you are using Facebook for more than just sharing puppy/baby pictures – you are using it to attract customers.

Facebook is great to get people to like and share your “stuff” but sometimes you want more than a like. Maybe you want to sign people up to your newsletter or have customers enter more information for a contest. That’s where using a Formstack form in Facebook can help. Below we outline the best way to build and embed a Formstack form into your Facebook fan/business page.

Step 1
Because nothing in Facebook is easy, you need to do a little “development” on your page. Don’t worry, it’s really not that hard. To create a new tab you need to first login to https://developers.facebook.com/apps – you can login with your normal Facebook username and password.

Step 2
Click “Create a New App” at the top left. Don’t get too hung up on the fact that all you really want is a tab. Facebook likes to confuse you.  A dialog screen will pop up and you can give your “Tab” a name. The “App Namespace” is basically the unique id your app will be given.

NOTE: You don’t have to worry about the hosting option for this simple setup.

Step 3
The next step can look a bit intimidating, but it’s really not. The first time I set this up I went back and forth trying to figure it out. Look for the “Page Tab” option near the bottom of the page. Clicking it will expand your options for your tab.

You will want to give your tab a name and create a URL. The URL you use will be your form URL. For this example I created this form –  http://www.formstack.com/forms/onlineforms-win_a_free_formstack_account – You can find your form URL under the “Publish” tab in your Formstack account. You can also add an image for your tab, but this step isn’t necessary. If you enable SSL on your form under the Settings > Security tab, you can also place a secure URL under the Secure Page Tab URL.

This is where things get a little complicated. You will need to add your tab to your Facebook page.  The URL you will need is:

https://www.facebook.com/dialog/pagetab?app_id=YOURID&next=YOURURL

You can find your ID and your URL in the Facebook settings you just set up. The app ID can be found at the top of your tab settings.

The URL is the URL you gave when setting up the tab options, and in this case it is your Formstack form’s URL.

If you have entered the above information correctly you should see a page that looks like this:

Screen Shot 2013-04-28 at 9.03.25 AM

Once you add to the page you can go to your Facebook page and you should see a tab with your form!

Once you click on the icon for your tab you should be taken to the tab and should see your form. Users can submit to your form just like they can anywhere else. Remember, you can still use our features like confirmation emails, integrations, etc. You can direct users in campaigns (email, twitter, etc) to that tab by just copying and pasting the tab URL that you see in your browsers URL address.

For our Facebook page, we use this embed as a way to gather email addresses for our newsletter. Check out the Formstack page and look for the “Email Sign Up” tab. Any questions or other uses for this how-to? Let us know in the comments below!