Forms

A marketing form turns a visitor into a conversation: a contact request, a demo booking or a newsletter signup. It asks for as little as it can, says what happens next, and confirms that the message arrived.

Marketing forms use the same Field as product apps, in its Sera version: a boxed field with its label above, as on clinia.com. The rules for labels, hints and errors follow Forms and validation. This page covers what's different on a marketing site.

A contact form

• Ask for what the next step needs. Name, work email and company are enough to reply. Every extra field costs submissions.
• Pair short fields. First and last name share a row on wide screens. Everything else takes the full width, and every field stacks on phones.
• Say how the data is used. A line before the button links the privacy policy.
• Name the result on the button. Send message, Book a demo, Subscribe. The button is a Button, not a CTA: a CTA moves the visitor to another page, and a submit stays on this one.

After submit

• On success, the confirmation takes the form's place and says what happens next, such as how and when the team follows up. Screen readers announce it.
• On a sending error, keep everything the visitor typed and say how else to reach us, such as an email address. The message sits above the button and is announced.
• While it sends, the button is disabled and says so: Sending….

Do and Don't

Do

• Put the label above the field, in sentence case, with no colon.
• Ask for a work email, and say "Work email" in the label.
• Add "(optional)" after an optional field's label, and set required on every required one.
• Check a field when focus leaves it, and the whole form on submit. Move focus to the first field with an error.
• Write each error as the problem and the way out, in one sentence, under its field.
• Confirm in place, and say what happens next.

Don't

• Ask for a phone number, a job title or a budget unless the next step needs it.
• Put a hint in the placeholder. It vanishes as soon as the visitor types.
• Mark required fields with an asterisk.
• Pre-tick a consent box, or bundle consent into the submit.
• Use a CTA as the submit, or Vital anywhere in the form.
• Collect health or patient information in a marketing form.