How to Create a Facebook Contact Form (or Put Any Other Form on Facebook) Using ExpressDB

Update: We’ve posted updated guidance on how to take advantage of recent Facebook upgrades that make it easier to integrate your form with the business pages on the service. See ExpressDB: The Simplest Way of Adding a Customer Contact or Sales Lead Capture Form to Facebook

As Facebook becomes increasingly important for businesses who want to interact with customers online, many business managers are looking for simple ways of adding interactivity to their Facebook marketing campaigns. Ideally, you want to be able to give Facebook users a way to fill out a contact form without being redirected to another website. Facebook fans tend to respond better to marketing offers and other outreach efforts that they can respond to within the familiar confines of the social media service.

ExpressDB provides a simple way of adding forms for customer data capture or any other purpose to Facebook. See the live demo of the Facebook contact form discussed in this tutorial.

As with any other web form, ExpressDB lets you capture data from your Facebook form with zero database configuration. Just point your form at the ExpressDB service, and the database is created for you.

To put a form on Facebook, prepare your form as usual, replacing the action tag in the form’s HTML with the one generated by ExpressDB. The ExpressDB forms gallery provides several common types of forms, such as contact and inquiry forms, that you can download and customize. The resulting web page with all formatting should be no more than 700 pixels wide to display properly on Facebook.

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

Upload the page to your website and confirm that it works as a stand-alone web form. Next, we’ll turn it into a Facebook app.

Log into Facebook and visit the developers section. You won’t have to do any programming, but you do need to fill out an online application to register your web form as a Facebook app.

Click on the Set Up an App button. Enter a name for your App, agree to the terms of service, and click Create App. This will open an editing screen with several tabs. The tabs we will concentrate on are Website and Facebook Integration.

Step 1: Visit the Website tab and enter the address of the page on which you have installed your application in the Core Settings section.

Facebook may reject a file name ending in .html because it looks like a static file rather than an application. To get around this, you can append a query string to the end of the address as we’ve done here (?facebook) or you can use a file extension such as .php or .asp (depending on what is supported by your web server). These file extensions are associated with web programming, where programming commands are interspersed with HTML. But you do not have to include any programming commands — just the HTML for your form.

For Site Domain, enter the root address without the http prefix (“www.demo.com” in this example).

The Website tab

Step 2: Switch to the Facebook Integration tab and enter the page address you’re requesting to be assigned to this application. In this example, we have entered “expressdb-contact” which means the application will be available at http://apps.facebook.com/expressdb-contact/.

The Facebook Integration

Step 3: Click the Save Changes button. Visit to the app page address you established to verify that your form displays properly.

In the example below, note that there is room to add more branding and promotional copy. You can use this web address as the landing page for Facebook advertisements, targeted by interests, affiliations, demographics, and geography, or share the link on your own Facebook profile or business page.

Your form on Facebook

By default, when a user submits the form, ExpressDB will display the confirmation page shown below. You can also designate a page from your own website to be used as a confirmation page, with your own branding and follow up messages. If you do that, make sure it is formatted to fit within the Facebook window.

The ExpressDB default confirmation page (you can substitute your own)

Start with a free trialStart with a free trial to see all that ExpressDB can do.

For a richer, but still very easy to use online database environment for creating forms, reports, charts, graphs, mashups, check out Caspio Bridge and the instructions for publishing Caspio apps to Facebook.

Share
Posted in Tutorials | Leave a comment

Leave a Reply