A contact form is often one of the most important parts of a small business website. It gives prospective customers a way to request a quotation, ask a question, book a consultation or explain what they need.
Yet forms can easily become an obstacle. A visitor may not understand what a field means, struggle to complete the form on a phone, encounter an error without knowing how to correct it, or submit an enquiry that never reaches the business.
These problems can affect any business, whether it serves customers in Maboloka, Soshanguve, Centurion or further afield.
An effective contact form should make the next step clear, require only necessary information and help people complete the task without unnecessary friction.
Accessibility is an important part of that goal. The World Wide Web Consortium's Web Accessibility Initiative explains how clear labels, appropriate instructions, meaningful validation and helpful notifications make forms easier to use for people with different abilities and assistive technologies.
Its Forms Tutorial provides practical guidance for developers and content teams.
This article turns that guidance into a checklist for planning, building and testing a business website's enquiry forms.
1. Start with the purpose of the form
Before deciding which fields to include, identify the action the visitor is trying to complete.
A general contact form may need only a name, a reply address and a message. A quotation form might also need a service category, project description and approximate timeframe.
A booking form has different requirements from a newsletter subscription form.
Define the purpose before adding fields. For every requested piece of information, ask:
- Does the business need this information to respond?
- Will someone actually use it to make a decision?
- Can the information be collected later if necessary?
- Is the field understandable to a first-time visitor?
- Is there a less intrusive way to achieve the same purpose?
The W3C recommends keeping forms simple and asking only for information needed to complete the intended task. Irrelevant or excessive questions can make forms harder to use.
For example, a business asking visitors to request a website quotation probably does not need their identity number, residential address and date of birth at the first enquiry stage.
Collect the information needed for the current interaction rather than attempting to anticipate every future requirement.
2. Give every field a clear label
Each input should have a meaningful label that explains what the visitor is expected to enter.
Common examples include:
- Full name
- Email address
- Telephone number
- Business name
- Service required
- Project details
Avoid vague labels such as "Information", "Details" or "Input" when a more specific description would help.
A placeholder inside a text field can provide an example, but it should not replace the field's label. Placeholder text normally disappears when someone begins typing, which makes it less useful for reviewing an answer.
The W3C's Labeling Controls guidance explains how labels should be associated with their controls.
In HTML, a label can be associated explicitly with a field using matching for and id attributes:
<label for="email">Email address</label>
<input id="email" name="email" type="email" required />
This example illustrates the relationship between the visible label and the input. A production form still needs appropriate layout, validation, server-side processing and error handling.
Good labels help visitors understand the form, support assistive technology and make it easier to identify the information requested.
3. Make required and optional fields obvious
Visitors should not have to guess which questions they must answer.
Mark required fields clearly and explain the convention near the beginning of the form. If a field is optional, say so where the distinction could otherwise be confusing.
Do not use colour alone to communicate whether a field is required. Someone who cannot distinguish the colours must still be able to understand the instruction.
If a telephone number is optional, for example, label it as optional rather than allowing the visitor to discover the requirement only after submission.
Also distinguish between a field that is genuinely required for the transaction and one that is merely convenient for the business.
If a quotation can be prepared without a telephone number, making that field mandatory may prevent a potential customer from submitting an otherwise useful enquiry.
4. Group related questions logically
A form with many fields can feel more complicated than it needs to be.
Group related questions so visitors can understand how the information fits together.
For example, a booking form could separate:
- Contact information
- Appointment preferences
- Service requirements
- Confirmation
In HTML, related controls can be grouped using fieldset and legend elements where appropriate. These elements help communicate relationships between controls to assistive technologies.
The W3C explains this approach in its Grouping Controls tutorial.
Do not introduce multiple steps simply to make a short form appear more sophisticated. A simple enquiry may be easier to complete on a single page.
For longer processes, divide the questions into meaningful stages and make progress clear. The visitor should understand where they are and what remains.
5. Design for phones and small screens
Many customers access business websites through mobile devices. A form that works only on a large desktop display can create unnecessary difficulties.
Check that:
- Fields fit within the available screen width.
- Labels remain visible and readable.
- Buttons are easy to locate and activate.
- The keyboard does not obscure important instructions.
- Text is not cut off or hidden behind other elements.
- The visitor can move between fields without unexpected layout changes.
- Error messages remain visible near the relevant controls.
Use suitable HTML input types where they match the information requested. For example, type="email" can help browsers provide appropriate input handling for an email address.
Be careful when validating telephone numbers. Valid numbers can contain spaces, country codes, brackets and other separators. A form should not reject reasonable formats without a clear reason.
Mobile usability is not simply a matter of making the fields narrower. The complete interaction needs to work on the device.
6. Explain errors in plain language
A visitor submits the form, but something is wrong. What happens next?
A poor form might display a generic message such as "Invalid input" or highlight a field in red without explaining the problem.
A helpful form identifies the issue and explains how to correct it.
Compare these examples:
- Unhelpful: "Error 12."
- Better: "Enter a valid email address, such as name@example.com."
- Unhelpful: "Required field missing."
- Better: "Enter your name so we know how to address our reply."
Error messages should identify the relevant field, describe the problem and provide an actionable correction where possible.
They should also remain understandable when someone navigates with a keyboard or uses assistive technology.
The W3C's Validating Input guidance covers validation techniques, while its guidance on User Notifications explains how to communicate errors and successful completion.
Do not erase every previously completed field when validation fails. Preserving valid input saves time and reduces frustration.
7. Validate input on the server as well
Browser-side validation can improve the user experience. It can identify an empty required field or an incorrectly formatted email address before the form is submitted.
However, browser-side validation alone is not a security control.
A visitor can bypass client-side checks or send a request that does not originate from the expected form interface. The server must validate the submitted information independently.
Depending on the application, server-side validation may include:
- Checking required fields.
- Enforcing reasonable field-length limits.
- Validating data formats.
- Rejecting unexpected input structures.
- Applying appropriate rate limits.
- Protecting against malicious input.
- Verifying that the request is authorised where necessary.
Validation should match the business purpose. Avoid overly restrictive rules that reject legitimate names, telephone formats or messages.
Also ensure that validation failures do not expose technical details or internal system information to visitors.
A contact form is a small feature, but it still processes untrusted input and should be built accordingly.
8. Tell visitors what happens after submission
A visitor who submits a form needs clear confirmation that the action succeeded.
A useful success message might say:
"Thank you for your enquiry. Your message has been submitted successfully."
If the business has a reliable response process, it can also explain what happens next.
Do not promise a response time that the business cannot consistently meet. A small team may need to set a realistic expectation based on its actual working arrangements.
Confirmation can be displayed on the page, delivered by email or provided through another suitable mechanism. The method should match the form's purpose.
Test the success state as carefully as the error state. A form that reports success before the message has been accepted by the processing system can create a false impression that an enquiry was delivered.
Where email delivery is involved, confirm that messages reach the intended destination and that failures can be detected.
9. Protect the information people submit
Contact forms often collect personal information. A business should consider what it collects, why it needs it, who can access it and how the information is handled after submission.
Practical safeguards include:
- Collecting only relevant information.
- Restricting access to authorised people.
- Avoiding unnecessary exposure in email notifications.
- Protecting form processing and storage.
- Establishing appropriate retention and deletion practices.
- Explaining relevant privacy information clearly.
- Reviewing the services and providers that process submissions.
If a form collects sensitive information, assess whether a general contact form is the right channel at all.
Avoid asking visitors to submit identity documents, payment details or other sensitive material through a basic enquiry form unless there is a justified need and an appropriate process to protect it.
Privacy and security requirements depend on the information collected and the circumstances of the processing. Businesses should assess the applicable South African legal requirements rather than assuming that a generic privacy notice is sufficient.
10. Test the complete enquiry journey
A form that looks correct in a design preview is not necessarily ready for publication.
Test it from beginning to end.
Normal submission
Submit a valid enquiry and confirm that it reaches the intended destination.
Missing information
Leave a required field empty and verify that the form explains what needs attention.
Invalid input
Try an incorrectly formatted email address or another unsuitable value.
Preserved answers
Trigger a validation error and confirm that the visitor's other valid entries remain available.
Keyboard use
Navigate through the form without a mouse. Check that the current field and focus state are visible.
Mobile layout
Test on a narrow screen and confirm that the fields, instructions, buttons and errors remain usable.
Success feedback
Confirm that the visitor receives a clear acknowledgement after successful submission.
Delivery failure
Where practical, test or simulate a failure in the form-processing or notification service and establish how the business will detect it.
Spam and abuse
Check that appropriate protections are in place without making the form unnecessarily difficult for genuine visitors.
Privacy
Verify that submissions are stored and shared only through the intended channels.
Repeat these checks after significant changes to the website, form integration or hosting configuration.
CTA — Web Development
If your business website needs a more usable enquiry journey, explore Mogen's web development service to discuss your website requirements.
A practical contact form checklist
Before publishing, confirm the following:
- The form has one clear purpose.
- Every field has an understandable label.
- Required and optional fields are clearly identified.
- Only necessary information is requested.
- Related controls are grouped logically.
- The layout works on mobile devices.
- Keyboard navigation is usable.
- Validation errors explain how to correct a problem.
- Previously entered valid information is preserved where appropriate.
- The server validates submitted information.
- Successful submission produces clear feedback.
- Enquiries reach the intended destination.
- Personal information is handled appropriately.
- The form has been tested after implementation.
Frequently asked questions
Does an accessible form need to look plain?
No. Accessibility does not require a form to look unattractive. A well-designed form can use a distinctive visual style while retaining clear labels, understandable instructions, sufficient contrast and usable controls.
Should every contact form use CAPTCHA?
Not necessarily. Choose an anti-abuse approach appropriate to the level of risk. Some methods introduce additional barriers for genuine visitors, so consider usability and accessibility when selecting protections.
Is a working contact form enough to make a website accessible?
No. Accessibility involves the wider website, including navigation, headings, links, images, content, interactions and other components. A good form is one important part of a broader effort.
CTA — Discuss your website requirements
Planning a new website or improving an existing one? Contact Mogen to discuss the requirements, functionality and customer journey your business needs.
Conclusion
A good contact form should help people complete a task rather than make them work around the website.
Start with a clear purpose, request only necessary information, label fields properly, explain errors and confirm successful submission. Then test the complete journey on different devices and with different methods of interaction.
These improvements can benefit businesses of all sizes, from a local service provider in Maboloka to a growing company serving customers in Soshanguve, Centurion and elsewhere in South Africa.
The best form is not necessarily the one with the most fields or the most elaborate design. It is the one that collects the right information reliably and makes the next step clear.