riot-mini-form

riot-mini-form riot tag (mini-form)

mini-form Riot JS signup and subscription miniature form component

Demonstration

riot-mini-form

A mini-form is a form that displays one or two emboldened inputs per page in a wizard like format. It can be used for newsletter sign-up, web sign-up etc. This mini-form is designed to work with RiotJS and can be included in your project via npm and browserify or some other dependecy packaging tools.

Getting Started

1. Installation

npm install riot-mini-form

2. Examples

   
   require('riot-mini-form')
   

 
<mini-form 
    animate-first-item-style="flipInY" 
    animate-last-item-style="rubberBand" 
    animate-last-item-delay="2000"  
    restart-after="10000">
    
    <mini-form-item>
        <mini-form-button onclick="{ parent.parent.next }">Get Started</mini-form-button>
    </mini-form-item>
 
    <mini-form-item>
        <mini-form-input data-required field-name="name" placeholder="Your Name?"></mini-form-input>
    </mini-form-item>
 
    <mini-form-item>
        <mini-form-input data-valid-email field-name="email" placeholder="Your Email?"></mini-form-input>
    </mini-form-item>
 
    <mini-form-item>
        <mini-form-message >Thanks for signing up <em>{ data.name }</em>!</mini-form-message>
    </mini-form-item>
    
</mini-form>
 
<script>
    form = riot.mount('mini-form')[0];
    
    form.on('complete', function(data) {
        /* Now do something with the submitted form data
            data = {
                name: "???",
                email: "???"
            }
        */
    })
</script> 

3. Tags

Mini-form Tag

Mini form tag is to a mini-form-item what a ul or ol is to an li.

Mini-form Tag Attributes

• animate-first-item-style="{{className}}" eg. 'flipInX', 'bounce' Tells mini-form which animation to use when first displaying the first item. Can be any animate.css or custom animation class

    <mini-form animate-first-item-style="flipInX">...</mini-form>

• animate-last-item-style="{{className}}" eg. 'rubberBand', 'jello' Tells mini-form which animation to use after a specified delay on the last mini-form-item

    <mini-form animate-last-item-style="rubberBand">...</mini-form>

• animate-last-item-delay="{{milliseconds}}" eg. '2000' Milliseconds delay before animate-last-item animation is played

    <mini-form animate-last-item-delay="2000">...</mini-form>

• restart-after="{{milliseconds}}" eg. '10000', '0' Milliseconds delay before the form is remounted after completion. If '0' or no restart-after attribute is provided the form will not remount.

    <mini-form restart-after="6000">...</mini-form>

Mini-form-item Tag

Must be placed within a <mini-form>, represents a page to be displayed in the mini-form's sequence

Mini-form-item Tag Attributes

• none available

    <mini-form-item></mini-form-item>

Mini-form-input Tag Attributes

• field-name="{{string}}" eg. 'name', 'email' The name of the data field that will be collected by the mini-form all data is available on mini-form's data property for a field-name of 'name' the corresponding data property would be data.name

    <mini-form-input field-name="name"></mini-form-input>

• placeholder="{{string}}" eg. 'What is your name?' The text taht will appear in the placeholder and input label for a field-name of 'name' the corresponding data property would be data.name

    <mini-form-input field-name="name" placeholder="What is your name?"></mini-form-input>

• data-required The user must supply some value to proceed to the next mini-form-item

    <mini-form-input data-required ></mini-form-input>

• data-valid-email The user must supply a loosely valid email value to proceed to the next mini-form-item

    <mini-form-input data-valid-email ></mini-form-input>

Submitting form data

Form data can be submitted once the form has been populated by listening to the 'complete' event however mini-form does not provide a method to submit form data itself

Copyright and license

Copyright (c) 2015 Anycode [e-mail]

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.