Design prompts for contact forms

A contact form has one job: make it easy for the right person to reach you, and easy enough that they actually bother. The ones that convert ask for two or three fields instead of ten, never make the phone number a required gate, pair the form with a panel that says who answers and how fast, validate as you go instead of failing at the end, and end on a clear "Send message", not a vague "Submit". The prompts below are the most-copied contact and get-in-touch designs in the Superdesign library, from split info layouts to editorial studio pages and friendly illustrated forms. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a contact form that looks designed, not generated

An AI design agent has a strong default for a contact form, and most of those defaults add friction: a long stack of required fields, a required phone number, placeholder text used as labels in two columns, validation that only fires on submit, a lone card on a purple gradient, and a vague "Submit" button. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a [light or dark] contact page for [product], a [what it is] for [who it is for].
Fields: ask for only [name, email and a message]. Do not require a phone number, and note that anything else (company, role, budget) is asked in the reply, not here.
Layout: a split page with the form on one side and a context panel on the other that names the response time ("we reply within one business day"), a direct email, and one or two other ways to reach you, so it is not a lone card on a blank page.
Labels and structure: a single column, with the label above each field, not placeholder text inside it.
Validation: validate inline as the visitor leaves each field, with a specific message like "Add the rest, like jane@acme.com", and include a clear success state after sending.
Primary action: one solid [Send message] button that names the outcome, with a short reassurance line under it ("We reply within one business day. No bots."). No Reset button.
Style: a neutral base with one [accent] color reserved for the button. Headline typeface [name], body [name], not the default Inter and no purple gradient.

Field count

Default: It asks for everything up front, a stack of first name, last name, email, phone, company, job title and subject, and makes the phone number required, which drives more abandonment than any field but a password.

Constrain it: Cap it at name, email and a message, never require the phone number, and say the rest is asked in the reply, not at the door.

A panel beside the form

Default: It centers a lone form card on a blank or gradient canvas, with nothing to tell a stranger who answers, how fast, or how else to reach you.

Constrain it: Use a split layout: the form on one side, a context panel on the other naming the response time, a direct email, and one or two other ways to reach you.

Labels and one column

Default: It uses placeholder text inside the fields as the only label and splits the form into two columns, so the hint disappears the moment you start typing.

Constrain it: Put the label above each field, not inside it, and lay the form out in a single column so the eye runs straight down.

Inline validation and a success state

Default: It checks nothing until you hit submit, then shows one vague red banner and leaves you hunting for which field broke, and it builds no confirmation that the message actually sent.

Constrain it: Ask for inline validation as the visitor leaves each field, with a specific message that names the fix, plus a clear success state after sending.

The submit button

Default: It drops a gray "Submit" button, often beside a "Reset" that wipes the form on a misclick, and the action says nothing about what happens next.

Constrain it: Use one solid primary button that names the outcome, like "Send message", with a short reassurance line under it, and drop the Reset button.

Color and type

Default: Left alone it defaults to Inter, a dark theme with a purple gradient, and rainbow accents used as decoration.

Constrain it: Name a headline and body typeface and one accent color on a neutral base, and reserve that color for the primary button.

Frequently asked questions

What makes a good contact form?

Low friction and clear expectations. Ask for two or three fields at most, never require a phone number, lay it out in a single column with labels above each field, validate inline as the visitor goes, and pair the form with a short panel that says who answers and how fast. The best contact forms feel like a quick note, not a job application.

How many fields should a contact form have?

As few as you can get away with, usually three: a name, an email, and a message. Research on form completion is consistent that fewer fields convert better, and the phone number field has one of the highest abandonment rates of any common field. Ask for company, role or budget in the reply, after the conversation has started, rather than at the door.

Why does my AI-generated contact form look generic?

Because a vague prompt gets the model defaults: a long stack of fields with a required phone number, placeholder text used as labels in two columns, a lone card on a dark purple gradient, the Inter typeface, and a vague Submit button. Cap the fields, add a context panel, move labels above the fields, name one accent color and a non-default typeface, and it stops reaching for the average.

Should a contact form ask for a phone number?

Usually not. The phone number field has one of the highest abandonment rates of any common form field, behind only password, so requiring it costs you messages. If you genuinely need it, make it clearly optional rather than required, or ask for it later once the person has replied.

How do you write a prompt to generate a contact form UI?

Describe the brief, not the vibe: the product and who it is for, the two or three fields you actually need, a context panel beside the form with the response time and other ways to reach you, labels above each field in a single column, inline validation and a success state, one Send message button with a reassurance line, one accent color, and a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works.

Can I use my own brand colors and copy?

Yes. Generate the layout first, then describe your accent color, typeface, headline and the fields you want in plain language and branch a variant. Every design comes back as real, editable code, so wiring in your form handler and brand happens in your own repo, not a rebuild from a picture. Stuck on something? Ping us and we will sort it out together.