Imagine you’re a prospective member of your association: you’ve looked around at the site, liked what you’ve seen, and have decided to become a member. Now look at your membership registration form. Will it make joining easy, or will it turn people away? If you’re not sure, don’t worry! Here are some tips that will help you determine what works and what can be improved.

Accessibility

Good accessibility helps everyone! Here are some of the most basic accessibility checks:

1. Use visible labels. Placeholder text inside a field is a nice addition, but it’s not a replacement. It disappears on typing, which can make filling out the form difficult for users with cognitive disabilities. It can also be hard to review if a user wants to look it over before submitting.
2. Use the correct input types. For example, type="tel" should be used for a phone number field.This also helps with user experience, as it will ensure the correct keyboard pops up for potential mobile users.
3. Check form tab order for keyboard users. The elements should tab in the same order as they appear on the page, and have a visible focus state for each element so keyboard users know where they are on the form. Note that tab focus styling should be different from mouse hover styles.
4. Check color contrast. Good color contrast ensures people with low vision or other vision problems can easily use your form. A great tool to check this is the Colour Contrast Analyser. 
5. Use form elements correctly. For example, if you have a group of radio buttons or checkboxes, they should be wrapped in the fieldset element and contain a legend inside the fieldset to describe the group. These elements help people who use screen readers better understand your form. Mozilla’s MDN has a great roundup of input types. 

User experience

Forms often need to gather a lot of information, and it can be easy for a potential member to become overwhelmed and decide they’ll come back later (or not). Below are a few UX tips for reducing some of that cognitive overload:

1. Place fields in a single column. The Baymard Institute has a great article on why that’s a good idea. (TLDR: it prevents the eye from zig-zagging across the page, reducing the chance of missing fields.)
2. Check that form elements can be easily clicked or tapped. Having sufficient target area is especially important on phones or tablets.
3. Break long forms into sections. Don’t forget to include clear progress indicators.
4. Take advantage of autocomplete. The Baymard Institute has another great article on using fully automated address lookup to make address entry quicker and with fewer mistakes. If that’s unavailable, you might consider placing the zip code field before the city and state and allowing it to autopopulate the other fields.
5. Mark optional fields instead of using required asterisks.This helps to reduce visual clutter.
6. Provide immediate feedback on errors. No one wants to spend time filling out a form only to have to go back and hunt down what went wrong at the end.
7. Use specific and friendly error messages. They should be located near the field where they occur and easy to see. Red text along with a red outline around the field is often used to draw attention. To increase accessibility it’s also a good idea to use an error icon for color-blind users.

Performance

Speed matters! Be sure to check for:

1. Ensure quick form loading. If your form takes more than four seconds to load, there’s a good chance you’ll lose potential members.
2. Provide information on form submission. If the form doesn’t immediately submit, make sure there’s a message or loading animation so that users know the form’s status. People may leave the page if submitting the form takes too long or it seems like nothing is happening. It’s also a good idea to include next steps or what your new member can expect on the confirmation page.

Don’t let your forms turn away a potential member. Making sure they are accessible, provide a great user experience, and are highly performant will help you build and maintain your membership.