From Website Planning to Sustainable Growth · 8/10

Build a Contact Form That Doesn't Lose Enquiries

What will this help you do?

Keep fields focused, validate on both sides, handle repeat submissions and spam, confirm delivery, and explain how submitted data is used and retained.

Who is it for?

Readers working through this problem and checking each step.

Before you start

Check the scope of this guide, then prepare the environment and materials it actually calls for.

Updated

On this page

A success message does not prove delivery

Many contact forms do one thing after a click: show “Submitted successfully.” The email service may have timed out, the database write may have failed, or the notification may have landed in spam, while the visitor still sees a green confirmation. Define what success means. At a minimum, the server should accept and persist the submission; a reference number makes it easier to trace. Email is a notification channel, not the only copy of the message.

Start by defining the form's purpose. If readers only need to report an error in an article, name, company, telephone number, and budget should not all be required. Extra fields increase abandonment and the amount of personal information you must manage.

Write labels for people, not for database columns

Use a visible label such as “Your email address,” not an internal name such as contact_email. A placeholder cannot replace a label because it disappears as soon as someone types. Distinguish required from optional fields, explain format rules before submission, and tell users how to correct an error rather than saying “Invalid parameter.”

Appropriate input types such as email, url, and tel improve mobile keyboards and provide basic checks. Browser validation is not a security boundary. Validate every field again on the server, limit lengths, and store accepted values safely.

Give each submission a clear server-side state

A submission may move through received, validated, stored, notified, and handled. Record at least when it arrived, which page it came from, its processing state, and a short error description. Do not collect passwords, full tokens, or other information the form does not need. If email notification fails, the saved record should remain in a queue for follow-up, with an alert for the operator.

Complete the steps that protect the user's message before returning success. If storage is essential and writing fails, return an error. If the record is safely stored but a notification fails, you can tell the visitor “We received your message” while marking the notification problem in the admin area.

Make repeat clicks and network retries predictable

Show a processing state after a click, but do not depend only on disabling the button: a mobile network may retry a request. Give the submission an idempotency key so the server can recognize the same attempt within a short period. Return the same reference number instead of creating several records.

After an error, preserve non-sensitive fields the user already entered and move focus to the error summary or first invalid field. One mistyped email address should not empty the entire form.

Add anti-spam measures in layers

Begin with a hidden honeypot field, a reasonable minimum completion time, rate limits by IP and email, and content-length limits. If necessary, score repeated text, unusual link counts, and known spam patterns. Add a CAPTCHA only when spam volume justifies the cost it imposes on real users; also check accessibility, network reachability, and the data sent to its provider.

Do not send every submission to an opaque third party simply to reduce spam. If you use an outside service, document what it receives, how long it retains data, what happens when it fails, and how you could replace it.

Put the privacy explanation next to Submit

Explain what information is collected, why it is needed, how long it is kept, who can access it, and how a visitor can request deletion. Marketing consent, if offered, should be separate from the request and not preselected. Logs may also contain IP addresses, user agents, or submitted text; retention rules need to cover logs as well as the main database.

A public tutorial should remain readable without submitting a phone number. Keep the boundary between helpful content and lead collection clear. Trust is worth more than one additional field.

Test failure cases before launch

Try an empty required field, a malformed email address, overlong text, rapid repeated clicks, an email-service failure, a database failure, and an interrupted mobile connection. Confirm the interface never reports success when the message was lost, the admin area shows stored submissions awaiting attention, and logs do not leak message bodies or secrets. Check labels and error messages with a keyboard and screen reader too.

After a week of operation, compare submissions, valid messages, notification failures, and response time—not just button clicks. Next, move to the page-level technical SEO checklist.

Sources

  1. Client-side form validationMDN Web Docs
  2. How to Meet WCAG 2.2W3C Web Accessibility Initiative

Next steps

Continue with the next useful task; you do not need to read everything at once.

  1. Help Baidu and Google Discover a New Website: A Practical SEO Checklist →
  2. Deploy Your First Static Website to a Linux Server with Caddy →
  3. Build Your First Website with HTML and CSS, Then Preview It Locally →
RESOURCES I USE · REFERRAL

Two services to compare when you are ready to launch

This is not an automated ranking, and neither service is necessary for everyone. These are services I use, with the use case and limitations kept visible.

Cloud server · Used for early projects

RainYun

A practical candidate for a website or small service. Choose by user region, configuration and measured workload rather than the lowest headline price.

Referral disclosure: these links contain my referral information. I may receive a platform benefit if you sign up or order, at no additional charge from AIOOS. Check the order page for current pricing, availability, regions and terms. Read the full affiliate disclosure