Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

I researched several online form creation and hosting services and determined that JotForm and Allforms were the best choices for creating a contact form for your Facebook Static FBML tab. 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.

• Setup & Share - Email Alerts:
  Click the "Setup & Share" tab to activate these choices:
  
• Click "Notification" to edit Subject of email
  
• Set From address and Recipient
  Click the "Reply-To and Recipient Settings" to set "Sender Name" and "Sender E-mail" (you can set this to the values the user inputs in your form, using {yourEmail} or whatever value the email field has.
  
• Set redirect after form is submitted.
  Click the "Thank You" icon to set what the user sees after submitting the form (Default Thank You page; Custom URL; Thank You message)
  

Generate the code for your Static FBML

• Click "Share Form" (the "globe" icon in the top navigation) to get the code for your Facebook Static FBML tab. In the popup window, click "Advanced Options" at bottom of window:
  .
• Click "Full Source Code" in left navigation. (DO NOT select "Social Networks" — there's a "Facebook" option there and instructions for adding to Static FBML, but the code provided DOES NOT WORK!); Per a Jotform employee's comment below, Jotform has now fixed the "Social Network" tab under "Advanced Options" so that the code it generates works in Facebook. But it doesn't support validation or CAPTCHA.
• Click in the "Full Source Code" field to highlight all the content and copy this to your clipboard (Mac: Command+c; Windows: Control+c).
• Per these instructions provided in the JotForm Forum,
  replace the last 3 or 4 lines at the bottom of the copied source code (between the last </div> and </form>) with "<input type="submit" value="Submit" >" so the code will work in Facebook.

HyperArts JotForm Example

Check out our example of a JotForm form on a Static FBML tab.

You can customize the CSS for the form in the <style> tags. I added:


label { font-weight:normal; }
.form-label-top { font-weight:bold; }


to bold just the form field labels, but leave the options normal.

Recipient Email Format

Here's the HTML version of the JotForm email that is sent to the specified recipient of form data:


If you have questions about using JotForm, rather than ask them here, please use the JotForm Support Forum.

And, please, if your experience differs from this tutorial, let me know!