Online form builder + web form platform

Home > Facebook Form

Add a Form to Facebook

This document presents three ways to integrate an online form into a Facebook page:

The easiest and usually best way to attach a form to a facebook page is by posting the FormSmarts's link of the form on your Facebook page:

  • Linking is the simplest way to add a form to Facebook
  • Smartphone and tablet users will automatically get a mobile form providing them the best possible experience on a mobile.
  • As Facebook evolves, they are changing their platform and policies. This sometimes has the unfortunate side effect of breaking existing ways to integrate third-party content with Facebook. Linking should always work.

Create a Form with the Online Form Builder

The first step is to create a form with the online form builder. Building a form is easy; simply sign up for a FormSmarts account if you haven't got one, then log on to create a form. Most people find using the form builder simple and intuitive. If you do need help, there is a complete tutorial with a 4 min video introduction to get you started.

The simplest way to add a form to Facebook is to post a link to the form on your wall or anywhere on your Facebook page. Click on the URL link in the Forms Tab of the online form builder to view the URL of your web forms. You can also get the FormSmarts.com URL and shortened URL of the form in the Form Publishing Info screen of the form builder (screenshot below).

Embed Form into Facebook

Facebook on Mobile Devices

If you expect that some users will access your Facebook page from a mobile device (why you should care about mobile Internet users), you should always include a link to your online form on your Facebook page — even if you decide to embed the form on Facebook. This will ensure mobile users are able to access the mobile version of the form using that link.

Embed a Form into Facebook with Static HTML

Another way to add a form to Facebook is to integrate it in its own tab on your Facebook page. Follow the three steps below to embed a form into Facebook.
  1. Add the Static HTML application to your Facebook page. If requested by Facebook, change to Use Facebook as your personal profile.
  2. Check No Scrollbar
  3. Grab the Facebook embed code given in the Form Publishing Info screen of the Online Form Builder (see screenshot above) and paste it into the box named Enter Your Content Here (or Fan Only Content if you want the form to only show to vistors who “like” your page.)

The form should now appear in a new tab on your Facebook page. To change the tab's name, click Select Apps on the right column, then click on Static HTML: iframe tabs and Edit Settings.

Important Notes:
  • Since Nov 2013, forms won't show up on some Facebook pages unless they are loaded via a secure connection (SSL/HTTPS). Since FormSmarts only supports secure forms with Business accounts, forms embedded onto Facebook may no longer work with a Free or Pro account. If you have a Free or Pro account and the form doesn't show up, please link to the form as described above instead or upgrade to a Business account.
  • If you are a Business user, Please get a new copy of the Facebook embedding code from the form builder and make sure storage of form responses is turned on for that form.

Add a Form to a Facebook Page with an FBML Box

Note: This option is kept for information purposes but will no longer work with the current version of the Facebook platform.

  1. In Pages You Admin, click on Edit Page to edit the page where you want to place a FormSmarts form widget.
  2. At the bottom of the page, click on Browse More under More Applications and Add a Static FBML Box. Edit the page.
  3. In the box title type: FormSmarts Form Widget

Adding the Form Embedding Code to Your FBML Box

Visit the Forms tab of the form builder to get the HTML code for embedding your form. Next, replace the portions of text that appear in yellow in the FBML code below by the actual values given in the form embedding code.



<a onClick="outside_location.setInnerFBML(link_1);" 
  style="cursor: pointer;">Fill out my FormSmarts form!</a>

<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe 
  height="1676" 
  allowTransparency="true" 
  frameborder="0" 
  scrolling="no" 
  style="width:100%;border:none" 
  src="http://formsmarts.com/form/yu?mode=embed&lay=2">

</fb:iframe>
</fb:js-string>

<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>

Changing the FBML Box to a Tab

Unless the form you've added to your Facebook page is short, you will need to move the static FBML box to its own tab of your Facebook fan page.

In Application Settings:

  1. Remove the Box
  2. Add Tab

Then change form width to 540 pixels in the FBML code to:


<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Fill out my FormSmarts form!</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="1676"  
 style="border:none;width:540px;" 
 allowTransparency="true" 
 frameborder="0" scrolling="no" 
 src="http://formsmarts.com/form/yu?mode=embed&lay=2">

</fb:iframe>

</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>

Connect with FormSmarts

Keep up with new features, ask for help.

From the Form Builder Blog

©2014 Syronex