Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

Recently, I wanted to add a contact form to our Social Media Blog & Resource Center which is built on WordPress (v 2.8.4, as of this post). I tested out a number of plugins and finally settled on cforms, and I'm very pleased with it. The latest version is cformsII which the developer, Delicious Days, describes as " a powerful and feature rich form plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page."

I found this plugin to be quite easy to install and configure, and was impressed with all its features, especially the ability to add CAPTCHA or challenge questions to the form. It's very easy to add form fields of all kinds and there are many different styling options which are available with a click.

Because the form submission is handled via Ajax, you don't have to worry about SMTP server settings or anything. It's really pretty much plug 'n' play.

This article will guide you through installation and configuration of cformsII.

Installing cforms

Just download the cforms plugin and, as with most WordPress plugins, unzip it and upload it into your WordPress plugins directory.

Important: Because cforms appears to assume your WordPress installation is in the document root of your website, instead of in a subdirectory, I recommend that before activating the plugin, you FTP into your server to:

wp-content > plugins > cforms > js

and open the file "cforms.js" with your text editor and make sure that, on line 19, the following variable is correct:

var sajax_uri = '/wp-content/plugins/cforms/lib_ajax.php';

The above setting is correct if your blog is at the document root of your website. If your WordPress install is in a subdirectory, you need to modify this variable to:

var sajax_uri = '/name-of-subdirectory/wp-content/plugins/cforms/lib_ajax.php';

After making any modifications, save the file.

You can now activate the plugin via your admin panel, in "Plugins" - and you shouldn't get a warning about the path being incorrect.

Configuring cforms

Once the cformsII plugin is activated, you can now configure it.

In your admin panel you'll see, after the "Settings" link, a "cformsII" link:

Click this link to see the various options for configuring cformsII:

Form Settings

I recommend leaving the "Ajax enabled" checkbox checked.

Give your form a name (I recommend not having spaces in the name, so something like "ContactForm" or whatever). This name will be used when we insert the form into a WordPress page.

To change the Field Name (this name is what will be displayed on your form), just click in the gray box and change what's there to what you want.

To add a field, first select the position where it is to be added in the form, then click on the "** Add **" button.

You can then name the field and select what kind of field it is from the pulldown menu to the right of the Field Name.

As you can see from the above example, I added a CAPTCHA verification field.

To set which fields are required and how they function is a piece of cake:

cformII defaults are pretty much what you'll want here, but you can make any field required. The "e-mail" option is just for fields with email addresses and it verifies that the email address entered conforms to email syntax (name@domain.com or .net etc.).

The "auto-clear" option, if checked, will render the Field Name in the text-entry field and, when the user clicks into that field to enter their name, the Field Name text will disappear.

Under "Admin Email Message Options" you select who receives the email generated by the form submission, and who the form is from.

If you want the "From" to be the user's email address they entered, in the "From: email address" field, enter:  {Email}

The "Subject admin email" is the Subject line for the email you'll receive.

I unchecked "Enable HTML" as it made the email I received from the form submission a mess, with a bunch of code that didn't render properly. Your mileage may vary, but I thought, Who needs this?

The many other options in the "Form Settings" screen can pretty much be left alone, unless you want to redirect the user to a "success" or "thanks" page after they submit the form. The default is a success message showing up above the form after it's successfully sent. But you should review the various options to see what they are, as there are many powerful features in cformsII.

Global Settings
There are a number of options here, but the only one I worked with was the "CAPTCHA Image Settings" where you can set colors, how many characters are shown, etc.

Styling
Here you can pick from a number of options for how your form is rendered on your WordPress page.

You can audition the various styles by selecting a style from the pulldown list, then clicking "Select Style" - it will be rendered just to the right. I liked "minimal.css" the best. You can see our implementation on our Social Media Blog & Resource Center contact page.

To tweak the stylesheet for the style you have selected, click on "Styling" in the left cformsII navigation; click the "Basic CSS editor: [stylesheet-you-chose].css" and make edits. (Note: Back up the style sheet, which is located in "plugins > cforms > Styling > [stylesheet-you-chose].css" Click "Update Settings" when you're done. The permissions on the stylesheet must be set to 777 to make changes through the admin panel.

NOTE: On one client's blog, the CAPTCHA image and reset button wrapped below where the user enters the CAPTCHA characters. I had something to do with the theme for this WordPress blog, and I had to add the following CSS style to our theme style sheet (each theme's style sheet is located at: wp-content/themes/name-of-theme/ and is usually called "style.css" - best practices dictate adding modifications to this style sheet after the default styles):

ol.cf-ol li#li--5 { margin:0; padding:0; width:410px !important; }
img.captcha    { float:right !important;}
img.captcha-reset { float:right;}

Again, your mileage may vary, but I couldn't see why the CAPTCHA was wrapping. Drove me crazy! The above CSS did, however, fix the display.

Adding the cforms Form to a WordPress Page

Just create your page in WordPress. After whatever other text you want to display on the page, just add this bit:

<!--cforms name="name-of-form"-->

Change "name-of-form" to your form's name.

Once you've done this, test it out to see if it's working properly.