Floating Label Form is a free lead and contact section where each label sits inside its field and glides up when you click or type, a pattern popularised by Material Design. Here it is done with CSS only: the input has a blank placeholder, and the label moves with the :placeholder-shown and :focus selectors, so there is no script to load and nothing to break.

Beside the form, a list of promises

On the left the section has a heading, short text and a checklist for what the visitor can expect (a reply within a day, no sales pressure, a free call). Promises near a form lift completion because they answer “what happens after I press send?”. The list is one line per promise and you can empty it.

Fields and sending

The form asks for name, work email, an optional company and phone, a message and an optional opt-in for updates. Empty a label and that field is removed. Every form posts to the address you paste into "Form URL" (Formspree, Basin, Getform or your own server), shows a success message, shows an error message when something fails and contains a hidden spam-trap field. Without JavaScript it is an ordinary form post. For a classic label-above layout see the Centered Contact Form.

Accessible floating labels

Each label is wrapped around its input, so clicking the label focuses the field and screen readers announce it. The floated label is shrunk, not hidden, and the focus ring and error colours follow your theme. Because the label stays visible after typing, people never forget what a field is for.