Beautiful Interative HTML Form Creator With JavaScript – FormaJS

Category: Form , Javascript | March 19, 2020
Author: krasenslavov
Views Total: 404 views
Official Page: Go to website
Last Update: March 19, 2020
License: MIT

Preview:

Beautiful Interative HTML Form Creator With JavaScript – FormaJS

Description:

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="(\[email protected]\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: ''
  
});

You Might Be Interested In:


Leave a Reply