Formatted Form

A Rails form builder that generates Twitter Bootstrap markup and helps keep your code clean.

Uses existing Rails helpers
Auto-generates labels
Generates horizontal, vertical and inline forms
Groups of checkboxes
Groups of radio buttons
Prevents double clicking on submit buttons

Installation

Add gem definition to your Gemfile and run bundle install:

gem 'formatted_form'

Require it in your CSS and JS manifest files:

//= require formatted_form

Usage (with haml)

Use formatted_form_for when you want to render a form with Bootstrap markup.

A sample user form

= formatted_form_for [:admin, @user] do |f|
  = f.text_field :name
  = f.number_field :age, nil, :in => 1...100
  = f.email_field :email, :prepend => '@'
  = f.phone_field :phone
  = f.password_field :password
  = f.password_field :password_confirmation
  = f.url_field :homepage
  = f.select :role, User::ROLES
  = f.time_zone_select :time_zone
  = f.check_box :reminder, :label => 'Send Daily Reminder?'
  = f.submit 'Save'

Add a class to the form or any field to change the way it is rendered.

= formatted_form_for @session_user, :url => login_path, :class => 'form-horizontal' do |f|
  = f.text_field :email
  = f.password_field :password
  = f.check_box :remember_me, :label => 'Remember me when I come back'
  = f.submit 'Log In'

Hide the label by passing :label => '' on any field. (Useful for inline search forms)

= formatted_form_for @search, :url => [:admin, :users], :html => {:method => :get, :class => 'form-search'} do |f|
  = f.text_field :name_equals, :label => 'Find by', :placeholder => 'Name'
  = f.select :role_equals, User::ROLES, :label => ''
  = f.submit 'Search', :class => 'btn-default'

(Example using MetaSearch helpers)

Checkboxes

A single checkbox:

= f.check_box :send_reminder

A group of checkboxes:

= f.check_box :colours, :values => [['Red', 1], ['Green', 2], ['Blue', 3]]

Use the :help_block option to show the label on the right side:

= f.check_box :approved, :help_block => 'Label on the Right'

Radio buttons

A single radio button:

= f.check_box :role, 'admin'

A group of radio buttons:

= f.radio_button :role, [['Admin', 1], ['Manager', 2], ['Editor', 3]]

Submit

If you add 'formatted_builder' to your Javascript manifest you'll be able to add an extra data-loading-text option to submit buttons. This will prevent accidental multiple form submits.

= f.submit 'Log In', :data => {:loading_text => 'Saving ...'}

More examples

Override the autogenerated label by using the :label option on any element.

= f.text_field :name, :label => 'Full name'

Use :append and :prepend on any field:

= f.text_field :price, :append => '.00'
= f.email_field :email, :prepend => '@'

Use :help_block to provide extra description to a fields:

= f.email_field :email, :help_block => 'Please enter your emails address'