The Simplest Way to Add a Customer Contact Form or Sales Lead Capture Form to Facebook

The goal of this project is to create a lead capture form or customer contact form like the one below, and embed it in our Facebook business page. With people around the world spending more of their time online interacting with people and brands through Facebook, this can be a great way of making connections with customers and potential customers within the Facebook experience.

Update: You may want to scan this article for background, but then refer to an updated tutorial that lets you skip some of the steps given below for registering your web page on Facebook and avoids some issues with Facebooks “secure browsing” feature.

ExpressDB Facebook tab

An ExpressDB contact form on Facebook

See this example live at www.facebook.com/expressdb (and click the Like button while you’re there, please).

Creating a Facebook page for your business or organization is free, and adding basic interactivity like a Contact Us form can be simple and inexpensive with the use of ExpressDB. ExpressDB provides a simple way for web designers and HTML coders to create interactive forms without hassling over the details of programming and database setup. ExpressDB takes the input from your form and automatically creates a database to match, reliably storing whatever data you choose to capture. This has to be the absolute simplest way of creating something like a lead capture or customer contact form to add to your Facebook page.

ExpressDB offers a free trial so you can experiment with no obligation. If you become a customer, ExpressDB will record up to 1,000 submissions per month for a $16.95 monthly subscription (see pricing), with add-on packs available for higher volumes (you could have worse problems than pulling in 1000+ sales leads).

Any web form can be turned into an ExpressDB form with the addition of one copy-and-paste line of code, which goes into the form tag in your HTML.

Copy the ExpressDB activation code and use it to replace the HTML <form> tag

You can download the sample Contact Form from our forms gallery as a starting point. Change the formatting as necessary to match your branding, and tweak the layout to fit within the relatively narrow column (520 pixels wide by 800 pixels tall) that Facebook gives you for embedded content. You definitely don’t want your content to be wider than that. If it’s taller, Facebook will display a scroll bar to let you see the content in excess of the 800-pixel limit.

You will actually upload this content to your own website and let Facebook display it with an HTML IFrame. This is an embedded HTML frame, where your content is actually treated as an independent web page (even though it’s displayed within a Facebook page) and can include its own independent interactive content, including things like JavaScript user interface widgets, video, and animation.

For the example shown here, we have uploaded our ExpressDB form to expressdb.com/facebook/index.php – and you can see it there as an independent web page. We are going to take that content and plug it into the Facebook Developers application.

Note that the file extension is PHP rather than HTML because this file is capable of processing programming instructions in the PHP language, in addition to displaying HTML. We’re not actually going to write any PHP code, but Facebook will post some data to that page in the process of loading it, and some web servers will display an error message when an HTTP POST is directed at a plain HTML file. Depending on your web server setup, you could use a CFM, ASP, or ASPX file — check with your web administrator if you don’t know which is supported on your server. If you’re running a small business website on a service such as GoDaddy, you will probably find that PHP is supported.

Key points:

  • Create a directory on your web server into which you will load the file for your ExpressDB form.
  • Make the file itself display as the index of that directory by using a file name such as index.php

If you do not already have a Facebook page, register one at http://www.facebook.com/pages/create.php (see this this Facebook business page tutorial for more how-to details on the basics).

Now go to the Facebook Developers site at www.facebook.com/developers and register, agreeing to their terms of service.

Once you are registered, you can click on Create App. Fill in the basic details for the name of your application, your web site, and your domain. You don’t need to fill in a detailed description of your app if it’s only for use on your own Facebook page (as opposed to being a public app, listed in the application directory, that you will encourage others to add to their pages).

The most important variables you need to fill in are on the Facebook Integration tab. For the Canvas URL variable, use http://www.mysite.com/myapp/ and for the Tab URL (which must be different) use http://www.mysite.com/myapp/index.php (or whatever the name of your index file is). In this case, both URLs will actually access the same content. You also need to fill in the label that should appear on your tab. Optionally, you can fill in the Canvas Page, as we’ve done below with “expressdb-contact” in the blank. This makes our form accessible at apps.facebook.com/expressdb-contact/ as well as within the context of a tab on our business page.

Here is how the Contact Demo tab at www.facebook.com/expressdb is set up.

Facebook Developer app registration

Registering an Application on Facebook

Update: This form has changed to include a new Secure Tab URL field. To avoid conflicts with Facebook’s secure browsing feature, you should provide an https variation of the address for your form. This requires obtaining an SSL security certificate for your domain and installing it on your server (which may require getting help from your web host). To avoid that requirement, try this alternate technique for adding ExpressDB forms to Facebook.

After saving your work, visit the Application Profile Page Facebook creates, and you will see Add to my Page as one of the links on the left hand side. Click there, and you will be given the option of adding your new page tab to one or more pages that you own or administer. Go to your page to verify that the tab is now showing up.

Optional but recommended: Change the icon that appears next to your tab. Go back to the www.facebook.com/developers and look for the App you just registered under My Apps. Click on the name you gave your application, and then Edit Settings. On the About tab of the settings screen, click Change Your Icon and upload a small, squared-off image that evokes your brand. For our page tab, we used just the “DB” part of the ExpressDB logo.

Just for bonus points, you might visit the Facebook Social Plugins page and get some copy-and-paste code that will add some additional interactivity to your page. Just fill out the form, and Facebook generates a little snippet of code I can use. Here, I’m grabbing the XFBML version of the code for the Facebook Recommendations box, which shows which of the blog posts from this website have been shared most frequently on Facebook. If you look at the example at Contact Demo tab at www.facebook.com/expressdb, you will see I’ve added this widget just below my form.

Facebook Social Plugins

Copy-and-paste code from Facebook

That’s about it! Of course, there’s plenty of potential for deeper, fancier technical integration with Facebook. But if what you’re really looking for is a simple inexpensive way of adding a customer contact form (or any other web form) to Facebook, and know the data you collect will be recorded reliably, you can do it easily and inexpensively with ExpressDB.

Posted in Facebook, Tutorials | Leave a comment

Leave a Reply