How To Add a Custom Form to your Facebook Static FBML Tab using JotForm

This is a tutorial on how to create a contact form using JotForm.

Getting Started with JotForm

There is a free option and a paid option. Both have the same features, but the paid option allows more forms, more submissions, etc. Here's a comparison chart.

Getting Started with JotForm

• Set up account (free or paid);


• Click New Form
  
  
  
  You can create a form from scratch ("Blank Form"), select a form template (for this tutorial I chose "Contact Us"), or import a form from another website or another form previously created on JotForm. After making your selection, click "Continue"...


• "Contact Us" Template
  
  Assuming, for the purposes of this tutorial, you chose "Contact Us," you'll see it has: Name (separate first and last name fields), Email, Message.


• Add Drop Down (aka Pulldown Select)
  
  
  
  To add your drop-down options, click the small icon to the right of the pulldown box


• Add Radio Button
  
  Enter the question, then click the individual options to edit:
  


• Editing Properties (the gear icon)
  
  
  You can change the size of the field, or change its order in the form (which can also do by clicking and dragging), or delete or duplicate the question.


• Add a Checkbox
  
  The Checkbox configuration options are the same as the Radio Buttons:
  
  


• Toolbar
  
  The toolbar options change depending on which field you're editing. This is the main toolbar for "Form Style":
  
  


• Themes - Attractive one-click theming options. I chose the "Default" theme for its simplicity.


• Clean up
  
  I got rid of the header and just kept the form.

JotForm Setup & Share

After you have created your form, you then need to set some options for the email that is sent with the form data, as well as generate the code you will need to insert into your Static FBML tab.