Sales

How to Design a Website Form That Converts: What to Show Before Asking for Details

Global Marketing and CommerceAugust 9, 202611 min
How to Design a Website Form That Converts: What to Show Before Asking for Details

A website form that converts does not begin when someone types their name. It begins earlier: when the page makes clear what the company can solve, what the person will receive in exchange for their details and what will happen after they hit send.

Reducing fields can help, but it is not a sufficient recipe. A very short form can still fail if it appears before trust exists, if it does not explain the next step, or if it leaves the sales team without the minimum context needed to reply well.

The right question is not “how many fields should a form have?” It is: what information does this person need in order to decide it is worth writing to us, and what information does our team need to continue the conversation without making them repeat everything?

This guide explains how to answer it.

Friction does not start inside the form

Think of someone who needs to renovate a home, hire marketing support or solve a technical problem. They land on a page, read two generic sentences and find a button that says “Request information”. When they open it, they have to fill in six or seven fields without knowing whether they will get a call, a proposal, an automated email or simply silence.

They did not abandon out of laziness. They abandoned because they still had no sufficient reason to hand over their details.

A contact form is part of a decision sequence. Before asking for personal information, the page should answer four simple questions:

  1. What problem it helps to solve. Not an abstract list of services, but a recognisable situation.
  2. Who it is for. The person should be able to see whether their need fits or not.
  3. What they will get by contacting us. It can be a diagnostic call, a review, a visit or an initial reply; it does not have to be a promise of an immediate quote.
  4. What will happen next. An indicative response time, the channel and the next step.

This context has a practical effect: the form stops feeling like an administrative barrier and becomes the logical next step.

A good form asks for what is necessary, not everything that would be useful to have

It is tempting to ask for every detail that “might be useful”: company, job title, budget, city, number of employees, project size, timeline, how they found us and a long comment. The problem is that the user is not filling in a CRM; they are trying to start a conversation.

The GOV.UK form design pattern recommends that every question have a reason and that only genuinely necessary information be requested. It also states that it should be clear why a detail is being asked for and how it will be used. GOV.UK Design System

That principle also fits data minimisation: the GDPR requires personal data to be adequate, relevant and limited to what is necessary for the stated purpose. ICO: guide to data protection

This is not only a legal matter. Asking for information that does not change the commercial response adds a task and a doubt: “why do they need to know this before talking to me?”

Baymard's research on checkout forms points to an idea that transfers only with care: the number of fields a person has to evaluate influences perceived complexity more than the number of screens. Their data comes from ecommerce, not from B2B forms, but the usability lesson is useful: every field must justify its presence. Baymard: minimise form fields

Which fields to ask for depending on the intent of the contact

There is no universal form. The right information depends on the value of the conversation and on what the person expects to get.

SituationGoal of the formReasonable initial informationWhat is better left for later
Resource, newsletter or eventGrant access and consentName if it adds personalisation; emailBudget, phone, company, project details
General service enquiryUnderstand whether there is a fit and replyName, contact channel, service or need, optional commentFull brief, exact budget, details that can be discussed on a call
Quote request for a complex servicePrepare a useful first conversationName, contact, project type, location or category if it changes operations, brief contextThe full technical specification, non-essential attachments, repeated data
Urgent or local assistanceBe able to respond and prioritiseName, phone, area and basic nature of the urgencyA long questionnaire or a detailed explanation before contact is confirmed

The important word is reasonable. An additional field can be fine if it changes how the person is served. For example, a renovation company may need the area and type of work to route the enquiry correctly. A B2B agency may need to know the main challenge in order to prepare a relevant conversation.

The test is simple: if we remove that field, would the team make a clearly worse decision, or would it just lose a useful curiosity? If it is the latter, that detail can probably be requested later.

Before the form: a concrete and proportionate promise

Many pages ask for details with phrases like “Leave us your details” or “Contact us”. These calls to action are too vague for someone who is still evaluating options.

A better alternative describes the transaction honestly:

  • “Tell us what you need and we will tell you what the next step could be.”
  • “Request a first conversation to review the scope of your project.”
  • “Send us your area and the type of renovation; we will confirm whether we can help.”
  • “Get an initial review of your lead capture and follow-up process.”

This is not about dressing up the button. It is about aligning expectation and outcome. If the team will reply on WhatsApp, say so. If the first step will be a call, say that too. If no quote is given without knowing the project, explaining it reduces friction later.

An example of a form block

Title: Let's talk about your project

Supporting text: Tell us the essentials. We will review your request and tell you the most useful next step; we do not send generic quotes without understanding the context.

Fields:

  • Name
  • Phone or email
  • What do you need to solve?
  • Comment (optional)

Button: Request a first conversation

Microcopy: We will use your details only to reply to this enquiry. See our privacy policy.

This example is not a mandatory template. It is a way to show that the copy, the fields and the following step all tell the same story.

Writing questions a person can answer without stopping

Form language affects mental load. “Describe the scope of your requirement” may sound appropriate internally, but it forces the person to interpret what the company expects. “What would you like to improve or solve?” is more direct.

Four useful rules:

  1. One question, one answer. Avoid “Describe the project, budget and timeline” in a single text box.
  2. Use visible labels. Do not rely only on placeholders that disappear as soon as someone types.
  3. Mark optional fields clearly. Baymard's research shows that ambiguity between required and optional fields causes errors and hesitation at checkout. Baymard: required and optional fields
  4. Explain sensitive or non-obvious data. If you ask for phone, budget or location, a short reason can reduce distrust.

It is also worth avoiding messages that sound like an interrogation: “What is your available budget?” can be useful in certain complex sales, but it is a question many people do not want to answer before knowing whether there is a fit. It can be moved to the call or asked after value has been provided.

Designing for mobile, errors and accessibility

A large share of enquiries start on a mobile, often between other tasks. A form that works on a large screen can be uncomfortable if it forces zooming, switching between small fields or fixing an error without understanding it.

Check at least this:

  • Labels associated with each field, not just decorative text.
  • A logical tab order and the ability to complete the form with a keyboard.
  • Error messages next to the field and written to help correct it.
  • Appropriate mobile keyboard types for phone and email.
  • A single visual flow in one column when space is limited.
  • A sufficiently visible button and an unambiguous confirmation on submit.

There is no need to choose between aesthetics and clarity. Clarity is part of the brand experience, especially when someone is about to share their data.

Submission is not the end: design continuity before publishing

A form can have a good submission rate and still lose opportunities if it ends up in an inbox with no owner. That is why the design must include what happens afterwards.

Before activating a form, define:

  1. Destination: where the request will be stored and which source identifies it.
  2. Owner: who receives the task and what happens if they cannot handle it.
  3. First confirmation: what message the person receives and through which channel.
  4. Minimum context: what information the responder will see so they do not start from zero.
  5. Escalation: what counts as urgent, what needs a call and what can be resolved in writing.

This is the bridge between user experience and commercial operations. At GMC we work on it as a complete journey: the website should not simply capture a detail; it should hand a person the context to continue a conversation.

Metrics that matter more than “forms submitted”

Submission is a signal, not the final outcome. To evaluate a form, combine interface and business metrics:

MetricWhat it answersCaveat
Form startsDoes the offer encourage people to begin?Does not prove lead quality
Completed submissionsDoes the experience allow people to finish?Can rise even as quality falls
Field-level abandonmentWhere does friction appear?Requires instrumentation and context
Time to first responseAre we protecting the moment of intent?Define hours and measurement channel
Contacts that reach a conversationDoes the form generate workable opportunities?Align the definition between marketing and sales
Qualified conversationsDo the requested details help prioritise?Do not use a shifting definition

The best reading does not look for a single percentage. It looks for a coherent journey: more of the right people start, finish, receive an understandable reply and reach a useful conversation.

How to improve a form without guessing: a four-step test plan

Do not change the headline, fields, design, automation and follow-up at the same time. Afterwards it will be impossible to know what helped or what hurt the result.

  1. Describe the current state. Take a screenshot of the form, record fields, copy, traffic source and how it is answered today.
  2. Formulate a hypothesis. For example: “If we clarify that the first response will be a 15-minute call, more qualified visitors will start the form”.
  3. Change one relevant variable. It can be the promise, a question, the field order or the follow-up confirmation.
  4. Review behaviour and quality. Not just submissions: analyse real conversations, response time and reasons for abandonment.

If volume is low, do not chase fictitious statistical significance. Use recorded sessions with consent, short interviews, team feedback and a manual review of contacts. The discipline lies in documenting what was changed and why.

Checklist before publishing a contact form

  • Does the page explain the problem we solve before asking for details?
  • Does the person know what they will receive and what will happen next?
  • Is every field necessary in order to reply or prioritise?
  • Are optional fields marked as such?
  • Do we explain why we ask for the less obvious details?
  • Can the form be completed comfortably on mobile?
  • Do errors help people correct them rather than just blocking?
  • Are the privacy policy and the purpose of the contact accessible?
  • Does the request enter the CRM or agreed system with source and context?
  • Is there a responsible person and a first-response deadline?
  • Will we measure real conversations, not just forms submitted?

Frequently asked questions

How many fields should a website form have?

As many as the company needs to take a useful next step, and no more. There is no figure valid for every business: a download may only require an email, while a technical visit may require the area and type of need. The best rule is to justify each field by a concrete later decision.

Is a short form better than a long one?

A short form reduces effort, but it does not always generate enough context. The goal is not to make the form shorter at any cost, but to remove irrelevant questions and keep the ones that change the commercial response.

Should the phone number be mandatory?

Only if the phone is necessary for the response being offered and the person understands how it will be used. If contact can start by email or by WhatsApp chosen by the user, offering that alternative may be more appropriate depending on the service and the market.

Are multi-step forms a good idea?

They can help when there is information that genuinely must be collected, as long as each step is clear and they are not used to disguise an unnecessary questionnaire. Test the experience on mobile and measure whether people actually finish it.

Does a better designed form guarantee more sales?

No. The form is one part of the journey. The offer, the traffic source, trust, response speed and the quality of the conversation also matter. What it can do is remove avoidable friction and hand better context to the team.

The form is a conversation that starts before anyone types

The best optimisation is not about forcing more submissions. It is about making sure the right person understands why it is worth getting in touch, can do so without unnecessary effort and receives coherent continuity on the other side.

If your form asks for too much, explains too little or hands contacts to an inbox with no process, you do not need another layer of automation first. You need to review the whole journey.

At GMC we design websites and lead capture systems that connect the form, the CRM and commercial follow-up to the way each team works. If you want to review your site's journey, we can start with the form that today is receiving —or losing— your opportunities.

Related reading: What should happen after someone fills in a form

Sources and editorial notes

Contact form

A few quick questions.

Fill what you can. Skip what you don't want to answer. We'll take it from there.