Review and Overview of Forms 2.0 by DevDemon

by Brett Bearce

Creating and managing website forms is tricky at best and downright painful at worst. Several years ago when I jumped into ExpressionEngine development, I had become spoiled from years of using Wufoo, but in this particular project, Wufoo was no longer an option.

At the time, I found only one add-on for EE forms management, but it didn’t have Wufoo’s familiar drag-and-drop interface and ease-of use I sought.

Several years later, enter DevDemon’s Forms 2.0 touting:

• A drag-and-drop interface for creating forms,
• Strong email notification features,
• Managing form entries within the EE control panel, and
• Ease of integrating those custom-made forms into EE templates.

My curiosity was piqued, but I needed to get under the hood and give it a solid test. So here we go.

Of the 20 claimed product features on DevDemon’s website, I’ll be testing 16. At the time of publication of this review I’m running ExpressionEngine 2.4.

Installation

Once I downloaded and then FTP’d the add-on to my server, the installation was very fast, probably even quicker than DevDemon’s “two minute installation” assertion.

The installation process is typical of all EE add-ons: using FTP, copy the add-on into the third_party directories in both the system and the themes directories. Once that’s done, a quick click of an “Install” link in the CP and you’re done.

DevDemon makes the add-on available on both their website and on devot-ee.com?.

Uninstalling was also very fast. A single click from the Add-Ons > Modules screen removed the Forms module and data from the CP, but left the fieldtype listed as “Uninstalled.”

User Interface

The user interface is clean, simple and pleasing to the eye. Icons are used to help visually describe text. Tabular data is presented in well-padded, sortable tables. Form entry fields are divided into field groups when necessary.

I was surprised to see, though, a speckle beige background used throughout the add-on. It does not mesh well with the overall CP UI color and design scheme.

Using the Product

The add-on addresses the four major areas of form building and maintenance:

• Building a form
• Viewing and managing form submissions
• Creating email templates for notification to both you and the user submitting the form
• Integrating forms into your website

It also includes a unique feature called “lists.” Lists are predefined groupings of data than can be easily integrated into forms as you build them. For example, one of them is a list of all the U.S. states; another example is days of the week. The pre-installed lists that come with the add-on can be edited and customized and new lists can be created.

Building a Form

Creating a form is very simple, elegantly executed and very familiar if you’ve used Wufoo or Gravity Forms for WordPress. The form elements are listed in three categories on left side of the screen in a floating palette: Form Tools, Power Tools and List Tools. The area on the right is for building the form.

The Form Tools palette include the basic form elements like:

• check boxes,
• email address field,
• file upload field,
• a field to enter HTML,
• multi select,
• page break,
• radio buttons,
• drop down menu,
• text input and
• text area.

The Power Tools include advanced fields for name, address, phone, date and time. Also included here is DevDemon’s Mailing List form field that connects to both Campaign Monitor and MailChimp. This connection allows an email address to be added to a list you specify.

For MailChimp, creating the connection is easy. Grab your API key from your MailChimp admin, paste it into the MailChimp field in the DevDemon’s settings and when adding the Mailing List field to a form, choose from the lists you’ve established in MailChimp. While I’m not familiar with Campaign Monitor, I suspect the integration is just as easy.

The Form Builder and Customizing Form Elements

To add a field to your form, either click or click-and-drag on a particular form field in the palette. Once the field is in the form builder area, it can moved around to change the field order by clicking-and-dragging and be customized using its own settings. The Form Tools palette scrolls down the screen automatically as more field fields are added.

Setting the form label, the form field short name, a description and whether the field is required or not are common across all the field types. For checkboxes and radio buttons, you can either add individual options or add predefined options in bulk. The bulk add function is very well executed as you can either choose from a one of the pre-existing lists or paste your own list in a large text area.

Form fields from the Power Tools include additional settings relevant to each field like allowing a prefix and suffix to the Name field or removing the country drop-down from the address field. Currently, Forms does not support conditionals, though according to a forum thread, support is now on a list of feature requests.

Form Settings and Submissions

Next to the “Form Builder” tab are two other tabs to complete the form creation process: Submission Alerts and Advanced Settings. Submission Alerts provides options to notify either (or both) the EE admins and the users either a predefined email template, a custom template (created right in this screen) or not at all.

Advanced Settings is where users give the form its name, short name (to use in template code), apply certain restrictions like limiting the form to a certain membership group (clever!) or limiting the form to a specific date range, and also set what happens once the form is submitted.’

Viewing and Managing Form Submissions

The form submissions panel is well designed with multiple filter options on the left side of the screen and a paginated list of all form submissions on the right side of the screen.

The filters include filtering by form or by a selection of forms, filtering by date and filtering by country.

The form submissions are organized into a table sorted by an ID number assigned when the form is submitted. The table lists that ID number, the member’s name (or “Guest” if the submission is not done by a member), the date, country, IP Address and the form submitted. While I don’t find the ID column and member column particularly useful, nor do I find clicking on the ID number to see the entry easy, I do see value in the date submitted, IP Address and form columns.

Clicking on the ID number brings up the detailed submission in a light box, which I also find not very usable. Clicking on the form brings up a screen showing all submissions for that form, the ability to export to CSV or Excel and the ability to show and hide form fields in the table containing submissions. This form detail page is both incredibly powerful and incredibly useful, but I almost missed it as I thought clicking on the form name would take me to the form editor.

I much prefer the method Gravity Forms (a form-making plugin for WordPress) uses for showing form submissions. The submissions are grouped by form and the forms are alphabetized. The first series of entries displays from the form whose title is closest to the letter “a.” Each entry can be viewed in its own detail screen, deleted or marked as spam. And a drop-down menu within the form submissions screen allows users to navigate between forms to see those form-specific entries.

Creating Email Templates for Notifications

Forms’ notifications function is robust. Not only is the submitted form content saved in the EE database, it can also be emailed to both website administrators and to the user that submitted the form.

Forms has an entire section dedicated to creating and storing custom notification email templates for both admins and users. The emails can be either plain text or HTML, can send attachments and can have form data included in the message template.

Notification templates can also be created and saved within each specific form.

Integrating Forms Into Your Website

Integrating a form onto your website is pretty easy. Initially I had to refer to the Forms documentation, but once I knew the basic tag and parameters, it was easy.

The basic tag is:

Forms outputs standards-compliant HTML, although I think I’d use an unordered list for my form elements rather than div tags.

Similar Products

DevDemon Forms’ competition is currently limited to MetaSushi’s ProForm and Solspace’s Freeform.

(Ed: We have a review article in the works for MetaSushi’s ProForm. Stay tuned for that.)

Documentation and Tech Support

With the exception of the help bubbles, some of which are empty, the documentation for creating forms is nonexistent. The documentation for integrating forms into templates is nicely done and familiar, mirroring the look, feel and structure of the ExpressionEngine User Guide. This documentation makes it easy and quick to add and customize a form into a template.

DevDemon provides support forums for each of its products, to which I referred each time I ran into trouble or was confused about a feature. Many of my questions remained unanswered, so I emailed DevDemon.

I received an automated response quickly and a personal response email very shortly thereafter. While I did not use the DevDemon forums, I’m glad they are there as any support questions submitted there will have answers for any other user of DevDemon products.

Licensing

No demo or trial versions; no return policy listed on website. A license costs $55 USD.

Requirements

ExpressionEngine 2.3.1 or newer (as of publication)

Conclusion

Overall, this is a solid, well-built, easy to use product. It is a steal at $55 USD. DevDemon took the complex process of building a form, creating email templates to notify both users and admins, integrating the forms into a website and viewing and managing form submissions and created a fantastic product.

I would love to see:

• the HTML output include tabindex,
• deeper Mailchimp integration (including choosing list segments and importing more than just email addresses),
• support for conditionals in forms,
• the ability to import and export forms, and
• a more user-friendly form submission area.

While I have a wish list for the product, it is just that, a wish list. Forms 2.0 is a solid, capable EE add-on that can and will handle the creation, notification and management of your website’s forms.