Beautiful Interative HTML Form Creator With JavaScript – FormaJS

FormaJS is a Vanilla JavaScript form creator library to create a customizable, interactive, pretty nice HTML form from minimal form markup.

Features:

• Switches between form fields with Tab key.
• Auto shows or hides form fields on page load.
• Auto generates description and placeholder text for each field.
• Supports native HTML5 Form validation attributes with build-in or custom validation messages.
• Disable the Submit button when the form is invalid.
• Easy to create your own form styles using CSS.

Basic usage:

1. Download and load the FormaJS’ files in the document.

<!-- With All Styles -->
<link href="dist/css/forma.css" rel="stylesheet" />
<!-- With Bare-bones Styles -->
<link href="dist/to/css/forma-barebone.css" rel="stylesheet" />
<!-- With Basic Styles -->
<link href="dist/to/css/forma-base.css" rel="stylesheet" />
<!-- Boilerplate CSS -->
<link href="dist/to/css/forma-boilerplate.css" rel="stylesheet" />

<script src="dist/js/forma.min.js"></script>

2. Code the HTML form.

<form class="forma">
  <input data-label="Email" type="email" name="email-address" />
  <input data-label="First Name" type="text" name="first-name" />
  <input data-label="Last Name" type="text" name="last-name" />
  <button type="submit">Submit</button>
</form>

3. Initialize the library to transform the form into an interactive, well-designed form as follows:

forma();
// =>

<form class="forma">
  <fieldset class="forma">
    <legend></legend>
    <div class="forma-wrap forma-open">
      <label for="email-address" class="">
        <span class="forma-label forma-invalid">
          Email Address 
          <div class="forma-description"></div>
          <div class="forma-input"></div>
          <div class="forma-message">Please fill in this field.</div>
        </span>
        <div class="forma-fieldset">
          <input data-label="Email" type="email" name="email-address" required="" 
            id="email-address" class="forma-control forma-invalid" placeholder="" />
        </div>
      </label>
    </div>
    <div class="forma-wrap forma-open">
      <label for="first-name" class="">
        <span class="forma-label">
          First Name 
          <div class="forma-description"></div>
          <div class="forma-input"></div>
          <div class="forma-message"></div>
        </span>
        <div class="forma-fieldset">
          <input data-label="First Name" type="text" name="first-name" 
            id="first-name" class="forma-control" placeholder="" />
        </div>
      </label>
    </div>
    <div class="forma-wrap forma-open">
      <label for="last-name" class="">
        <span class="forma-label">
          Last Name 
          <div class="forma-description"></div>
          <div class="forma-input"></div>
          <div class="forma-message"></div>
        </span>
        <div class="forma-fieldset">
          <input data-label="Last Name" type="text" name="last-name" 
            id="last-name" class="forma-control" placeholder="" />
        </div>
      </label>
    </div>
    <button type="submit">Submit</button>
  </fieldset>
</form>

4. Customize the validation rules & messages.

<input data-label="Email" 
       type="email" name="email-address" 
       pattern="(\S+@\S+\.\S+)"
       title="Email address must contain digits, letters, and @_. characters." required />

5. Configuration options to customize the HTML form.

forma({
  // default selector
  container: '.forma',
  // enables Tab key to switch between fields
  tab: false,
  // shows all form fields on page load
  show: false,
  // shows auto-generated descriptsions and placeholders
  auto: false,
  // adds open/close buttons to form rows
  manual: false,
  // disables Submit button when the form is invalid
  submit: false,
  // text added before the auto-generated text
  prefix: 'Enter',
  // text added after the auto-generated text
  suffix: '...',
  // an array of supported elements.
  // e.g. ['select', 'input']
  support: [], 
  // use other HTML tags to build you forms
  // e.g. {title: '', abbr: false, wrap}
  struct: {},
  // integrate with 3rd party frameworks
  // e.g. 'bootstrap'
  integrate: ''
  
});