You can download the latest /dist code directly from our GitHub repository v0.0.4-alpha (latest).

Don't forget to give us a ⭐ if you think FormaJS is worthwhile and we should continue improving on it.

Register Form (real-world example)

Generic real-world registration form.

With a single line of CSS you can convert the form into a multi-stage input form. Prompt only one field at a time to the user, moving to the next by using the tab key.

All this gives the end-user a better UX and adds some additional interactivity to your forms.

Once all the fields are completed with valid data the button is enabled automatically for submission.

Register

CSS

.forma-register .forma-wrap:not(.forma-open) {
  display: none;
}

Using a custom CSS stylesheet build on top of the forma-boilerplate.css template. Take a look at the code on our GitHub repository.

HTML

<form class="forma forma-register">
  <input data-label="Email Address" type="email" name="email-address" 
      pattern="(\S+@\S+\.\S+)"
      title="Email address must contain digits, letters, and @_. characters." required />
  <input data-label="Full Name" type="text" name="first-name" 
      pattern="[a-zA-Z]{3,32}"
      title="Full name must contain letters only and cannot exceed 32 characters." required />
  <input data-label="Username" type="text" name="username" 
    pattern="[a-z]{3,32}" 
    title="Username must be lowercase between 3 and 32 characters." required />
  <input data-label="Password" type="password" name="password" 
    pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}" 
    title="Password must have minimum 8 characters, at least one letter and one number." required />
  <input data-label="Confirm Password" type="password" name="confirm-password" 
    pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}" 
    title="Password must have minimum 8 characters, at least one letter and one number." required />
  <button type="submit">Register</button>
</form>

JavaScript

forma({
  container: '.forma-register',
  auto: true,
  submit: true,
  tab: true
});