FormaJS*
Quickly and easily create dynamic and interactive forms with a better end-user experience.
FormaJS lets you customize and style your forms in numerous different ways and at the same time gives you the base and structure that will save you time and effort while building form prototypes.
There are few different ways to use and load up the script and stylesheet templates. Take a look at main website for complete documentation with usage, features and examples.
Quick Start
Download the master (or the latest release). Minified version of the script with all the stylesheet templates can be found under /dist.
- Copy-paste the
<link>into your HTML document<head>and add the path to the startup stylesheet template you plan to use (found inside the/dist/cssfolder).
<link href="path/to/css/forma.css" rel="stylesheet" />- Build your form anywhere inside the
<body>of you document. The example below shows up the minimum required attributes for your form elements.
<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>All you need to add are the form elements; the actual form structure will be auto-generated by the script.
- Place the following
<script>'s near the end of your document, right before the closing</body>tag. And you are all set up.
<script src="path/to/js/forma.min.js"></script>
<script>forma();</script>Visit our main website to learn more about customization, client-side validations, custom settings and a whole lot more.
Documentation
- Basic Usage
- Installation
- Form Structure
- Custom Settings
- Customization and Styling
- Client-side Validation
- CSS
- SASS/SCSS
- NPM
- Examples
- Sandbox
Contribute
Found a bug or want to propose some improvements or fixes to the documentation? Vist our website and see all the different ways you can contribute to this project.
License
(c) Krasen Slavov | Code released under the MIT License.
* This project is still in alpha; use it for live or production environments with caution.