Skip to content

Minimal Contact Form with Animated Underline Inputs

Pure CSS minimal contact form with floating labels, underlines that sweep in on focus, a character counter and accessible inline validation.

Also known as: contact form with floating labels, minimal contact form, underline input form, animated input underline

Pure CSS Contact Forms Responsive #animation #contact-form #form #input #responsive #validation

Minimal Contact Form with Animated Underline Inputs live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

A minimal contact form in pure CSS and vanilla JavaScript: borderless inputs sit on a thin rule, and a colored underline sweeps in from the left when a field gets focus while its label floats up. Use it on portfolio sites, studio pages and clean landing pages where a heavy boxed form would feel out of place.

How it works

The root section.uc-contact is a two-column grid from 900px: the .uc-intro column holds the eyebrow, a serif headline, a lead paragraph and the .uc-info list with inline SVG icons; the .uc-form column holds the fields. Name and email share the .uc-row grid, which becomes two columns from 640px.

Each .uc-field contains an .uc-input (or the .uc-textarea), its .uc-label, an empty .uc-line span and an .uc-error paragraph. Inputs cannot have pseudo-elements, so the underline is the .uc-line sibling: it starts at transform: scaleX(0) with transform-origin: left center and grows to full width through .uc-input:focus ~ .uc-line. The labels use the placeholder=" " trick: :not(:placeholder-shown) keeps a label raised and the line drawn in ink once a field has content, so filled fields stay readable without JavaScript.

The script runs on DOMContentLoaded for every .uc-contact. It updates the .uc-count-value character counter on input, checks a field on blur and on submit with the browser's own checkValidity(), sets aria-invalid="true" and copies the text from the error's data-message attribute. A .uc-input[aria-invalid="true"] rule turns the line and label red. A valid submit is simulated with a 1.2 second timeout that disables the button, then resets the form and shows a success message.

Customization

  • --uc-accent on .uc-contact: the color of the focus underline, the floating label and the eyebrow.
  • --uc-line-height: the thickness of the animated underline, e.g. 3px for a bolder line.
  • --uc-speed: the duration of the underline and label animation.
  • --uc-filled: the line color under fields that already have content; set it to transparent to show the line only on focus.
  • transform-origin: left center in .uc-line: change it to center so the underline grows from the middle out.
  • data-message on each .uc-error: the validation text shown for that field.
  • maxlength="500" on #uc-message: the limit; update the / 500 text in .uc-count with it.
  • The window.setTimeout in script.js: replace it with a fetch() call to your form endpoint.

Use cases

  • Portfolio sites: borderless fields with an underline that sweeps in on focus keep the page light
  • Studio pages: a serif headline and contact info list sit beside the form
  • Clean landing pages: floating labels and a character counter guide the message field
  • Client inquiries: inline validation messages show next to each field and a success message follows

Accessibility

Every input has a real label, and aria-describedby links it to its error message (and the counter for the message field). Invalid fields get aria-invalid, the first one receives focus on submit, and the .uc-status line is a polite live region for the result. The submit button shows aria-busy while sending and has a visible :focus-visible outline. Decorative icons are aria-hidden. With prefers-reduced-motion: reduce the label, underline and button transitions are switched off.

Usage notes

The fields use fixed ids such as uc-name; give them unique ids if you place two forms on one page. The script itself handles every .uc-contact separately.

Minimal Contact Form with Animated Underline Inputs at a glance

Framework
Pure CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
None
Layout
Responsive, works on mobile
Category
Contact Forms
License
Free for personal and commercial use

Questions about this template

Can I use the Minimal Contact Form with Animated Underline Inputs code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Minimal Contact Form with Animated Underline Inputs – Pure CSS contact forms component screenshot
Minimal Contact Form with Animated Underline Inputs · Pure CSS Contact Forms

More Contact Forms

Contact Form Card – Tailwind CSS contact forms preview

Contact Form Card

Tailwind CSS contact form card with a topic select, live character counter and meter, inline validation and a simulated sending state.

Tailwind CSS Contact Forms
Contact Form with Validation – Bootstrap 5 contact forms preview

Contact Form with Validation

Bootstrap 5 contact form with floating labels, client-side validation, a character counter, a success message and a contact details panel.

Bootstrap 5 Contact Forms