This is a prototype of an unfinished plugin to promote ExpressDB, a simple and inexpensive data capture service offered by Caspio Inc., the cloud database company.
ExpressDB is popular with web designers who aren’t necessarily database or programming experts. It lets you concentrate on designing the form and mapping out the fields of data you want to record. The online service takes care of actually catching the form post, recording whatever data it contains, and optionally sending you an email notification.
For WordPress users, it occurred to me that it would be nice if you could use a shortcode — a placeholder in your post or page content — to specify the form fields, rather than manually coding an HTML form. The plugin would provide some default formatting, but you could modify it within limits. I’m interested in feedback on whether this approach makes sense.
Here is what I have so far:
You list the fields of data you want to collect as parameters within the shortcode tag. For the action tag, you go through a brain-dead simple two or three step process to register a database on ExpressDB, and the service assigns a coded action tag that you can copy and paste, as shown below.
I have some other ideas for letting people modify the form styling that I’m still tinkering with. For a lot of people, this could be a really easy way of creating a contact form event registration form.
Update: Getting read to release this, and I’ve added a Settings Screen that lets you set the default styles to be applied to your forms.
The HTML output for a typical form looks like this:
<form name="expressdb" class="expressdb" method="post" action="http://www.expressdb.com/edp/?AppKey=420CEF8044F20484E049B6213F9BCCXXX" enctype="multipart/form-data"> <table> <tr> <td colspan="2" class="labelcell"><label for="First_Name">First Name</label></td> <td colspan="2" class="fieldcell"> <input class="text" type="text" name="First_Name" id="First_Name" tabindex="1" /></td> </tr> <tr> <td colspan="2" class="labelcell"><label for="Last_Name">Last Name</label></td> <td colspan="2" class="fieldcell"> <input class="text" type="text" name="Last_Name" id="Last_Name" tabindex="2" /></td> </tr> <tr> <td colspan="2" class="labelcell"><label for="Note">Note</label></td> <td colspan="2" class="fieldcell"><textarea name="Note" id="Note" tabindex="3" ></textarea></td> </tr> <tr> <td colspan="2" class="labelcell"><label>Options</label></td><td colspan="2" class="fieldcell"> <input type="checkbox" name="Option_1" id="Option_1" tabindex="4" /> <label>Option 1</label></p> <input type="checkbox" name="Option_2" id="Option_2" tabindex="5" /> <label>Option 2</label></td> </tr> <tr> <td colspan="4"><button id="expdbsubmit" type="submit" tabindex="6" />Submit</button></td> </tr> </table> </form>
You can modify the default styles to be applied to selectors like form.expressdb input through the settings screen. Or you can add tweaks on a one-off basis by including a little bit of code as an enclosure within the shortcode like this
[expressdb textarea=”Note”]button.expdbsubmit {color: red}[/expressdb]