How to Add a Form to Facebook

FormSmarts provides three ways to add an online form on 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 Free 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 an usually best way to add a form to Facebook is to post a link to the form on your 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

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.

Many Facebook users (most users in some countries) access Facebook with their mobile. If you embed a form on Facebook, it won't work with mobiles (Facebook doesn't support this in their apps), so you should always include a link to your online form on your Facebook page. This will ensure mobile users are able to access the form using that link.
  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.

Add a Form to a Facebook Page with an FBML Box

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

  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>