Online form builder + web form platform

Add a Form to Facebook

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

• Link to a form from Facebook
• Embed a Form into a Facebook Page with Static HTML
• Integrate a Form to Facebook with an FBML Box

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.

Link to a Form from Facebook

Before discussing how to embed a form into Facebook, you should be aware that the simplest way to add a form to Facebook is to post a link to the form's URL on your wall or anywhere on your Facebook page. Click on the URL link in the Forms Tab of the form builder to see the URL of your forms.

Embed a Form into Facebook with Static HTML

Another way to add a form to Facebook is the integrate it in its own tab on your Facebook page. Follow the four 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. Paste the code snippet given by the online form builder under Enter Your Content Here (or Fan Only Content if you want the form to only show to vistors who “like” your page.)
4. In the code, change width="540" to width="490".

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

Note: This option is kept for information purposes but is no longer maintained and may not reflect changes to 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>