In this article · 12 sections
- 1. Ask for less
- 2. Use visible labels above fields
- 3. One column
- 4. The right keyboard on mobile
- 5. Sensible defaults and choices
- 6. Helpful, inline errors
- 7. A clear button
- 8. Trust notes near the button
- 9. A real success state
- 10. Spam protection without friction
- 11. Make sure it actually arrives
- Quick audit
Whether it's a contact form, booking request or checkout, a form is where interest becomes an enquiry. Every unnecessary field, unclear label or confusing error loses people. Good form design isn't about looks; it's about making the task easy.
1. Ask for less
Each extra field reduces completions. For a typical enquiry form, you often need only: - Name - Phone (or email) - What they need (a short dropdown or message box)
Collect everything else on the follow-up call. If a field isn't essential, remove it or make it optional and say so.
2. Use visible labels above fields
Placeholder text inside a field disappears when the user starts typing, so they forget what it asked. Put a clear label above each field. Use placeholders only for examples ("e.g. 98765 43210").
3. One column
Single-column forms are faster to complete than multi-column layouts, especially on mobile. Short related fields (first and last name, or city and pincode) can sit side by side on desktop.
4. The right keyboard on mobile
Use the correct input types so phones show the right keyboard:
- type="tel" for phone numbers (number pad)
- type="email" for email (@ key)
- inputmode="numeric" for pincodes and OTPs
- autocomplete attributes (name, tel, email, address) so phones can autofill
These small details make mobile forms dramatically easier.
5. Sensible defaults and choices
- Use dropdowns or buttons for a few fixed options (service type, budget range)
- Use date pickers for dates
- Pre-select the most common option where it makes sense
- Don't make people type information you already know (e.g. the service page they came from)
6. Helpful, inline errors
- Validate as the user leaves a field, not only on submit
- Show the error next to the field, in plain words: "Please enter a 10-digit mobile number"
- Don't clear the whole form when there's an error
- Use colour plus an icon or text (not colour alone) for accessibility
7. A clear button
The button should say what happens: "Get my free quote" or "Request callback" works better than "Submit". Make it large, high-contrast and full-width on mobile. Disable it and show a spinner while sending to prevent double submissions.
8. Trust notes near the button
A short line like "We'll call you within 2 hours. No spam." reduces hesitation. Link to your privacy policy if you collect personal data.
9. A real success state
After submission, show a clear confirmation: what happens next and when. A dedicated thank-you page also allows conversion tracking and can offer a WhatsApp link for faster contact.
10. Spam protection without friction
Visible puzzles frustrate real users. Prefer invisible methods: honeypot fields, rate limits and tools like Cloudflare Turnstile. See stopping spam submissions.
11. Make sure it actually arrives
The best-designed form is useless if submissions land in spam or nowhere. Test it monthly, save submissions to a database as well as email, and see contact form not working.
Quick audit
- How many fields does your main form have? Can you cut one?
- Are labels visible while typing?
- Does the phone field open the number pad?
- What does the error message say?
- What does the user see after clicking the button?
Every Joboo Web site includes lead forms that save every submission to a database, so no enquiry is lost even if email fails. Talk to us.