Form

What this component covers

This page describes the general form workflow: fields and placeholders, focus states, validation rules, submit modes and related helpers. Specific form elements have their own docs (Select, Checkbox/Radio, Input, Rating, Quantity, Range, etc.).

Component location

Files are located in src/components/form/form. Inside you’ll find:

JS files with form logic and settings.
HTML example snippet.
SCSS file for styling form states and errors.

Basic usage

Add data-anim-form to the form element. Then use standard HTML inputs. Validation is enabled via the required attribute.

Form — minimal example


<form data-anim-form method="POST" action="...">
	<input
		required
		type="email"
		name="form[email]"
		data-anim-form-errtext="Error"
		placeholder="E-mail"
		class="input">
	<button type="submit" class="button">Send</button>
</form>

Fields: focus classes and instant validation

The component can automatically manage focus and error states.

Focus classes: on focus, the field and its direct parent receive --form-focus. To disable it for a specific field, add data-anim-form-nofocus.
Validate on blur: to validate a field immediately when it loses focus, add data-anim-form-validatenow.
When a field receives focus again, validation errors and error message nodes are removed automatically.

Field helpers


<input
	required
	type="text"
	name="form[name]"
	data-anim-form-validatenow
	placeholder="Your name">

<input
	required
	type="text"
	name="form[no_focus]"
	data-anim-form-nofocus
	placeholder="No focus classes">

Validation

To include a field into validation, add the required attribute. Validation runs on submit (and on blur if data-anim-form-validatenow is used).

Extra validation presets can be enabled by input type. For example, type="email" validates an e-mail format.

Error state

If a field is invalid, the field and its parent receive --form-error. You can also provide a custom error text using data-anim-form-errtext.

Custom error text


<input
	required
	type="email"
	name="form[email]"
	data-anim-form-errtext="E-mail error"
	placeholder="E-mail">

To disable validation for a specific form, add data-anim-form-novalidate.

Disable validation for a form


<form data-anim-form data-anim-form-novalidate action="...">
	...
</form>

Submit modes

The template supports several form submit workflows:

Standard HTML submit (default): after successful validation, the browser submits the form to action with method and reloads the page.
AJAX submit: send the form via AJAX without page reload. After success, the form resets.
Dev simulation: no request is sent, page does not reload, and the form resets. Useful for demos and testing success behaviors.

To enable AJAX mode, set data-anim-form="ajax". For dev simulation, use data-anim-form="dev".

AJAX / Dev modes


<form data-anim-form="ajax" class="form" method="POST" action="...">
	...
</form>

<form data-anim-form="dev" class="form" method="POST" action="...">
	...
</form>

Helpers

Scroll to first error

For long forms you can auto-scroll to the first invalid field. Add data-anim-form-gotoerr to the form.

Scroll to error


<form data-anim-form-gotoerr class="form" action="...">
	...
</form>

Popup after submit

In ajax or dev modes you can show a popup after successful submit. Add data-anim-form-popup and set the popup name as the value. The Popup component must be included on the page.

Popup on success


<form
	data-anim-form="ajax"
	data-anim-form-popup="form-message"
	class="form"
	action="...">
	...
</form>

Events

After each successful submit, the component fires the formSent event. You can listen to it anywhere in your code:

Listen to formSent


document.addEventListener("formSent", function (e) {
	// Current form element
	const currentForm = e.detail.form
})

Download

Speed up form development with built-in validation, submit modes and UX helpers. Download the template and start shipping faster.

Download Animmaster Vite Template Save your time — start now

Component: Form Fields, focus states, validation and submit modes