Contact forms, sign-ups and checkouts are where interest turns into revenue, and where many visitors quietly leave. Small design choices change completion rates a lot. These practices come from forms we have built and tested for client sites.
Ask for less
Every field is a reason to quit. For each one, ask whether you need it now. A first enquiry usually needs a name, a way to reach the person and a short message. Budget, company size and timeline can wait for the conversation. If a field has no clear use, delete it.
Use a single column
One column is read faster and completed more often than two side by side. Eyes move down in a straight line, and fields never get skipped. The exception is closely related pairs, such as first and last name, or expiry date and card code.
Put labels above fields
- Keep a visible label above every input. Placeholder text disappears as soon as someone types and is often too light to read.
- Use placeholders only for examples, such as "name@company.com".
- Mark optional fields as optional instead of marking required ones with asterisks everywhere.
- Connect each label to its input with
forandidso tapping the label focuses the field and screen readers announce it.
Match the input to the data
The right input type opens the right keyboard on phones, which saves effort:
type="email"withinputmode="email"for addresses.type="tel"for phone numbers.inputmode="numeric"for codes and OTPs.- Use
autocompleteattributes such asname,emailandtelso browsers can fill fields in one tap.
Validate kindly and at the right moment
- Check a field when the user leaves it, not on every keystroke.
- Show the message next to the field, in text, not only in red.
- Say what to do: "Enter a 10-digit phone number" beats "Invalid input".
- Keep what the person typed after an error. Never clear the form.
- Validate again on the server, because browser checks can be bypassed.
Make the button honest
Label the button with the outcome, such as "Send my enquiry" or "Get a quote", rather than "Submit". Disable it while sending to avoid duplicate submissions and show a clear loading state. If the request fails, show a retry option and an alternative such as a phone number or WhatsApp link.
Reduce effort on mobile
- Make tap targets at least 44 pixels tall with space between them.
- Use a font size of 16 pixels or more in inputs so iOS does not zoom the page.
- Avoid dropdowns for short lists. Radio buttons are faster to use.
- Test the whole flow one-handed on a real phone.
Split long forms into steps
If you truly need many fields, divide them into short steps with a progress indicator and save answers as people go. Start with easy questions, and keep the step count honest so the progress bar does not mislead. Each step should fit on one screen without scrolling on a phone.
Build for everyone
- Make every control reachable and usable with a keyboard.
- Move focus to the first error or to the success message after submit.
- Keep contrast high enough to read and do not rely on color alone.
Our guide to accessible web applications goes deeper.
After the click
Show a confirmation that says what happens next and when: "Thanks, we will reply within one business day." Send the lead to your inbox and a chat channel at the same time, and send an automatic confirmation email. Then measure starts, completions and the field where people drop off, and change one thing at a time.
A before-and-after example
A quote form asks for name, company, email, phone, city, budget, timeline, a message and how the visitor found you. Eight of those nine fields can be collected later. A better version asks for name, phone and a one-line need, then replies on WhatsApp to collect the rest in conversation. The form is shorter, the first reply is faster, and the details arrive in the channel the customer prefers.
Field-by-field quick rules
- Name: one field, not three.
- Phone: accept spaces and country codes, and format for the user.
- Address: use postcode lookup if you can.
- Dates: use the native date input on mobile.
- Passwords: allow paste and show a visibility toggle.
Forms inside business software
The same rules help staff, who fill in forms all day. In our Lena Dena platform, creating an invoice is built around speed: pick a party, add items, and use the "Save and send on WhatsApp" action so the customer receives the invoice immediately. The interface also supports several languages, because a form people can read in their own language has fewer mistakes. For lead capture, our WhatsApp automation goes a step further and lets customers skip the form altogether: they send a message and the details land in a sheet.
We design and build conversion-focused forms and lead flows. Look at our projects and services, or contact us to improve yours.