How to Build Web Forms the Right Way
You may have heard that we believe web forms are the best way to manage online contact, so let’s talk about how to plan for and build them.
Before you start, consider your audience(s).
If your site isn’t that deep—say three pages or less—it may be that a simple contact form is all you need. Sometimes, straightforward is the right answer.
On the other hand, if you have a content-rich site with multiple audiences, consider deploying more than one form.
An excellent case for separate forms is a conference website. We work with NCSC every year to build websites for their recurring conferences, eCourts and CTC. A few broader audiences have dedicated pages: Attendees, exhibitors, and sponsors, and some niche audiences: speakers and scholarship applicants. While attendees are directed to use a general contact form, the rest get their own unique, on-page forms with content tailored to facilitating contracts, getting help with resources, applying for an award, etc.
Besides conferences, other cases include businesses with distinct or complex services. No matter your industry or line of work, building audience-specific forms prevents users from getting distracted or frustrated with form questions that don’t apply to their inquiry. It also ensures that you’re getting the information you need for a productive conversation—a convenience for you and your audience alike.
Tailor content to keep it succinct.
No one wants an unruly form! Here are three ways to keep them in line.
Make a list, check it twice.
Before you build the form, start by making a list of what you need to know. Get the basics, such as name, email address, phone number, and maybe a mailing address. Then, think about what else might lead to a fruitful dialogue. Do you need a paragraph box to collect questions or concerns? Do you need more complex information for an estimate or contract? Keep in mind this is likely a first point of contact—focus on the essentials and collect just enough detail to get the conversation started.
Be clear and concise—with personality.
Be brief since you have limited time to keep your guest focused. The form wording doesn’t need to be robotic, though. Consider brand voice when writing form labels and descriptions. You can be as professional or cheeky as you like—a consistent, personalized tone helps with form completion.
Don’t forget a newsletter checkbox at the end!
Signing up for email on a contact form is a simple convenience. Even if you aren’t set up for email marketing, this optional addition will help build your contact list over time.
Use visual styles to polish user experience.
Default form styles often do a disservice to your brand identity and sometimes even look outdated. There’s a simple way to fix it: Make sure you’ve applied colors and fonts to match form styles to the overall look of the site. It’s a simple way to show visitors you care about the details..
To add on to that, we highly recommend placeholder text in form fields. A field labeled “Your Message” with an empty box that follows provides users with no guidance. Placeholder text is part of the form walkthrough experience for users: it can provide helpful content instructions, or simply to add a friendly tone in your brand voice, like “Let us know how we can help,” or “Is there anything else we should know about your request?” and so on.
Form settings need customization, too.
Form settings cover everything from confirmations and notifications to data storage and more. Do not skip this step!
Confirmations
A confirmation message is what the user sees immediately after sending their form entry. It doesn’t have to be complex. Thank users for their message and let them know how long they can expect to wait for a reply. Limiting the turnaround time to a short window, like 2–3 business days, if you can.
Notifications
There are typically two types of notifications to develop, though there can be more if you need them.
The admin notification is what you receive once a user sends a form. We like to include a full copy of the form entry, plus any attachments. Typically, you can set the admin notification to go to one or more email addresses on your team.
The user notification is what users receive after they send the form. This is an extension of the initial on-page confirmation message. Repeat your confirmation message and include a full copy of the form entry for their records.
From and Reply-To Addresses
When you or the user receive form notifications to your email inbox, you’ll often see it’s from an email address like “no-reply@yoursite.com.” Whatever you choose, using an email address matching the form’s website domain is ideal.
To make sure that your email notifications reach inboxes from WordPress websites, we recommend configuring them to send mail through an authenticated SMTP server. HALO 22 can help set up your email to ensure it won't get waylaid in spam filters! Drop us a line if you’ve struggled with notification delivery issues.
Pro-Tip: Make sure the reply-to address is monitored.
For our WordPress clients, Gravity Forms provides excellent documentation on form notifications, deliverability, and more. For hosted platforms, Squarespace is hard to beat, and while their form options are a bit more limited, they can still serve you well.
Security Settings
Start simple, and add on as needed. Make sure whatever you use is fast and user-friendly. Learn more about the benefits of security settings in our other article.
Last, but definitely not least: Test it.
This one is key! Before the form goes live, view it from the front end to make sure users see what you expect them to see. Test it—enter some dummy information and send it to check the process and make sure it’s working as planned. Do the styles look right? Do you see your custom confirmation message? Did you get the expected notifications? Now’s the time to look for errors and troubleshoot before you make it available to your visitors.
Forms can be as simple or complex as you need. Looking for help creating or improving the forms on your site? Let us know how we can help.
