blog single

Designing forms people actually finish

Person completing an online form on a laptop
Published on:
May 16, 2024
TAG:
PRODUCT DESIGN
BY:
Edgeless Team
Read Time:
6 MIN READ
post detail
A form is the narrowest part of most business websites. Everything else can be persuasive, but the enquiry only exists if someone finishes the fields. Teams tend to add fields to learn more and then wonder why the volume dropped. The form got more useful for the business and harder for the person filling it in.
Every field is a cost
Each input asks the visitor to stop, think and type. On a phone that cost multiplies. A field is worth keeping when someone will act on the answer within a week. If the response goes into a database and nobody reads it, the field is decoration with a conversion cost.
Start by listing what the team does after a submission. If the first action is a phone call, the form needs a name and a number. If it is a quote, the form needs enough detail to scope the job. Build the field list from that first action instead of from a template copied between projects.
Ask one thing at a time
Long forms feel shorter when they are split into clear groups. A single page with twenty fields looks like work. Three steps with a visible progress indicator feels like a short conversation. The tradeoff is that each step adds a click, so keep the groups small and put the easiest questions first.
Group by what the visitor knows. Contact details belong together, project details belong together, and preferences belong at the end where they are optional. Avoid asking for information the visitor has to look up, like an account number, unless the next step depends on it.
The field level decisions that matter
  • Label every field above the input, not inside it as placeholder text that disappears on typing.
  • Use the right input type so phones show a number pad, an email keyboard or a date picker.
  • Mark optional fields and leave the rest unmarked. Asterisks on every field read as a warning.
  • Accept phone numbers in the format people type and normalize them on the server.
  • Explain why a sensitive field is needed, especially anything financial or medical.
  • Validate as the visitor leaves a field rather than after they submit the whole form.
  • Keep error messages next to the field and say how to fix the problem.
  • Make the submit button say what happens next, such as Send enquiry or Book a call.
Designers reviewing a form layout on screen
Group fields by the question the visitor is answering, not by your internal team structure.
Mobile is the default case
More than half of service enquiries now start on a phone, often while someone is standing in a building or sitting in a van. Test the form on a small screen with one hand. Check that the keyboard does not cover the next field, that the button is reachable, and that autofill works. Two common failures are a two column layout that breaks and a sticky header that covers the active input.
Autofill is worth designing for. Correct name and autocomplete attributes let the browser fill contact details in one tap. That single improvement often does more for completion than any visual redesign.
Reduce the work after submission
What happens after someone presses send shapes whether they trust the form. A clear confirmation page with a reference number and a realistic response time sets expectations. An email that arrives within a minute and names the person who will reply does more than a generic thank you page.
Route submissions to the right queue and make sure someone owns the queue. Forms that land in a shared inbox without an owner are the reason people say the website does not generate leads. The form worked. The follow up did not.
Privacy questions are part of the design
People hesitate when a form asks for more than the task requires. A quote request that asks for a date of birth or a home address feels wrong, even if the team has a reason. Ask the minimum, explain why each sensitive field is needed and link to a privacy notice that says what happens to the data and how long it is kept.
Consent needs a real choice. A pre ticked box is not consent in most jurisdictions, and a checkbox that blocks submission until someone agrees to marketing messages will cost you enquiries. Separate the consent for a reply from the consent for marketing, and let people decline the second without losing the first.
Show the security basics without turning the page into a policy document. A short line near the button that says who receives the message and what happens next does more for trust than a padlock icon. If the form uploads documents, state the accepted formats and size limit before the file picker, not after a failed attempt.
Measure what happens inside the form
Track a start event and a submit event for every step. The difference between them is where the form loses people. Without those two events, a drop in leads looks like a traffic problem, and teams respond by spending more on ads instead of fixing the form.
Watch for field level abandonments as well. Many analytics tools can record which field was focused when someone left. A single field with a high exit rate is usually asking for something unclear, unnecessary or unexpected. Read the submissions that did arrive and look for people typing explanations into the wrong box, which is a sign the question was not understood.
Compare completion across devices and traffic sources. A form that works on desktop and fails on mobile will show a gap that is easy to miss in aggregate numbers. Paid traffic often completes at a different rate than organic, which can point to a mismatch between the ad promise and the first question.
Change one thing at a time and give it enough submissions to mean something. A form with thirty submissions a month cannot support a weekly test. Pick the biggest suspected problem, fix it, wait a month and compare. Slow measurement is better than confident conclusions drawn from noise.
Write the result down with the date and the change. A small log of form experiments becomes a useful reference when a new team member suggests an idea that was already tried. It also protects the form from being redesigned every time a new marketing lead arrives with a preference.
A form is a promise. The visitor gives you information and expects a reply. Design the reply with the same care as the fields.
Edgeless Team
Test before launch, then keep watching
Before launch, run the form with five people who match your audience. Ask them to complete it while you watch and say nothing. You will learn where they pause, which labels they misread and which questions feel intrusive. Five sessions catch most of the problems, and they take less than a day.
After launch, watch completion by step rather than just total submissions. A drop between two steps points to a specific question. Add a short optional field only when the team can show how the answer changed a decision. Otherwise leave the form alone and improve the follow up instead.
We design and build enquiry flows with server side validation, clear confirmations and routing your team can maintain.
Explore software development
The best form is the shortest one that still gives your team what it needs to reply well. Cut a field, label it clearly, test it on a phone, and answer every submission quickly. Those four habits do more for conversion than any new visual treatment.
Forms
UX
Conversion
chevronchevronchevron
contact us

Let's Talk About Your Project

Tell us where the product stands today and where you want it to go. Within one business day you'll hear back from a senior lead with next steps, a rough timeline, and the team you'd be working with.
White note icon with a dog-eared corner.
We use these details only to reply. We do not add you to a mailing list.
BOOK A DISCOVERY CALL
BOOK A DISCOVERY CALL
edgeless solutions
Icon Slip
edgeless solutions
Icon Slip
edgeless solutions
Icon Slip
edgeless solutions
Icon Slip
edgeless solutions
Icon Slip
Edgeless Solutions logo
Edgeless Solutions is a digital studio building web, software and AI-powered products for growing businesses. Strategy, design, engineering and growth are handled by the same team.
LinkedInXInstagramDribbble
Contact Information