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

    JotForm 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)

    Drop Down Menu

    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.


Popular posts from this blog

Facebook's new Beta language settings - Pirate English and upside down English