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.

Here is what that editing interface looks like before you have entered any content:

Static HTML editor

Note that there are actually two text boxes where you can add code.  You use the second one if you would like to put in a different block of content that will be shown to people who have clicked the “Like” button (essentially subscribing to your status updates). If you leave the second box blank, the same content is shown to both sets of visitors.

Many Facebook page owners use this to create a “reveal tab” — a tab that displays a message urging new users to Like the page. Once they have done so, you can display a second screen (perhaps containing special offers) to page fans only. One way to use this in combination with a form might be to first show a message people asking to Like the page and then display a form where people can put in their contact information to enter a contest (if you try a contest or sweepstakes, make sure you read Facebook’s promotion guidelines first).

For this example, we’re going to show the same contact form to everyone, so the form is filled in as shown below:

Sample Form

The Impact of Facebook “Secure Browsing”

One of the changes Facebook made this year was the introduction of “secure browsing,” where users can browse the entire site using an HTTPS connection (https://www.facebook.com rather than http://www.facebook.com). This is good for Facebook users, but it does complicate things a little for web developers.

In February, Facebook changed its developers platform to make HTML IFrames the standard technique for adding custom content to a tab on a Facebook business page. An IFrame is a way of embedding one web page within another. In our previous tutorial, we told you how to register content with Facebook so that it can be displayed within one of those IFrames. That means that you can plug one of your own web pages into the middle of a Facebook page.

Here comes the complication (immediately followed by the solution).

However, as more users convert to browsing in HTTPS mode, your custom content won’t be displayed correctly to those users unless you also provide an HTTPS version of the path to your content. For that to work, you must obtain an SSL security certificate for your domain and configure it on your server (or get your web host to do it for you). Maybe you already have that in place if you run an e-commerce site, but for other people this will be a bit of a speed bump.

This is what a visitor will see if they’re browsing in HTTPS mode and you have only provided an HTTP url.

The beauty of working with the Static HTML app is you avoid this whole issue. Providing HTTP and HTTPS versions of the app becomes somebody else’s problem. You just provide the HTML that should be served up from either version of the address.

Well, almost. As we were working on setting up the tab labeled Contact Demo 2 we did at one point see this error in Internet Explorer.

IE Mixed Content Error

In this case, Facebook is showing the tab content but Internet Explorer is still complaining that it has detected non-encrypted content on the page. To get rid of such glitches, just make sure that any references to external files included in your code — such as images, style sheets, or JavaScript — also point to HTTPS addresses. Once we made that change, the error went away.

Bottom line: the Static HTML technique is overall simpler, once again making ExpressDB the simplest way of adding a database form to Facebook.

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

In the WordPress blogging and content management system,  a shortcode is a placeholder for a bit of content that will be generated dynamically. Some WordPress plugins use shortcodes to let you insert a database report or a list of headlines from a web data feed. The ExpressDB Shortcode plugin takes the data fields you specify and creates the HTML for your form. Fields are rendered in the order text, textarea, and then checkboxes. The plugin provides some default styling, but web designers can also modify the styling to be applied by adding their own Cascading Style Sheets code.

The idea is to automate the creation of the form in much the same way ExpressDB automates the creation of an online database. ExpressDB is a product of Caspio, the cloud database company. ExpressDB offers a 14-day free trial. Once you create your account, ExpressDB provides a simple 2-step process for creating a database, which will then capture any data you post to it — without making you fuss with database configuration or database table design. You can also elect to receive an email notification whenever someone fills out your form.

The ExpressDB setup wizard generates an application key you use to connect your form to the service. If you were coding a form manually, you would take the entire <form> tag code and paste it into your HTML. With the ExpressDB Shortcode plugin, you copy just the action parameter and add it to the [expressdb] shortcode as shown above.

Copy the form action attribute from ExpressDB

Why use ExpressDB with WordPress? There are plenty of other WordPress plugins for contact forms and other types of forms. Some just send you an email notification, while others log the form submission to same database that powers your WordPress blog. But as a cloud database service, ExpressDB offers some key advantages:

• ExpressDB is simpler than any other web forms and data capture solution you will find.
• The ExpressDB service is operated by Caspio in professionally run Internet data centers. Because online database services are Caspio’s sole focus, the service is highly reliable, maintaining over 99.99% uptime for the past 5+ years.
• ExpressDB is scalable, running on a load-balanced cluster of database servers. If you are running a small business website, you may have your own server (but probably only one). If you went with low-cost hosting, you are more likely to be sharing a server with dozens of other websites. If you are lucky enough to generate a large response to a marketing offer, you can be confident that ExpressDB will log all the customer inquiries, whereas a form that posts to your own server could easily overload the database.
• If you need more sophisticate online database services, you can graduate to Caspio Bridge, which provides visual web-based tools for creating databases, forms, reports, charts, graphs, and other interactive database apps.

Download the ExpressDB Shortcode plugin now and let us know the great things you do with it.

Bonus: when used in combination with the Facebook Tab Manager plugin, the ExpressDB Shortcode provides yet another way of adding data capture forms to Facebook (see also: The Simplest Way to Add a Customer Contact Form or Sales Lead Capture Form to Facebook).

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.

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 blog.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.

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.

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.

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!

If you were doing this for real, you would most likely want to take advantage of some of the more interactive features of Flash, such as drag-and-drop selection of options, that go beyond what you could easily do with HTML and JavaScript. As long as the data to be submitted can be reduced to a standard web form post, it will work with ExpressDB.

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

Open the Object tab in the form designer, and change the label text. For Control Type, we want Submit.

Button Properties

When you change Control Type, a new tab will appear labeled Submit.

For the post URL, we create our ExpressDB database as usual and copy just the web address, which includes the activation key for the database. If users will be submitting sensitive data, such as social security numbers, simply check the box to enable SSL encryption.

Copy Activation Key

You will paste the ExpressDB address into the Submit to URL field. Make sure the Submit As field is set to URL-encoded Data (HTTP Post).

Add the Submit parameters

Save the PDF. You now have an interactive PDF form you can send by email or post online. Note that for best results, the form should be viewed with a recent release of the Adobe’s Acrobat or Acrobat Reader. Other PDF viewers, such as the one built into Google’s Chrome browser, may not handle interactive forms properly.

You can try it here: Employment Application Demo (PDF)

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 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.