There’s no point in having the perfect email newsletter without having anyone to send it to. First, you need to establish a list of contacts, and this begins with building a subscription form that lets interested people sign up to your email communications. 

These days clients and prospects are very likely to be searching for you on social networks. Therefore, your company’s Facebook Page is an ideal perch for your email sign-up form, since it is highly visible and accessible.

In times past, if you wanted to add widgets to your Facebook Fan Page, you needed to use the Static Facebook FBML application (Facebook Markup Language). However, Facebook recently announced that they would be discontinuing their support of FBML in favor of iFrame. This is actually good news from a marketing point of view as FBML was restrictive about what was allowed within Facebook.

GraphicMail investigated how setting up a custom tab on Facebook using iFrame can be done - which can be difficult if you’re new to email and social media marketing.

Here then is our complete, foolproof step-by-step guide to building Facebook subscription forms via iFrame:

Action Summary:

1.    Create subscription form on your GraphicMail account.
2.    Grab the form’s HTML code.
3.    Add it to your Facebook page via the iFrame tab.


PHASE 1: Create a subscription form on your GraphicMail account

Log in to your GraphicMail account and you will see a list of subscription form options on the left navigation:

Subscription Form
•    Subscription form wizard
•    Setup Form
•    Put it on your website
•    Autoresponders
       
The easiest and quickest option is, of course, to use the subscription from wizard.

Step 1 - Set up the design of your subscription form   

Once you’re in the wizard, you are given a few basic building blocks to work with:

•    Logo: Select the image you want to use as the logo for your subscription form and upload it to the top of the form.    
        
•    Background Color: Pick a color for the subscription form background.

•    Text: Choose the style, size and the color for the text on your subscription form

•    Subscription Form (text link) buttons: Choose the style, size and the color for the text links on your subscription form

Once you are done with these, you can preview your subscription form and keep tweaking the above steps until you have the most desirable product.

(Note: If you are looking for more flexibility in the design that the form can be further customized via the “Subscription Form Setup” option.)

Step 2 - Choose your main subscription list(s)

At the next screen you are about to define how and which lists your subscribers will be signing up to through this form. These options are:
   
-    New subscribers will be saved to a single mailing list
-    New subscribers will have the option to subscribe to multiple mailing list.
-    Select the existing mailing lists to display on your subscription form

Naturally, pick whichever option works best for you.

(Note: New mobile numbers will be saved to your mobile list) 

Step 3 - Choose the fields to display on your subscription form      
     
Here you decide what information you want from news subscribers by ticking the relevant fields and sections to be displayed in your subscription form.
          
You are able to choose from:
-    Entry Name   
-    Email Address       
-    Mobile Number       
-    First name       
-    Last name       
-    Occupation       
-    Industry       
     
(Note: In the advanced mode Address Book, you can customize your address book format further (e.g. change field labels, create fields with your own dropdown menus, checkboxes and so on.)

And with that, your subscription form is finished.

PHASE 2: Placing the subscription form on your Facebook page

When you place a subscription form onto your website, you have 3 different options available; however for our purposes, please select the last option in the list, namely: “Embed the entire form onto your website”.

Step 1 – Capturing and embedding the HTML code for your form

On the next page we can generate either javascript or non-javascript code for your subscription form (please select the Non-javascript version).

Copy the HTML in the text area (temporarily into notepad) which you will later be pasting to your Facebook page, enabling visitors to subscribe to your newsletters.

Step 2 - Installing IFrame and navigating the HTML code interface

Go to your Facebook page. In the top search bar, search for “Static IFrame Tab”, choose the page you want to add the application to and then hit the install button.

Once the installation is done, click on the “Static IFrame tab” on the left navigation:

There will now be a screen with the following options available to you:
-    “Edit Tab Content”
-    “Edit Tab Name”
-    “Set Default Landing Tab”
           … and more.

For now, click on “Edit Tab Content”.

There are a lot of options available here that may be altogether confusing, however we can very simply and directly proceed to add our form since we’ve already acquired the HTML version when we created it on the GraphicMail backend. 

To insert your HTML code:

•    Select the option to work in HTML mode.

•    Copy your subscription form code from notepad.

•    In the large text area, paste your subscription form HTML so that it sits in between the following statements in the code:

           <body>

           </body>

•    Scroll down and click “Save”. Your subscription form is now loaded onto your Facebook page and ready to implement.  Now, just a few housekeeping tasks are needed before the operation is finished.

Step 3 - Setting up  your subscription form

At the moment your subscription form has been assigned with a default name. It’s important that you change this to something more prominent that will make it clear to your fans and followers that this tab contains your newsletter subscription form. For example; something obvious and instantly noticeable, such as “Monthly Newsletter Sign-Up”.

And so, to change the name of your subscription form:

•    Go to your wall, click on “Edit Page” on the right menu, then click on “Apps” on the left menu.
•    Scroll down to “Static IFrame Tab” and click on “Edit settings”.
•    A pop-up window will appear which allows you to enter a custom tab name.
•    Once you’re done typing, click on “save” and then “okay”.
•    Next click on “Manage Permissions” tab on the left menu.
•    Go down to the “default landing tab” option and select the tab you have just created (it should be listed as the name you have just given it, making it very visible.)


That’s it!  Congratulations! Your custom subscription form will now display on your Facebook page.

From the “Manage Permissions” screen, click on “View Page” to take you back to your page.

And voila! You will notice that the name of your subscription form landing page is now displaying as an item in the left menu. Fans and friends on Facebook are now just a few keystrokes away from signing up to your mailing list.

If you are uncertain about whether your form is displaying and working correctly, feel free to have a third party look at your page and sign up for via his or her own personal Facebook account as a test.

Final Note: Usually one would need to host a subscription form on a separate server in order to get the image to be available for display to all viewers (such as when you load images onto a HTML newsletter), but since you’ve created the subscription form on your GraphicMail account, the image is hosted by default on our server and pulls through directly to your Facebook page.