Good Form To Increase Conversions

Posted February 22nd, 2010 at 11:21 am | Updated: 2/22 at 12:31 pm


Entrance Barriers

If you had to guess at the largest entrance barrier for a website what would guess? Maybe there is a cost involved and its too high? The website design is bad? Its a complicated website and not enough instructions?

Sure the cost might be more than the market will bear. More than likely your just trying to get that initial contact, an email, newsletter sign-up, anything to get more information to a potential customer. Cost to the user, $0.00 and your still only getting a small percentage of visitors to take the next step, whatever that may be.

Is your site ugly? Maybe, an ugly site to one person is artwork to another. Do ugly sites get less use? Unless your making the visitors eyes bleed and not distracting them with flashing or scrolling text this is more than likely not the cause. Some would say Amazon is ugly or Gmail, certainly Craiglist isn’t the pinnacle of design. As long as the user can get around easily without getting a migraine this probably isn’t what is holding you back.

Maybe you just need more instructions because they get confused? Here is the truth, nobody is going to read your directions if its more than a couple sentences. You can use all caps bold flashing text to tell a user what to do and they will not read it if its too long. If you already have instructions and you think you need more detail your only making it worse.


Its all in the forms.

Well designed forms aren’t the end all metric of usability however I would argue its a majority. Its all in the little details. Here are some of the basics.

  • Are required fields clearly marked?
  • Are those fields really required? The longer the form the less likely it will get submitted
  • If a user puts in the wrong input is it immediately obvious what went wrong?
  • Did you erase the whole form on failure causing the user to start over?
  • Can a user easily fill out the form by just typing and tabbing to the next field?


An example of bad form.

The federal government uses a site called My Pay. This is by far the craziest process I have ever seen to fill out a form. Recently they asked all their user’s to change log in credentials and what a nightmare.

My Pay Log In

The first thing that happens when you try to login is it opens up a new window in full screen. So if you have a large monitor your now staring at 23″ of login form. Annoying, but not the end of the world.

The complete insanity is you can’t use the keyboard. You have to actually click on each character with a Virtual Keyboard. But lets take it one step further down the crazy path. The letters an numbers are generated in random locations with each attempt.

This is for “security” purposes. I wonder why banks don’t use this practice? There is a notice message up now. They’ve disabled right click function as well … nice.

To all myPay Customers

Although most users have established their new login credentials with no trouble, some users are calling the Central Customer Support Unit for assistance. As a result, customer support is experiencing high call volume, and many customers are waiting on hold longer than usual.

We apologize for any inconvenience this may cause. We are doing everything possible to remedy this situation.


Good Form

Mint has an example of a great sign-up form. As soon as the page loads the the cursor is focused on the first field so you can start typing right away. You can tab to the next field and you’ll notice the current field is clearly highlighted. Furthermore by clicking on the label it brings the field in focus. You can click anywhere after the check-box field and it will toggle the check-box. You can actually fill out the whole form without even touching your mouse.

Usability is increased by validating on the fly. Each time you go to the next field the form will check if you have a valid entry and display the error if there is one or simply OK if there isn’t.

Tags: ,
Posted in For The Client | No Comments »

Logging Emails Sent Through Wordpress

Posted February 13th, 2010 at 1:49 pm

Ever have the need to log emails from a contact form inside of of wordpress? Here’s my solution.

The Problem

The client uses the Contact Form 7 wordpress plugin for events, registrations and subscriptions. Up until this point all the emails needed to be cut and pasted manually into a master list for marketing or other action items.

Specific actions are taken with each contact form. Some are simply added to a master email list while others are used to send content through snail mail. The need for more forms over the next few months will be increasing. These forms are very time sensitive so the solution must be dynamic enough to preclude more than a few hours in turnaround.

The Solution

If resources were unlimited (time and budget) this would be a great place to implement pre-built CRM (customer relations mangment) system. There are plenty of open source and commercial applications that would work well.

The biggest limiting resource here is time. The client knows how use wordpress and the current site is already well established with content. So we’ll hack it.

Logging Emails

Logging outgoing emails from any type of contact form is essential. This could be as simple as storing them in a database or even writing to a flat file. Logging emails will help you pick up security issues as well as troubleshooting.

The solution is pretty simple. Every email sent out through wordpress uses the wp_mail() function, including forms through Contact 7. All we need to do is capture the $_POST variables when a call is made to wp_mail().

We can use the add_action() hook from wordpress to accomplish this.

A simple example

We’ll insert our hook in the functions.php page for the theme. For this example I’ll use a theme called custom.

wp-content/themes/custom/functions.php

We’ll create a function to capture the posts. This function won’t really do anything but you’ll get the point. Then we’ll hook the function into wp_mail().

function saveContact() {
    // all of our post variables are in the $contact array
    $contact = $_POST;

    // now would be a good time to clean and filter
    foreach( $contact as $key => $value ) {
        // trim it, escape ... it you know the drill
    }

    // insert into the database or save a flat file

}

// hook it
add_action( 'wp_mail', 'saveContact' );

Now anytime wordpress sends an email it will call our saveContact() function. This is fine to just capture the data but we want to do something with it. Keep in mind Contact 7 adds in some of its own post variables so you may want to pop those off before processing the data.

If you want to echo anything back to test this turn off your javascript otherwise Contact 7 will send an ajax call behind the scenes.

An advanced example (go cURL yourself)

Wordpress is great but I want to use a MVC framework to handle all of the the different actions. I want to know what form was sent and use the information to populate various tables. I use Kohana but any of the popular frameworks can handle this in the same way. The benefit here is I can use the framework’s built in cleaning and database helpers. We’ll use cURL to send the post variables to our controller.

I’ll send the data to a controller in public_html/example. So the domain www.mydomain.com has a standard wordpress install but we have a kohana controller living in www.mydomain.com/example. I’ll also send along the URI where the form originated. We’ll take care of all the data inside the framework. Clear as mud?

Wordpress by the way does not like putting this source code inside the post. You can check it out here.

For security you can make sure the cURL posts are only sent from your domain.

With permalinks enabled you can differentiate between forms posted from something like www.mydomain.com/contact and www.mydomain.com/contact/subscribe.

Tags: , ,
Posted in php | No Comments »

Kohana – My New Framework Of Choice

Posted February 3rd, 2010 at 10:14 am

kohana

I’ve been trying to come to a conclusion of what php framework to use on new projects. I finally took the plunge into Kohana and I’m loving it. Some of the other frameworks that made the short list.

  • Zoop – I like the command line, smarty, and PEAR integration.
  • CodeIgniter – Great documentation, huge community and heavily used.
  • TinyMVC – Stripped down version of CodeIgniter. Easy integration into smarty.
  • Zend – All the cool kids are doing it.

Like most developers I fought the extreme urge to do everything myself and reinvent the wheel. Although I could of expedited that decision. In the end choosing a well documented and community driven framework makes any application more valuable. It helps when other developers get involved and don’t have to guess what it is your doing. It sets the standard and hundreds or thousands of developers have contributed to that standard. In short it reduces the “WTF?” moments.

If I need a hand on a project or turn it over to someone else the next developer can pick up where I left off. Some of the features that sealed the deal for me.

  • Security – filters XSS by default. No configuration needed.
  • Large module/plugin library
  • Ajax integration and seperation is easy to work with.
  • Strict OOP

Development is very fast with Kohana. The more I dig into the more I’m enjoying it.

Tags: ,
Posted in php | No Comments »

« Older Entries