Those of you familiar with the UA WordPress Theme have probably seen the contact form shortcode. It’s a basic contact form with a couple of customizations. For most people looking to add a contact form to a web page, the shortcode does the job. However, when you want a custom form things can get more complicated. I have recently built a new plugin that I hope will make things a bit simpler.
Visual Form Builder is a free WordPress plugin that lets you dynamically build forms using a simple interface. Every form includes jQuery validation and a basic logic verification system as well as entry tracking.
A simple script
This plugin started out not as a plugin, but as a relatively simple PHP script that programmatically output the appropriate form code based on what fields and requirements I needed. This first attempt wasn’t a failure by any means, but it did use some convoluted methods to construct the form. If I had stopped here, I could have used the tool for a while and been happy with it because it was significantly faster than manually building a form.
The problem with this script was that it was something that really only I would be able to use and my goal was to create something that my co-workers at Web Communications and perhaps others within the UA web community could use.
With that in mind, I decided to turn the script into a form builder plugin for WordPress.
Building a form builder
- Use WordPress HTML/CSS for the admin panel to reduce design maintenance and present familiarity to the user.
- Make it easy to add form fields.
- Include support for fieldsets.
- Order form fields using a drag-and-drop interface.
- Use jQuery Form Validation to validate clientside.
- Don’t use a CAPTCHA system for anit-SPAM verification.
- Log all form submissions in the database.
- Export entries to a CSV.
With these features in mind, I began coding. Not all of these features made it into the first version, but they are there now.
Certainly there are some other form builder plugins available for WordPress, including some commercial tools that offer a wide range of features. The idea behind Visual Form Builder was to provide a quality, free alternative to the UA web community (or anyone else who finds it useful).
How do I use Visual Form Builder?
I’ve tried to make it as easy as possible to add and customize a form and have even added some help text to the contextual help tab at the top of the plugin page. Here’s a quick primer on creating your first form.
- After downloading, installing, and activating the plugin, go to Settings→Visual Form Builder.
- Click on the + tab, give your form a name and click Create Form.
- Click the form fields from the box on the left called Form Items to add it to your form.
- Edit the information for each form field by clicking on the down arrow.
- Drag and drop the elements to put them in order.
- Customize the Email Details and Confirmation
- Click Save Form to save your changes.
- Copy the shortcode from the box on the left called Form Output
- Paste into any Post or Page and save your changes
If you have other questions, you can check the FAQ or leave me a comment.
Download it now and let me know if you have any suggestions, bug reports, or feedback.