Create Any Type of Form You Like on Your WordPress Site | WebReference

Create Any Type of Form You Like on Your WordPress Site

By Arpan Dhandhania


[next]

A few weeks ago, I was building a site for an author. WordPress covered all her requirements except for one: a page where visitors could write testimonials that would show up on the site. WordPress has tons of "form" plugins, but I couldn't find any that would allow me to republish the data from the forms on to the site. I was about to give up the hunt and write a plugin of my own when I came across one that does just that: Formidable!

Formidable

Formidable is a plugin that makes it dead simple to create almost any kind of form. You can drag and drop fields into your form and customize its looks with the in-place editor, and your form will be ready in no time. You don't even need to know what HTML and CSS mean to use this plugin.

When the form is ready and visitors have written in it, you can login as the admin and manage the registrations. Formidable can replace a multitude of other plugins that you use to display user-entered information such as testimonials, polls, surveys and contact forms (of course!).

Enough said. Now, let's use Formidable.

Setting Up Formidable

You install Formidable just like you would any other WordPress plugin. Log in to the admin panel and click to "Add New" Plugins. Search for "Formidable Forms" and then install and activate the plugin. When activated, you will find a new tab in the left column titled "Formidable."

Formidable comes in two versions: Formidable (which is free) and Formidable Pro (priced at US $35). When compared to Formidable Pro, Formidable is, understandably, a little restrictive. You can use only the basic fields, and every time a visitor submits the form, you will be emailed the filled-out form. It doesn't get stored in the database for you to review later or to display it on your site. If this restriction is acceptable to your task at hand, you don't need to upgrade.

The features that set Formidable Pro apart from its counterparts, such as conditionally showing certain fields and displaying the results on your site, make it definitely worth every penny. For the remainder of this article, I will explain the features assuming that you have purchased Formidable Pro.

To sign up for a Formidable Pro membership, you have to visit the signup page on their website. You have to choose a username and password for your account. After signing up, come back to the Admin panel, click on "Formidable Pro," and enter your username and password. After you save it and the page reloads, you will find that three new pages have come up under the Formidable section. You are now ready to build forms for your website.

Forms

To create a form, just click on "Create a Form." You can either use a template to create it or create a new form. When you buy Formidable Pro, you get three additional form templates. For the sake of this article, we will start with the Defect Report template. Choose that form from the drop down list and the page will reload to the form edit page.

The form is rather simple. It has a name and the form fields. The name is useful when you have many forms and you need to be able to identify them in the Admin panel.

On the right-hand side, you have all the types of fields. Under the Basic fields, you will find text boxes, text areas, radio buttons, checkboxes and drop-down menus -- pretty much all the fields that HTML supports. In the Pro Fields, you have the remaining HTML form fields such as file upload and hidden field and several other fields that provide validation for a specific type of data. For example, if the user enters letters in the telephone number field, it needs to be validated. You would use the Phone Number field in such cases (see Figure 1).

Figure 1: The Formidable Phone Number Field

To add a field to your form, simply drag the field and drop it between the fields that should come before and after it. Clicking on the label allows you to change the label, and you can easily set a few other settings such as whether or not the field is required or read-only and the default value by clicking on the icons beside the field. If you are not sure what each icon does, the legend of the icons is displayed under the "Key" tab in the right column (see Figure 2).

Figure 2: The Legend of the Formidable Icons

The field has a collapsed section called "Field Options." Expanding that allows you to set a few parameters for the field. The last option -- the "Hide this field unless the value of" field -- is what allows you to show this field conditionally (see Figure 3).

Figure 3: Formidable Field Options

At any point, you can delete a field by clicking on the trash icon or you can drag the fields to reorder them.

Below the form, you have a section titled "Advanced Form Options" where you can choose a few other parameters including who can submit the form. If you know HTML and want to change the markup of any of the fields, clicking on "Edit HTML" will bring up a box where you can change the markup for any of the fields. Under "Form Notification Options" you can choose who receives the response to the form (see Figure 4).

Figure 4: Formidable Advanced Form Options

Form Templates

Formidable Pro ships with four default templates and you can create custom templates. The advantage of creating a template is that you can reuse the template on other sites. Often, you will find that certain forms are common across several projects. You should create a template for those forms and then export and import them into the setups where you need to reuse them.

Form Entries

This is where you can view and edit entries that your visitors have submitted. If you have multiple forms on the site, you will have to choose the particular form and you will be able to see all entries for that form. When you view a response, you will find that Formidable also stores the IP address of the visitor as well as what browser and operating system that user is using. These pieces of information can help you analyze your visitors.


[next]