form

The indispensable form controls

Ajax form





We use a free service BASIN which provide a Simple form backend for designers and developers, which you can collect submission data and track conversions with no backend coding required. check simple code below:

                
                    
                    <form accept-charset="UTF-8" action="https://usebasin.com/f/3587049dbc33" enctype="multipart/form-data" method="POST">

                      <label for="email-address">Email Address</label>
                      <input type="email" id="email" name="email" required>

                      <textarea rows="4" cols="50" name="comment" required>
                      </textarea>

                      <button type="submit">Submit</button>

                    </form>
                    
                
            

BASIN homepage




general



The following form controls classes are supported:

  • .label
  • .input
  • .textarea
  • .select
  • .checkbox
  • .radio
  • .button
  • .help

Each of them should be wrapped in a .control container.
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

This username is available

This email is invalid






Form field


The field container is a simple container for:

  • a text label
  • a form control
  • an optional helptext

This is a help text

This container allows form fields to be spaced consistently.





Form control


The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:

  • input
  • select
  • button
  • icon







With icons


You can append one of 2 modifiers on a control:

  • has-icons-left
  • and/or has-icons-right

You also need to add a modifier on the icon:

  • icon is-left if has-icons-left is used
  • icon is-right if has-icons-right is used

The size of the input will define the size of the icon container.





Form addons


If you want to attach controls together, use the has-addons modifier on the field container:

Transfer

Transfer

Transfer

Transfer





Horizontal form


If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

  • field-label for the side label
  • field-body for the input/select/textarea container

You can use is-grouped or has-addons for the child elements.

Do not enter the first zero

This field is required






Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 01
View more
Joo - Niche Multi-Purpose HTML Template
Burger Restaurant
View more
Joo - Niche Multi-Purpose HTML Template
Wedding
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 02
View more
Joo - Niche Multi-Purpose HTML Template
Barber Shop
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo
View more
Joo - Niche Multi-Purpose HTML Template
Restaurant 01
View more
Joo - Niche Multi-Purpose HTML Template
Wedding Planner
View more
Joo - Niche Multi-Purpose HTML Template active
Logistics Cargo 02
Joo - Niche Multi-Purpose HTML Template
Creative 02
View more
Joo - Niche Multi-Purpose HTML Template
Bridal Dresses
View more
Joo - Niche Multi-Purpose HTML Template
Coming Soon
View more
Joo - Niche Multi-Purpose HTML Template
Creative 03
View more