# Form design best practices, with our own form data

Form design best practices that hold up, with our own data: on 3 real forms, most visitors left before typing a single character. Rules and code.

Author: Formgong
Published: 2026-11-03
Language: en
Canonical: https://formgong.com/en/blog/form-design-best-practices/

Ask only what you need to reply, label every field above it, keep one column and show each error next to its field. Then measure before you cut fields: on the 3 forms we could check, 106 of 129, 48 of 60 and 13 of 21 visitors left before typing anything. On those forms most of the loss happened before the first field.

## Why do people open a form and leave?

You put a form on your site, the page gets visits, and very few people send it. The usual advice is to cut fields, and that is often right. But it assumes people start the form and give up halfway, and you do not know that until you count where they actually stop.

So before the rules, here is what we could measure on real forms. Formgong counts views, starts and the field a visitor last touched, for forms whose page loads our script. We looked at every form that had at least 20 recorded views.

## What did three real forms show?

Every form on Formgong with at least 20 recorded views on 2 November 2026: three booking forms of one business, 29 October to 2 November. “Started” means the visitor typed in at least one field.
FormAnswers per submissionViewsStartedSent
Booking form A912923 of 1295 of 129
Booking form B116012 of 604 of 60
Booking form C16218 of 217 of 21
Only 3 forms passed that bar, all from one business, over two to five days, so these numbers cannot tell you how many fields is right. What they do show is where people left. On all three forms most visitors never typed a single character: 106 of 129 on form A, 48 of 60 on form B, 13 of 21 on form C. Far fewer gave up once they had started.

The form with the most answers, 16, had the best result, 7 sends from 21 views. That is one small form, and people who open a booking form for a specific trip may simply be more decided. It is still a useful warning against treating field count as the only thing that matters. On form A, 5 of the 12 recorded drop-offs were at the very first field, the name, before any hard question came up. We will repeat this when more forms have enough views to compare.

## Should you fix the page or the fields first?

If most visitors leave without touching the form, they decided before the first field. The length of the form they see can be part of that, but look at what sits above it too. Visitors may not know what happens after they press the button, or how soon you answer. Some cannot tell whether the form is for them, and on a phone the first field may sit below the fold. Write one sentence over the form that says what they get and when, for example “We reply within one working day with a price.” That costs nothing and speaks to the people who never start.

## How many fields should a form ask for?

Every field should earn its place by changing what you do next. A name and a way to reply are almost always enough for a first contact. Anything you only need later, such as an address or a company size, can wait for the reply. If a field is useful but not essential, make it optional and say so in the label. People then skip it without wondering whether the form will refuse to send.

## Where should labels go, and which input types help?

Put a visible label above each field. The W3C's forms tutorial on labeling controls says to “Provide labels to identify all form controls”, usually with the `<label>` element, and a placeholder that disappears as soon as someone types is not a label. One column reads top to bottom on any screen, so nobody misses the field on the right.

Group related fields with `<fieldset>` and `<legend>`, as the W3C grouping tutorial describes. Use `type="email"` and `type="tel"` so phones show the right keyboard, and set `autocomplete` so the browser can fill in a name, email or phone number it already knows. MDN lists the values, from `name` to `postal-code`.

```html
<fieldset>
  <legend>Your details</legend>

  <label for="name">Full name</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required>

  <label for="phone">Phone <span>(optional)</span></label>
  <input id="phone" type="tel" name="phone" autocomplete="tel">
</fieldset>

<button type="submit">Request a call back</button>
```

## How should errors and the button read?

Show an error next to the field it belongs to, in words that say how to fix it: “Add the @ and the rest of your email” is better than “Invalid input”. Keep what the visitor typed when the form comes back with an error, since losing it is the fastest way to lose them. The button should say what happens, such as “Request a call back”, rather than a bare “Submit”. Our guide to the [accessible contact form](/en/blog/accessible-contact-form/) has the complete markup, and the one on [form abandonment](/en/blog/form-abandonment/) covers the people who start and stop.

## How do you measure your own form?

Rules get you a decent form. Your own numbers tell you which rule matters for your visitors. Count three things: how many people saw the form, how many started typing, and how many sent it. If the first gap is the big one, work on the page and the promise above the form. If the second is, look at the field where people stop.

Formspree's plans page, which we read on 2 November 2026, lists submission export and search, and no form analytics. Formgong counts views, starts and the field people stopped at on every plan, Free included, once the page loads its `/fg.js` script, which sets no cookies. The [analytics docs](/en/docs/analytics/) show the report.

## Can you start from a finished form?

If you would rather not build from scratch, Formgong's [form templates](/en/templates/) start with labelled fields and short lists and come wired to the form backend, and the [form builder](/en/tools/form-builder/) styles a form to match your site. You can add the help chat for visitors who want to ask something first, and review requests for people who wrote in. Everything starts from the [Formgong home page](/en/).

## What changed your form's numbers?

If you changed a form and saw more people send it, or fewer, tell us what you changed at [support@formgong.com](mailto:support@formgong.com). Real before-and-after numbers are what this page needs most.

## What Formgong's free plan includes

- **Build the form or bring your own.** The [form builder](/en/tools/form-builder/) takes the colours and fonts from your site's address, with no sign-up; ready [form templates](/en/templates/) copy into your account; AI writes the fields from one sentence. Any hand-written HTML form works too.

- **Websites with the form already connected.** 28 free [website templates](/en/website-templates/) post to Formgong out of the box.

- **250 submissions a month on unlimited forms.** Spam does not count. Once a year, a busy month keeps delivering on credit until the 7th instead of stopping.

- **Everywhere you work.** Email to up to 3 people at once, [Telegram](/en/integrations/telegram/) with Reply and Handled buttons, [Google Sheets](/en/integrations/google-sheets/), [Notion](/en/integrations/notion/), and 3 signed [webhooks](/en/integrations/webhooks/) for Slack, Discord, Zapier, Make or n8n.

- **Emails to your customers in your business's name.** Formgong sends them under your business name and replies come back to you, with no email service of your own to set up: a review request to every lead, a reminder a visitor asked for, and review emails after an order with your logo and colours. People who agree can also go straight into your [Mailchimp, Klaviyo, Brevo, MailerLite or Kit](/en/docs/marketing-lists/) list. An automatic reply to each visitor is on Pro.

- **No captcha needed.** A server-side spam filter, a honeypot, allowed domains and a block list; add your own Turnstile key if you want one.

- **Files and voice.** Visitors can attach files, or record a [voice message](/en/docs/voice-field/) that arrives transcribed.

- **Made for AI-built sites.** A hosted form page and a contact button; step-by-step guides for sites built with [Lovable](/en/docs/lovable/), [Bolt](/en/docs/bolt/), [v0](/en/docs/v0/), [Replit](/en/docs/replit/) and [Base44](/en/docs/base44/); an [MCP server](/en/docs/mcp/) lets Cursor or Claude wire the form for you.

- **See what the form does.** [Analytics](/en/docs/analytics/) for views, starts, conversion and where each lead came from, and an alert when a form goes quiet.

- **One account for the rest.** Customer reviews and an [AI help chat](/en/docs/help-chat/) that answers visitors from your own pages, with every message in one inbox. Data is stored in the EU.

## Frequently asked questions

### How many fields should a form have?

As few as you need to reply. Our own data is too thin for a number: on 3 measured forms the one with the most answers sent best.

### Should labels go above or inside the field?

Above it. A placeholder inside the field disappears as soon as someone types, and the W3C asks for a label on every form control.

### Why do people open my form and not fill it in?

Often because the page does not say what happens next. On the 3 forms we measured, most visitors left before typing anything.

### How do I see where people stop filling in a form?

Count views, starts and sends, and record the last field touched. Formgong does this on every plan once the page loads its script.

## Sources and documentation

- [Formgong: Accessible contact form](https://formgong.com/en/blog/accessible-contact-form/)
- [Formgong: Form abandonment](https://formgong.com/en/blog/form-abandonment/)
- [Form analytics](https://formgong.com/en/docs/analytics/)

[Get a form key](https://formgong.com/en/#top)
