form-bootstrap

This is a simple extraction from a personal project that provides a Rails Form Builder intended for use with Twitter Bootstrap.

This has been extracted from a Rails 3.1 project and expects that you already have bootstrap setup in your project. I use less-rails-bootstrap.

Requirements

Ruby 1.9+
Rails 3.1+
Twitter Bootstrap

Usage

Add the gem to your Gemfile

gem 'form-bootstrap'

Install the gem

bundle

Example Form

<%= form_bootstrap_for(@user, help: :block) do |f| %>
  <fieldset>
    <legend>Sign Up Today!</legend>
    <%= f.alert_message "Please fix the errors below." %>

    <%= f.text_field :email, autofocus: :true %>
    <%= f.password_field :password, help: 'Must be at least 6 characters long' %>
    <%= f.password_field :password_confirmation, label: 'Confirm Password' %>

    <%= f.actions do %>
      <%= f.primary 'Sign Up' %>
    <% end %>
  </fieldset>
<% end %>

Example Form

Example HTML


  ...
  
    Sign Up Today!

    
      Email
      
        
      
    
    
      Password
      
        
        Must be at least 6 characters long
      
    
    
      Confirm Password

Errors

When a validation error is triggered, the field will be outlined and the error will be displayed next to the field. Rails normally wraps fields in a div (field_with_errors), but this behavior is suppressed when form_bootstrap_for is called.

Example form with errors

Options

Stacked Forms

To position your labels on top of your fields, just add the .form-stacked class to your form:

<%= form_bootstrap_for @user, html: { class: 'form-stacked' } do |f| %>

By default, help (and error) messages will be placed to the right of the input field. If you want to place them under the input field, pass the option help: :block:

<%= form_bootstrap_for @user, help: :block do |f| %>

Credits

Inspired by Ryan Bates' Form Builder Railscast