Registration Form Design Standards

ePly has established a set of best practices for online registration forms.

We are providing you this information to help ensure that your event is a success. Please feel free to contact us if you have any questions or comments.

 

Form Formatting

Always ensure that form formatting and layout is consistent on all browsers, Chome, Internet Explorer FireFox, Safari, etc.

Form Width - Usually a max width of 1000px, forms will automatically adjust to fit the screen they are being viewed on.

Event Name - Use a short but identifiable event name. This is how you will identify your form in a list in your account, each name must be unique.

Page Title in Browser - This shows up in the browser's title bar. The title should include the name of the event and the word "Registration". For example, "ABC Company 2009 Conference Registration". If the form will be used for repeat events, the page title should be kept generic so it doesn't need to be changed each time. For example, "ABC Company Event Registration".

Event Description – this should be different from the Event Name as it is an extra descriptor included in the credit card receipt. i.e. include the event location and date in the Description.

Form Background Colour - This is the area behind the fields. White is usually best as the form background, but if colour is used it should provide high contrast with text/images for maximum legibility.

Page Background Colour – This is the area outside of the form. If appropriate, match the page background to the event website or other promotional material for a consistent look and feel. If there is a background image or pattern on the event website this should be incorporated into the form. Avoid having a white page background when the there is no preferred colour. Use #F2F2F2 if no other colour preference.

Form Align – If applicable, match the form align to the website. If you are not designing to match a website, align centre.

Font Type – the default font is Verdana. Complicated, decorative or cursive (serif) fonts that reduce legibility should not be used.

Font Size – 10pt is the standard. Small fonts offer poor legibility while excessively large fonts lack a professional appearance and take up too much space.

Font Colour – Black is the standard font colour. If another colour is preferred, ensure that it has a high contrast with the background.

Do not use red text this is the default colour used for error messages. Use maroon as an alternative (#80,00,00).

Font Formatting – Limit the use of formatting (bold, underline, italics) as excessive formatting limits effect and legibility.

Use proper case do not not use all upper case.

Spelling – For words with variable US/British spelling, be sure to use the spelling that is correct for the country. i.e. cheque/check, centre, center

Punctuation – Use punctuation consistently. Avoid excessive punctuation.

Abbreviations – Use abbreviations consistently. If using acronyms, write out in full at least once if not all registrants may recognize the acronym.

Form Appearance – The form should not appear cluttered and should look welcoming and easy to use.

Spacing – All form elements (text and fields) should be consistently spaced and with enough white space to provide clear transitions and good legibility.

Alignment of Form Elements – Fields and text should be aligned consistently within a form group. If appropriate, alignment can change from one form group to the next but be consistent throughout the form.

Date Format – Write out dates rather than using a number format as it is more clear and there won’t be confusion between US and Canadian formatting (09/05/06 or 05/09/06).

Dollar Format – Format dollar amounts consistently and unless requested by the client include the cent i.e. $400.00.

Links – Link from meaningful text and not from “Click here”. “View the conference schedule” not “Click here to view the conference schedule.” See the article “Create Better Links to Get More Event Registrations” at www.eply.com under resources.

Email Addresses – write out email address so that the user can write down or copy and paste the email address. i.e. info@eply.com rather than Email.

Text Box and Drop-Down Width – The size should be appropriate for the required responses and sized consistently.

Wrapping Text – Text should wrap at a good point within a sentence. If it does not, force a wrap at a better point by using a </br>.

Header

Header Dimensions - The header should be as compact as possible so that it doesn't go below the fold, requiring the user to scroll to see the start of the registration details.

Image Dimensions - Large images take up valuable screen space and can distract the user from completing the form. If it is a banner image, typically size to a maximum of 1000 pixels wide by 200 pixels high.

Image Position - The form must look balanced and well designed.

Image Quality - Images must be crisp, the colours correct and any text legible.

Image File Size – Smaller files are better so that the form loads quickly. Try to make images less than 50kb.

Event Details – Pertinent event details such as title, date/time and location should be included, but avoid having too much text especially if the text already appears on your website or other marketing material.

Contact Information

We suggest putting the contact information section at the top of the form. This gets people started into the form before looking at fees or other options that may require more thought.

Required Field Notice – have a bit a of text just as " * Required" at the top so people know which fields are required.

Field Align – Contact information fields are right aligned.

Field Size – Use the width of 200.

Required Fields – Designate all required fields by an asterix * positioned to the left of the text without any space before the word.

Order of Fields – If a complete address is being collected (required for all forms with credit card payment), position the fields in the following order:
First Name
Last Name
Title (if requested)
Company (if requested)
Address
City
Province/State
Postal/Zip Code
Country
Phone
Fax
Email

Validation Messages

Punctuation – Use a period only and format all messages consistently.

Message content – Refer specifically to the required action. i.e. “Please indicate if you will attend the luncheon” rather than “The field is required.”

Validation Align – Use the default align position (Top) unless a different position is more appropriate for the layout.

Group Registration Section

Registration Group Width – The fields within a reg. group must fit within the form width. The first choice should always be to use the Tabular Single Row layout type, but switch to Multi-Row if there are too many fields to fit across the width of the form.

Multi-Row Background Colours: Use #F9F9F9 for the Regular Row background colour and #E0E0E0 for the Alternate Row background colour.

Remove Link –The “remove” text should be used unless there is limited space in a Single Row format in which case the remove icon can be used.

Form Footer Area

Questions Section – Always include the phone number and email address of the registrant’s contact person.

Cancellation Policy – A cancellation policy must be included if there are credit card transactions. Learn about writing good cancellation policies.

Do not use red text in the footer, it can get confused with the validation warning message that appears if there are errors when the form is submitted.

Thank-You Pages

Compact Header (this is the header used on the thank you page) – The branding should be consistent with the registration form but images such as sponsor logos and event details may not need to be repeated here.

Thank-you Message – Should clearly indicate that the registration was successfully submitted. Ensure that the message is appropriate for the payment type. i.e. “Thank you for your registration. You will receive a confirmation email and a receipt at the email address you submitted.”

Link to Website – Include a link back to the event or company’s website.

Confirmation Email

Email From Name – Use an actual name rather than an email address and choose a name that participants will recognize. (this could be an event or organization name if the planner prefers not to use a personal name)

Email From Address – Participants may reply to the confirmation email if they have questions, so the email should go to somebody who is prepared to respond.

Subject Line – Provide a descriptive but short subject line (50 characters or less). As two emails are received if there are payments, specify in the subject line that it is the confirmation. Avoid any words that are commonly blocked by spam filters such as:
Free
Guarantee
Leave, unsubscribe (or other list removal words)
Words in all capitals
Exclamation points

Links – Show links as a complete address so that registrants can copy and paste the URL into their browser if they are viewing their emails as text only.

What to include in the copy

A message saying that the registration has been received.
Time, date and location of the event.
Contact info of a person who can answer questions.

Field Naming

When choosing names for the fields on your form (not the labels) please consider the following:

There are two parts to a field, the label (the text that appears on the form) and the field name (the part that appears in the reporting). In some cases the lable and the name may be the same, but often the label will be a more descriptive version of the name.
Names should be as short as possible so that they don't take up too much space in the reports, are easy to refer to in logic and have less of a chance of wrapping in the confirmation emails.
Name must be unique.
Make names descriptive and meaningful so other users can easily identify the field and the data can be easily identified in reporting.

Good Examples

First Name
Email
Dietary Needs
Workshop Tuesday AM

Bad Examples

Name - needs to say if it is first or last
Please enter any special dietary needs - too long, this is the label, the field name should be much shorter such as "Special Needs"
Workshop - not descriptive enough. It could be okay if there was only one workshop to choose from but otherwise should have more specifics such as "Workshop 9am - 10am"

When you are naming fields for guest, be sure to prefix the name with Guest, for example "Guest First Name"
Make sure capitalization is consistent. In most cases you should use an upper case character for the first letter in each word.
All plain text request items must be named with the work "text" as a prefix. For example "Text - pricing" would be a plain text request item for the text on the form to do with price.
Be consistent - use names in a consistent format for each event.
Avoid punctuation in field names.

Request Detail Setup

There are a couple of important setup items to be aware of in regards to Request Details:

The Request Detail value should never have a regular single quote included. The single quote must be replace by a special code as identified here:
The Request Detail value should never have HTML in it. Often we use HTML in the caption of the Request Detail and that is ok. But it is important to remove the HTML from the Request Detail, otherwise system errors could occur when sometimes tries to register using those options.

Form Address (URL)

All URLs will start with www.eplyevents.com/

When choosing the text that follows the / keep the following items in mind:

Use all lower case.
Do not use spaces.
Do not use underscores. If you need to separate words use a dashes.
Do not use punctuation.
Keep short as possible but still be descriptive.
Must be unique in the entire ePly system.
Follow a pattern if there are multiple events, for example, /event-oct, /event-nov

Good examples

/cipma2008
/area08
/cancer-relay

Bad Examples

/register_now
/Alberta realestate conference
/conference

Fields Related to Meals or Other Options Where an Accurate Registration Count is Critical

Anytime when asking a question on a form such as "Will you attend the Friday dinner" the question needs to be set up as a yes/no radio button. This will ensure that when the event planner is looking at the reports the count will be accurate.

If a question like this is set up as a check box, it will work, but when the event planner is looking at the reports and sees that x number of people didn't check the box, they won't know if wasn't checked because the person registering isn't attending or because they didn't see the item on the form.

This is most critical when the item in question is included in the overall event fee, but should still be set up as a radio button even when there is an additional fee if the item is selected.

An exception to this can be made if the client requests a check box rather than a radio button and you have explained the possible consequences.