How to Create High-Converting Signup Forms
Building one from scratch, field by field, with what to write in every box including the one above the button.
On this page
The short version
- Six elements, and the two that matter most are the headline and the button — the parts most likely to be left at whatever the tool defaulted to.
- Write the form from the visitor's side of the screen. "Submit" and "Sign up" describe what the system does; "Get the checklist" describes what they get.
- Build it to work without JavaScript and without styling first, then enhance. A form that fails silently converts nobody and reports nothing.
A signup form has six parts and each has one job. Most forms in the wild have three of them written and three left at a default, and the defaults are always the same three: the headline, the button, and whatever sits next to the field.
Working through them in order gives you something that converts without any styling work at all, which is the right order — a well-written plain form beats a beautifully styled vague one every time.
Building it, element by element
Headline — name the thing, not the action
"Join our newsletter" describes what the visitor would be doing. "The deliverability checklist we use before every send" describes what they would have. The second converts because it is an object rather than a commitment.
Keep it under about ten words. This is the only element most people read.
Supporting line — what arrives, and how often
One sentence. It removes the unspoken objection, which is not privacy but volume. "Plus one email a fortnight on the same subject. Unsubscribe in one click."
The field — one, labelled, correctly typed
A visible label above it, an email input type so phones show the right keyboard, and an autocomplete attribute so the browser can fill it. Those three attributes are worth more than any styling.
The button — what they get, in two or three words
"Get the checklist", "Send me the guide", "Start the course". Never "Submit", which describes the form's behaviour, and rarely "Sign up", which describes an obligation.
The line under the button — the last objection
Whatever the specific hesitation is for this offer: no spam, no card, instant access, or a subscriber count if it is large enough to be reassuring rather than embarrassing.
The confirmation — say what happens now
The state after submitting is part of the form. "Check your inbox — it arrives in about a minute, from OptinPlot" prevents the support enquiry and sets the sender expectation before the first email lands.
The three attributes worth more than the styling
An input with type="email" gets the correct keyboard on a phone, with the at sign and the full stop visible. autocomplete="email" lets the browser fill it in one tap. inputmode and a sensible name improve both further.
Together they turn a form that takes fifteen seconds of thumb typing into one that takes two taps. That is a larger effect than anything in the visual design, and it is three attributes.
Build it to fail well
A form that submits over JavaScript and shows its confirmation by swapping the markup will do nothing at all if the script fails to load. The visitor gets no error, no confirmation and no reason to try again.
Build the plain version first: a real form element, a real action, a real page it posts to. Then enhance it with the in-place confirmation for everyone whose script loaded. The difference is invisible when everything works and total when it does not.
The default form and the written one
Left at defaults
- Headline: "Newsletter"
- No supporting line
- Placeholder-only "Your email"
- Button: "Subscribe"
- Nothing under the button
- Confirmation: "Thank you."
Written
- Headline: "The pre-send checklist"
- "Plus one email a fortnight. One-click unsubscribe."
- Visible label, email input type, autocomplete
- Button: "Get the checklist"
- "No card, no spam."
- "Check your inbox — about a minute, from OptinPlot."
Before it goes live
- Headline names an object, not an action
- One line states cadence and how to leave
- Field has a visible label, email type and autocomplete
- Button says what the visitor receives
- A line under the button removes the last objection
- Confirmation names the sender and the timing
- It works with JavaScript disabled
- Completed on a real phone, start to finish
Frequently asked questions
Should the form be horizontal or stacked?
Stacked, in almost every case. A horizontal field-and-button pair reads as a search box and has to become stacked on a phone anyway, so you are maintaining two arrangements for a small desktop gain.
Does a subscriber count help?
Above a few thousand, yes. Below that it works against you — a specific small number invites the reader to conclude nobody else found this worth doing.
What about honeypots and bot protection?
A hidden field that humans never fill costs nothing and catches most automated submissions. Add rate limiting per address before adding anything the visitor has to interact with.