How to Add an Email Webform to Your Facebook Page

Collecting email subscribers on your Facebook Page takes a lot more than simply adding an opt-in form to a custom tab (you’ll learn how in just a moment).

To do it right, you need to come up with a smart strategy that makes sense:

Assuming you’ve got the basic strategy, here’s how you embed a sign-up form on your Facebook Page:

1. Create a image that captures attention


Oceana uses the image above to create an emotional appeal to sign their petition. Here are a few other examples of how images and design can improve actions.

Do not skimp on graphics! You want to license professional produced images from a site like Fotolia, and if you don’t have photoshop, you can use a free online image editing site like Pixlr. Make sure your image width is no more than 520 pixels (the max width for any Facebook tab).

2. Upload your image to a photo-sharing site


Most photo-sharing sites allow configure privacy setting on hosted images. Above is the settings for Flickr.

Once you’ve uploaded the image, copy the image URL by mousing over the image and right-clicking on “Copy Image Location”. The URL should end in JPG, PNG or GIF. Paste this URL into a text editing document for now.

3. Create an email web form in your email marketing service

Most email services, like Constant Contact, MailChimp and Aweber allow you to easily create an email opt-in form. Aweber for example, has a three-step wizard for creating these forms with copying the code as the final step.

Once you’ve copied this code, paste it into the same text edit document that you pasted the image URL. If you want to opt-in box below the image, paste it below the image URL.

4. Add some HTML to your image

In your text-edit document, you’ll need to add a little HTML code so that your image will actually display. At the beginning of the URL, add “<img src”, and at the end add “/>”. This language tells the browser to display the image.

5. Add the Static HTML app to your Facebook Page


Now that we have the required code written, we need to add it to your Facebook Page. To do this, go to the Static HTML application on Facebook and select “Add Static HTML to a Page” (shown above).

Once it’s added to your Page, go to your Page and click on the new “Welcome ” icon that appears in your tabs.

6. Add the HTML code to your Facebook Page

Copy all the code you’ve created in the text edit document and paste it into the field that says “Public Content” (shown above). Click on “Save and Publish” button to see the preview preview. If you need to edit the tab further, just click “Edit Tab”.

Categories: Custom Tabs