Home - FormaJS - 🎉 Create dynamic and interactive forms with minimal markup and better UX.

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.

FormaJS*

FormaJS is easy to setup, customize and at the same time is pretty flexible and robust and can be implemented in many different cases and scenarios.

It uses the minimal markup approach to code your forms and has numerous starting points when it comes to styling and customization.

Basic Usage

<head>
  <link href="path/to/css/forma.css" rel="stylesheet" />
</head>
  ...
  <form class="forma">
    <input data-label="Email Address" 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" />
    <textarea data-label="Message" rows="5" name="message"></textarea>
    <button type="submit">Send</button>
  </form>
  ...
  <script src="path/to/js/forma.min.js"></script>
  <script>forma();</script>
</body>

There are few steps you need to keep in mind when you create your forms and setup the library.

Be sure to include any of the CSS templates from /dist/css in your document <head>.
Make sure that you have added the script /dist/js/forma.min.js near the end of your document just before the closing </body> tag.
Add your form markup anywhere within the document body by using the minimal markup approach.
Initialize the library and specify any additional settings with the forma() function.
Additionally apply style and customize your form by extending the pre-built CSS templates or create your own using SASS/SCSS templates located inside the /src/scss folder.

Starter Template

Copy-paste the markup below as your starting point.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>FormaJS - Quickly and easily create dynamic and interactive forms with a better UX.</title>
  <!-- Include FormaJS stylesheet template. -->
  <link href="path/to/css/forma.css" rel="stylesheet" />
</head>
<body>
  <!-- Add your form structure; use minimal markup approach; class="forma" is recommended. -->
  <form class="forma">
    <input data-label="Name" type="text" name="name" required />
    <button type="submit">Submit</button>
  </form>
  <!-- Include FormaJS library main script. -->
  <script src="path/to/js/forma.min.js"></script>
  <script>
    forma();
  </script>
</body>
</html>

Setup/Installation

To setup the FormaJS libary you need to link up the stylesheet template inside your document head; add the main script file near the end of your document, and initialize the library afterwards.

There are a few different ways to do that.

The Latest /dist Release

Download the latest dist files from our GitHub repository and link up the stylesheet template and main library script manually.

CDN

Load up all FormaJS pre-built stylesheet templates and main library script from a CDN.

jsdelivr

<!-- FormaJS plugin script. -->
<script src="https://cdn.jsdelivr.net/npm/aformajs/dist/js/forma.min.js"></script>
<!-- FormaJS stylesheet variation. -->
<link href="https://cdn.jsdelivr.net/npm/aformajs/dist/css/forma.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/aformajs/dist/css/forma-barebone.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/aformajs/dist/css/forma-base.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/aformajs/dist/css/forma-boilerplate.css" rel="stylesheet" />

unpkg

<!-- FormaJS plugin script. -->
<script src="https://unpkg.com/aformajs/dist/js/forma.min.js"></script>
<!-- FormaJS stylesheet variation. -->
<link href="https://unpkg.com/aformajs/dist/css/forma.css" rel="stylesheet" />
<link href="https://unpkg.com/aformajs/dist/css/forma-barebone.css" rel="stylesheet" />
<link href="https://unpkg.com/aformajs/dist/css/forma-base.css" rel="stylesheet" />
<link href="https://unpkg.com/aformajs/dist/css/forma-boilerplate.css" rel="stylesheet" />

NPM

Install FormaJS as an NPM package and then include the files into your project. Check out the NPM section for more details. The package is called aformajs.

npm install aformajs --save

Note: There are a couple of SASS development dependencies.

The source /src (for development only)

Head over to our GitHub repository and download the master. Then look inside the /src folder where you will find all the development CSS, SCSS, and JavaScript files.

Form Structure (minimal markup approach)

Building and creating your actual form is easy and quick. We use the minimal markup approach and all you need to add are the form elements you want to use, the rest is generated and handled by the library.

Below is an example of the input/output of your form markup.

Input (what you write)

 <form class="forma">
    <input data-label="Email Address" 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" />
    <textarea data-label="Message" rows="5" name="message"></textarea>
    <button type="submit">Send</button>
  </form>

Ouput (what is generated by the library)

<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 Address" 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>
    <div class="forma-wrap forma-open">
      <label for="message" class="">
        <span class="forma-label">
          Message 
          <div class="forma-description"></div>
          <div class="forma-input"></div>
          <div class="forma-message"></div>
        </span>
        <div class="forma-fieldset">
          <textarea data-label="Message" rows="5" name="message" 
            id="message" class="forma-control" placeholder=""></textarea>
        </div>
      </label>
    </div>
    <button type="submit">Send</button>
  </fieldset>
</form>

Note: You can preview the above example in our examples secion here.

Custom Settings

During the initialization of your form you can specify several different settings and additionaly customize its look and feel.

Below are the default values for all the settings with detailed description for each one in the table underneath.

forma({
  container: '.forma',
  tab: false,
  show: false,
  auto: false,
  manual: false,
  submit: false,
  prefix: 'Enter',
  suffix: '...',
  support: [],
  struct: {
    title: '',
    abbr: false,
    wrapper: 'div' // div, section, ul>li
  }, 
  integrate: 'forma' // bootstrap, forma
});

Name	Description	Type	Default Value
container	Form target Usually defined with class attribute but you can also use id or data attributes as well. (useful when you have multiple forms on the same page)	`string`	'.forma'
tab	Navigate between rows (fields) with tab key Tab navigation will make visible only the current row (field) and turn off the rest.	`boolean`	false
show	Auto-open all form rows (fields) on load By default only 1st field is opened and focused on page load.	`boolean`	false
auto	Display additional auto-generated text Show additionally auto-generated description and placeholder text, for each field, using the label text and specified `prefix and suffix`.	`boolean`	false
manual	Add an open/close state button for each form row (field) By default to navigate between fields the user is required to use the tab key with this setting turned on an alternative way will added to access form elements.	`boolean`	false
submit	Disable the submit button Disable the submit button until all validations have passed.	`boolean`	false
prefix	Text added before the auto-generated text Prepend text when you auto-generate additional text.	`string`	Enter
suffix	Text added after the auto-generated text Append text when you auto-generate additional text	`string`	...
support	Add additional element support Must be of an array type. You can add other form elements by passing tag name + type. Currently supported elements: input select textarea button fieldset input[type="text"] input[type="email"] input[type="number"] input[type="url"] input[type="date"] input[type="password"] select[type="select-one"] textarea[type="textarea"] button[type="submit"] fieldset[type="fieldset"]	`array`	[]
struct	Change the structure of your forms. Use different tags to build you forms; add abbr after lables and title into the fieldset legend. Use can use either: `div, section or ul>li for wrapper`	`object`	{title: '', abbr: false, wrapper: 'div'}
integrate	Integrate with 3rd party frameworks Have the ability to style and customize your forms by using third party frameworks. Currenlty we only support the default 'forma' and 'bootstrap' (which is still in the works)	`string`	'forma'

Note: You will get a console.error message if any of the settings doesn't meet the type criteria.

Customization and Styling

There are different ways you can approach your form styling and customization. We have tried to provide a few staring points based on your coding level, abilities, and needs.

The easiest way, is to use the pre-built stylesheet files generated from the SCSS templates and just include the CDN links inside your document head tag.

Additionally, for some basic customization you can download and save the stylesheet CSS templates locally and edit the :root values and add any of the other CSS rules.

Below you can see the default values for :root included in all pre-built CSS templates (these can be found inside the repo /src/css folder):

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
:root {
  --font-mono: 400 normal 16px/1.6 'Monaco', 'Consolas', 'Andale Mono', 'Ubuntu Mono', monospace;
  --font-google: 400 normal 16px/1.6 'Source Sans Pro', sans-serif;
  --primary: #d65bd1;
  --secondary: #845ec2;
  --error: #fc4444;
  --success: #008f7a;
  --warning: #ff9671;
  --info: #0081cf;
  --white: 250, 250, 250; /* #fafafa */
  --black: 25, 25, 25; /* #191919 */
  --space: 1rem;
}

Note: Take a look at all the stylesheet files inside /src/css, there are several different staring points: base, barebone, boilerplate and forma complete.

Create custom CSS from template

As I mentioned above inside the repo /src/css folder you can find a few CSS template files. Each one can be used as a different starting point.

For example, if you only need all the target classes without any values you may want to use the /src/css/forma-boilerplate.css template. Go ahead and preview the file code inside the GitHub repository.

Extending CSS templates

Extending the CSS templates and completely changing the form structure is very easy as well.

In one of the examples we have, called Register Form, you can see how with only one CSS rule you can make you form turn into a one at time field form and then you can switch between form fields with the tab key.

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

Another example would the 2 Column Layout found example section.

Create your own stylesheet from scratch

This is the most advanced and time-consuming method to style and customize your forms. However, if you feel comfortable with CSS and need fully custom solution you can create your own fully customized stylesheet.

Note: Take a look at both /src/scss/_complete.css and /src/scss/_forma-boilerplate.css first; there are some classes added dynamically with JavaScript you may want target as well.

Client-side Validation

There are two types of client-side validation output:

built-it validation messages
custom validation messages

You can add client-side form validation by specifying the element type or by adding additional attributes.

For example, <input type="email" minlength="5" />. Read more about it at the MDN Web Docs.

Some of the common attributes to invoke client-side validation messages are:

required
minlength or maxlength
min, max, and step (for numbers)
and others...

Built-in Validation Messages

These come with the HTML, are specified within your browser and cannot be modified.

For example, if you have <input type="email" /> you will be required to enter a valid email address before you continue with the form submission. If you don't have the '@' symbol the auto-generated message will be Please include an '@' in the email address. '' is missing an '@'.

Example: Form with built-in client-side validations can be found here.

Custom Validation Messages

For real-world forms the built-in checks aren't enough so if you want to customize your client-side validation messages and strengthen the validation logic you would need to use some regular expression magic.

To do that you need to add the pattern and title attributes to your form element. More information on this topic can be found at the MDN Web Docs.

<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="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 />

Example: Form with custom client-side validations can be found here.

Hint: Not good with Regexp? Head over to StackOverflow; 99% of the use cases can be found there.

Contribute

You can contribute in several different ways.

Issues: Provide a detailed report of any bugs you encounter and open an issues on GitHub.

Documentation: If you'd like to fix a typo or improve the docs, you can fork the project (all the documentation is found inside the /docs folder), make you changes, and submit a pull request.

Code: Make a fix and submit it as a pull request (all development code is found inside the /src folder).

License

Code released under the MIT License.

* This project is still in alpha; use it for live or production environments with caution.

FormaJS*

Basic Usage

Starter Template

Setup/Installation

The Latest /dist Release

CDN

jsdelivr

unpkg

NPM

The source /src (for development only)

Form Structure (minimal markup approach)

Input (what you write)

Ouput (what is generated by the library)

Custom Settings

Form target

Navigate between rows (fields) with tab key

Auto-open all form rows (fields) on load

Display additional auto-generated text

Add an open/close state button for each form row (field)

Disable the submit button

Text added before the auto-generated text

Text added after the auto-generated text

Add additional element support

Change the structure of your forms.

Integrate with 3rd party frameworks