A good looking registration form creates a good first impression for your event registrants and makes you, the event planner, look professional. It will even help you get more registrations and reduce the calls and emails from confused registrants.

To create a good looking form you don’t need to hire a graphic designer and a CSS coder, but rather just follow a few basic design and layout rules. If you are using a professional online registration system, you should be able to easily implement all of our suggestions yourself.

Registration Form Design Rules

When you scan through a registration form, or for that matter, a webpage or other document, it appears neater and more professional if the spacing between elements is consistent.

The same rule also applies to spacing between fields and other elements on your form.

When you have a series of text boxes in a column, making them a consistent size is easier on the eye.

Here is an example of text boxes that are sized to the width of the
expected text; it’s hard for the eye to scan through.

Here are the same text boxes sized more consistently and it is much neater.

In some case it makes sense to vary the size of a text box in a series to more closely match the expected data, but if you do, try to limit the number of different sizes, or group the similarly sized fields together if it makes sense.

Each field type (text box, text area, radio button, drop down list and checkbox) generally has a specific purpose, but radio buttons and drop down list can often be used interchangeably.

Generally, drop down lists are better if you have a lot of options to choose from in a list so that the long list is tucked away until it’s clicked. Radio buttons can be better for short lists since you don’t have to click the field to see the available options.

That said, sometimes it looks better to use a drop down list for yes/no options if you already have a series of drop downs for other questions. Sticking with one field type can help prevent your form from looking cluttered, but you also need to consider the usability.

Pick one or two font styles and use them consistently. When you have too many font types, sizes and colours it adds to the cluttered look.

As an example you might want to have all of the field labels and text as Arial 10pt and headings as Arial 12 pt and bold.

If you look close you will see this example shows several fonts sizes and styles. Some people may not see the actual differences, but it will just not look quite right to them.

Paying attention to the small details will help to give your form an extra professional feel. For example, all dollar amounts on your form should be formatted in the same way, all with the currency symbol and/or cents or all without. ( $100.00, $100, etc.). The same applies for times and dates; use the am/pm or a.m./p.m. and include the year in the date or don’t. It’s a matter of personal preference, but be consistent with what you choose.

There are many options for positioning fields on a form, but we think that when you have a series of text boxes with short labels (like for collecting contact information), it’s best to have the boxes right aligned with the labels on the left.

Left aligned like this is too messy.

Right aligned like this is much neater.

When you are adding check boxes, drop downs and radio buttons, it’s often neatest to left align them and position the label on top of the field because the field labels and sizes will usually vary more on this part of a form.

Labels on the left make the form look messy.

Here are the same fields with labels on the top; much easier to use.

You also want to avoid text that wraps in a bad spot or leaves one hanging word. You can almost always adjust the width or the text to avoid this.

Yes, your logo is important and you want to make sure that registrants see the logos of your sponsors, but there is a point at which having an overly large logo wastes space, looks unprofessional and sends the message that you don’t know how to resize an image and didn’t want to ask for help.

Poor quality, over-sized logo.

Smaller, quality image looks better and takes up less space.

There are a lot of formatting options available: size, colour, style, position, etc, but it doesn’t mean that you have to use them all! Keep it simple and consistent and resist the urge to use a big font that is bolded, underlined and in italics. A good rule of thumb is to never use more than two fonts on a page.

Over bolding is another common issue. If you bold everything, the effect is diminished – it’s like not having anything bolded at all. See these bolding examples:

Too much bold text so nothing really stands out.

Bold titles only to draw attention to certain areas.

Finally, we suggest to avoid underlining text online, as this is reserved to indicate a link.

We always recommend matching the colour scheme of the registration form to the event website as closely as possible. There are several online tools available to help you capture the exact colour value – a particularly useful (free) tool is ColorZilla, available at http://www.colorzilla.com.

We hope you’re reading this article, but when it comes to reading something online, people generally skim it at best. For online forms, most people won’t read the text and just start filling in the fields.

Our recommendation is that you build your form in a way that makes it so that you don’t need to provide instructions and in a way that a mistake can’t be made. Not only will this result in a cleaner looking form but it will be easier to use and save you the time of writing out detailed instructions.

If you do need to have some text describing the option,s keep it short and use bullet points. If the same text is also on your website, just link to it from your registration form so that there is less text on the form and if you need to edit the text, it only needs to be changed in one place.

Here’s an example of how you can reduce the amount of text on your fields while at the same time make the questions easier to answer because there’s less reading.

An example where the users must read “Will you be attending the” for each option. This slows down the registration process and adds clutter to the screen.

Here the repeated text is removed to make it easier to read with less clutter.

Make sure that you have a reasonable and consistent amount of margin between the edge of your form and the text and fields on the form. Seeing text or fields touching the edge of a form is a sure sign of a rush job.

It looks unprofessional to have text touching the edge of the form.

Much neater now.

Another critical place for white space is around the submit button to make sure that it really stands out.

Here is a submit button buried in text.

Lots of nice white space here to help this critical button stand out.

Grouping your fields in a logical way with section dividers will make your form easy to scan through. Common groupings are contact information, registration options, group registration and session selection.

An easy way to make your form easier to complete is to hide fields that aren’t applicable to certain people. For example, if someone indicates that they are a member, hide all of the fields only applicable to non-members. Spend a few minutes setting up this type of logic and your event registrants will be impressed with how slick your form is.

A bad image will really stand out and lower the overall quality of your form. If you aren’t familiar with properly re-sizing images, cropping, pulling images from other websites, etc. ask for help or get someone to do it for you.

After you’ve taken care of the basics, you might want to fancy up your form a little more with some background gradients or other style to polish it up and make it have the same look and feel as your website or event marketing material.

If you are using the ePly system contact one of our experts to take care of this part for you for free.

Let us know if you have any comments or questions or if you have some other ideas for building good looking registration forms.

Good Looking Registration Forms Get Better Results

Good Looking Registration Forms Get Better Results

Be Consistent

Line Up Fields and Text

Don’t Supersize It

Don’t Over Format

Use of Colour

Use Less Text

Have a Comfortable Amount of White Space and Margin

Organize Fields Using Section Dividers

Use Built-in Logic To Hide Fields Until Needed

Use Quality Graphics

Get a Little Bit Fancy

Spacing

Field Widths

Field Types

Font Types, Colours and Sizes

Wording

Subscribe

Search

Categories

Recent Posts