Is it bad practice to use placeholders instead of labels?

Generally yes, and this form is the narrow exception: three fields whose names are obvious, all visible at once. Anything longer or less obvious needs real labels — screen readers, autofill and anyone who paused mid-typing all rely on them.

Can I use a sans-serif font instead?

Change the font-family on body and nothing else needs touching. The serif is what makes this feel editorial rather than unfinished, but the layout works either way.

How do I add a fourth field without ruining the look?

Keep the same 28px rhythm and resist adding a border. If you need a select, style it with the same bottom border and remove its default arrow with appearance: none, then add your own.

Does a minimal contact form convert worse?

Fewer fields consistently convert better; fewer visual affordances do not. The gain here comes from having only three fields, not from removing the borders — so keep the field count and style it however you like.

Minimal contact form

No boxes, no shadows, no accent colour. Fields are underlines, the button is a piece of text with a rule under it, and the space between things is doing the work that borders normally do. Around thirty lines of CSS in total.

Live preview: this is the HTML and CSS below, rendered as-is.

Replace YOUR_FORM_ID with a form of your own and this sends to your inbox.

Create your form

contact.html

<form class="bare" action="https://submit.formpost.ai/YOUR_FORM_ID" method="POST">
  <h2>Say hello</h2>

  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" rows="3" placeholder="Message" required></textarea>

  <button type="submit">Send &rarr;</button>
</form>

contact.css

body {
  margin: 0;
  padding: 48px 24px;
  background: #fff;
  font-family: Georgia, "Times New Roman", serif;
  color: #1a1a1a;
}

.bare {
  max-width: 380px;
  margin: 0 auto;
}

.bare h2 {
  margin: 0 0 32px;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.bare input,
.bare textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-bottom: 28px;
  padding: 0 0 8px;
  font: inherit;
  color: #1a1a1a;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 0;
  transition: border-color 0.2s;
}

.bare input::placeholder,
.bare textarea::placeholder {
  color: #a3a3a3;
}

.bare input:focus,
.bare textarea:focus {
  border-bottom-color: #1a1a1a;
  outline: none;
}

.bare textarea {
  resize: none;
}

.bare button {
  padding: 0;
  font: inherit;
  font-size: 16px;
  color: #1a1a1a;
  background: none;
  border: 0;
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
}

.bare button:hover {
  opacity: 0.55;
}

Minimal has a cost — pay it deliberately

Stripping the boxes off inputs removes the strongest signal that something is typeable. This design gets away with it because the underline runs the full width of the container and the placeholders name the fields, which together still read as a form. Take away one of those two and it stops reading as one.

Placeholders are standing in for labels here, and that is a genuine trade-off rather than an oversight. Once somebody starts typing, the field name is gone. If the form ever grows past three fields, or any field needs explaining, put real labels back.

The whole trick, in four properties

border: 0;
border-bottom: 1px solid #d4d4d4;
border-radius: 0;
background: transparent;

border-radius: 0 matters more than it looks. Several browsers apply a default radius to inputs, and a rounded corner on an element with only a bottom border produces a small tick at each end.

Spacing is the design

Every field carries 28px of bottom margin and the heading carries 32px. In a design with no borders, those numbers are the only thing grouping and separating anything — change them and you change the whole feel far more than swapping the typeface would.

Contrast check before you ship

Minimal designs fail contrast more often than any other kind, because grey-on-white looks refined in a mockup and disappears on a laptop screen in daylight. The placeholder grey here is the lightest thing on the page; if you lighten it further, check it against WCAG AA (4.5:1) first.

The focus style darkens the underline to full black. It is subtle by design but it is there — do not remove it to keep things clean.

Questions about this contact form

Is it bad practice to use placeholders instead of labels?: Generally yes, and this form is the narrow exception: three fields whose names are obvious, all visible at once. Anything longer or less obvious needs real labels — screen readers, autofill and anyone who paused mid-typing all rely on them.
Can I use a sans-serif font instead?: Change the font-family on body and nothing else needs touching. The serif is what makes this feel editorial rather than unfinished, but the layout works either way.
How do I add a fourth field without ruining the look?: Keep the same 28px rhythm and resist adding a border. If you need a select, style it with the same bottom border and remove its default arrow with appearance: none, then add your own.
Does a minimal contact form convert worse?: Fewer fields consistently convert better; fewer visual affordances do not. The gain here comes from having only three fields, not from removing the borders — so keep the field count and style it however you like.