WordPress: Add powerful and stylish forms with cformsII
Forms are an integral component of the website communication process. In their most basic form, they are the next step up from an email address. Yet they also have the power to become a great tool for data gathering and beyond.
cformsII is a WordPress plug-in that takes the hard work out of creating custom forms, while retaining plenty of power. The plug-in starts with a default form that contains all the fields found in a typical form. This gives the user a platform to work with and build on if desired. Adding new fields, naming fields, rearranging fields and changing field type are all basic actions and extremely easy to implement. All the standard field types are at a user’s fingertips and the option to add custom messages, style and enable database tracking are just a few of the extras that cformsII has to offer.
tools | tech | trends: WordPress, cformsII plug-in
expert: Steven Jenkins
download: cformsII plugin
Originally appeared in Web Designer Issue 177
01 Download and install
The first step is to download and install the cformsII WordPress plug-in. Head to www.deliciousdays.com/cforms-plugin and click the big, impossible-to-miss Download button and save to the desktop or preferred location. Now log in to WordPress and head to Plugins>Add New, select Upload, click Browse and locate the plug-in. Now click Install Now and Activate plug-in.
02 Your default form
Once installed and activated, the cformsII menu appears in a bespoke menu to the left. Click to open. This will present a default form, under the Form Name section. By default, this is given the name Your default form and a selection of pre-defined fields. To change the name of the default form, simply type in a new name and click Update Settings under Admin Actions.
03 Rename and remove
By default, a fieldset is included. This encompasses the fields and has the option of including a name. To rename the fieldset simply type in a new field name, ie Contact Form, and press Update Settings. Alternatively, to remove the fieldset altogether, click the related red button. The same principle applies to the remaining fields.
04 Set default values
By default, when associated with the Single/multiple line of text type, the filed name includes the label and default value to appear in the field box. For example, ‘Name|Your name’ sets Name as the label and Your name and the default value. To modify simply edit the Field Name, ie ‘Name|Please’ and add your full name.
05 Add and rearrange
To add a new field to the current form, simply click Add. This will add one new field in position 1 (top of the form). To add multiple fields, simply change the 1 (next to Add) to the appropriate number. Change the position to suit the position to the new field or fields that will be inserted, ie, 2, and Update Settings.
06 Change type
When adding a new field, the type is set to Single line of text. To change to multiple lines of text, use the associated drop-down list and select. To convert a field from a standard text field to a drop-down list, first select Select Box from the appropriate drop list.
07 Set status
Once all the fields have been added, the final step to complete the form is to set their status. If a field needs to be completed, the required check box next to the field needs to be ticked. If the email address is compulsory, click the email check box. Auto-clear automatically clears the default value when the field is clicked.
By default, cforms has a selection of messages, labels and text already in place. To modify to suit first expand the Messages, Text and Button Label section. Change the text in the appropriate boxes to the custom text and remove/modify any of the suggested options, ie, Show messages, then hit Update Settings when you’re finished.
09 New form
First open the Admin Actions menu and click Add new form. This will add a new form with a default set of fields as demonstrated in step 2. Rename and customise as shown in previous steps, and click Update Settings to save. The Navigate to drop-down list will now include the new form and a new button, named 2, will appear.
10 Start styling
Head to the cforms menu and select Styling. By default the ‘cforms.css’ is selected, including a preview. To view an alternative style, select an option from the drop-down list and press Select Style. This will offer a simple preview using the default fields. This will also apply the style to all the forms currently available.
11 Basic CSS editor
For greater control over the style of the selected form, a CSS editor is included. Expand Basic CSS editor to view the current CSS. A decent knowledge of CSS is essential and any changes can only be viewed via a page with an active form. To modify the form, adjust the CSS and press Update Settings.
12 Keep track
One of the core reasons for adding a form is to receive information from the sender. To keep a track of form submissions, database tracking needs to be enabled. Click Global Settings and expand Database Input Tracking. Click the Enable Database Tracking check box and click Update Settings to save.
13 Track users
A new menu item will appear under the cformsII heading, named ‘Tracking’. Click the link which, by default, will display all form submissions after the database tracking was activated. To view more details of a record, select a record or use Ctrl+click to select multiple records and click View records. The individual records will appear under form submissions.
14 Form details
Each record of a form submission contains a host of information. There is the form name, the form ID, time and date submitted, from which page the form was submitted, an IP address and the complete fields. Click the IP address to view the sender’s approximate location. To close or delete, click the appropriate icon top-right.
15 In action
With a form complete, the next stage is to add to a page or post. Open an existing page/post or create a new one specifically for a form. A cforms button will now exist in the standard toolbar. Simply click the button, select the appropriate from and press Insert to add. Alternatively use the shortcode, ie, <!–cforms–>, to add the latest form, or add a name for a specific form, ie, <!–cforms name=”Standard contact “–>.