A few weeks ago, we told you how to use ExpressDB as the simplest way to add a contact form (or any other form) to Facebook. In this update, we will show you an even simpler way. At the same time, we have to update on some changes Facebook has been making that can complicate things if you don’t watch out. But we will tell you how to work around these pitfalls.
First the good news: a simple technique for adding your form to Facebook that cuts out some of the steps our previous tutorial outlined for registering your form as a Facebook app. Instead, you can take advantage of an existing Facebook app called Static HTML: iframe tabs. Just edit the HTML code for your form, customize the opening <form> tag with the ExpressDB activation key, and copy and paste that code into the Static HTML app, and — presto! — the form appears as a new tab on your page.
This tutorial covers the creation of the tab on our Facebook page labeled Contact Demo 2.
Here is the process:
- Visit the home page for the Static HTML app.
- Click the Add to My Page link and select the page you want to add your tab to.
- Navigate to your page, which should now show a new tab at the end of the list, below standard tabs such as The Wall.
- When you view this new tab while logged in as administrator, you will see an editing user interface as shown below that allows you to put in your custom HTML.
- Once you save your work, follow the instructions to preview your tab.
The new ExpressDB Shortcode plugin for WordPress lets you easily add data capture forms to your blog or website. The plugin is available in the WordPress.org repository at http://wordpress.org/extend/plugins/expressdb-shortcode/.
What you’re seeing below is a live example from our blog.
And this is what it looks like in the WordPress editor:
The shortcode inserted in the body of a post
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.
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. Continue reading
Even though other web design techniques have become more competitive with Adobe Flash for adding interactivity and animation, Flash still has many fans. Adapting a Flash form to work with ExpressDB is copy-and-paste simple.
The example below is nothing fancy, but it’s exactly the one included with this Flash forms tutorial, which covers the basics of how to set up a form in Flash that will post to a web address. The only customization we’ve made is to change the action URL for the form to one associated with our ExpressDB database. Try it!
As an alternative to web forms, you can publish interactive Adobe Acrobat PDFs that print neatly but still support online submissions. For example, you might want to enable employees to submit expense reports online but follow up with a printed paper copy.
Integrating PDF forms with ExpressDB is just as copy-and-paste simple as for web forms.
You create forms in Acrobat using the Form Wizard (also known as LifeCycle Designer). If you need help with the basics of creating a form in Acrobat, see this Adobe TV tutorial on Creating Basic Fillable Forms (Using Form Wizard).
Here, we have taken one of the form templates provided by Adobe, customizing it with our own logo. The Form Wizard lets us add a button that will allow users to print the form with the data they have filled in. We have added a new button, which will become our Submit Online button.
A boilerplate form
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. Continue reading