Categories
Web Development

How to Create a Facebook Contact Form Using ExpressDB

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 do things like fill out a contact form without being redirected to another website. ExpressDB provides a simple way of accomplishing this.

Note: I came up with this demo app as part of my work with Caspio, the maker of ExpressDB.

ExpressDB is a service of Caspio Inc. that will record the input from any web form with zero database configuration. Just point your form at the ExpressDB service, and you’re done.

To put a form on Facebook, you start by preparing 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.

Now 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. Type in a name for your App, agree to the terms of service, and click Create App.

You now need to add your domain and the address of your web page in a couple of different spots. Facebook expects you to append a query string to the end of the web address, and here we’ve just added ?facebook after our HTML filename. For the domain, you should fill in just the root address without the http part (“www.demo.com” in this example).

Step 1

On the Canvas page, enter the 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/

Step 2

Once you have saved these settings, you should be able to navigate to the app page address you established and see your form. Note that there is room in this example to add more branding and promotional copy along with the form. You can also use this web address as the landing page for Facebook advertisements, targeted by interests, affiliations, demographics, and geography.

Your form on Facebook

When a user submits the form, ExpressDB will display either the default confirmation page shown below or a custom confirmation page, if you’ve configured one within ExpressDB.

The ExpressDB confirmation page on Facebook

Learn more at www.expressdb.com. 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.

Categories
Web Development WordPress

Caspio Deploy2 Plugin Published

A new WordPress plugin for integration with the Caspio online database is now available at:

http://wordpress.org/extend/plugins/caspio-deploy2/

I reviewed the previous plugin the company had published and was able to recommend a better way of implementing it, using WordPress shortcodes. Here’s a summary:

Caspio is an online database featuring web-based tools for designing database tables, forms, reports, charts and graphs, and more complicated applications like store locators with Google Maps mashups. Applications can be created without programming, and embedding them in your website is as easy as copying and pasting a code snippet.

The Caspio Deploy2 plugin enables ShortCode placeholders that further streamline the deployment of Caspio applications. The shortcodes can be used for SEO deployment of content, as well as embedding the AJAX widget used to display Caspio forms. Caspio Deploy2 replaces the earlier Caspio Deployment Control plugin (which did not use shortcodes).

The [caspio] shortcode can be wrapped around the standard block of code generated by Caspio Bridge for SEO Deployment. You should toggle from the Visual to HTML mode of the WordPress editor before pasting in the block of code, but it will work even if you paste the code into the Visual editor.

Example:
[caspio]
<!– Begin Caspio Deploy Code (for inserting in body) –>
<?php require_once(‘http://b4.caspio.com/scripts/dpload.txt’);dpload(‘http://b4.caspio.com/’,’5F422000c3f2d8h4d3c9f4b9g9e0′,’l’);?>
<!– End Caspio Deploy Code –>
[/caspio]
Alternatively, you can cut out everything except the parameters for the dpload function (make sure to include the quotes around each parameter):

[caspio]
‘http://b4.caspio.com/’,’5F422000c3f2d8h4d3c9f4b9g9e0′,’l’
[/caspio]
Or the parameters from the dpload function can be embedded in the shortcode tag as follows:
[caspio url=”http://b4.caspio.com/” key=”5F422000c3f2d8h4d3c9f4b9g9e0″ style=”l”]
For Caspio application deployment in embedded mode, you can use this shortcode placeholder which will be replaced at runtime with the standard Caspio JavaScript widget. This lets you avoid having the JavaScript code scrambled by the WordPress editor in Visual mode.
[caspio embed=”https://b4.caspio.com” key=”5F422000i9f9a0h4e2i7c9g6c9c3″]
In order to deploy Caspio Bridge SEO DataPage in WordPress, you must have:

  • Caspio Bridge account with activated SEO deployment and properly configured DataPage
  • Installed and activated the Caspio Deploy2 plugin for WordPress.

For information about Caspio Bridge see the Caspio official site at http://www.caspio.com

Categories
Web Development

Testing Caspio App

I’m doing some experiments with the Caspio.com web-based database app builder (where you build the app itself through a web-based interface).

This is a demo app that was already loaded into my trial account that I made a few small tweaks to. Once you have designed your app in the web-based tool, you grab a few lines of JavaScript code and plug the app into your web page sort of like the way you would add a YouTube video.

Online Database by Caspio

Click here to load this Caspio Online Database.