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

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  ...
  <fieldset>
    <legend>Sign Up Today!</legend>

    <div class="clearfix">
      <label for="user_email">Email</label>
      <div class="input">
        <input id="user_email" name="user[email]" size="30" type="text" />
      </div>
    </div>
    <div class="clearfix">
      <label for="user_password">Password</label>
      <div class="input">
        <input id="user_password" name="user[password]" size="30" type="password" />
        <span class="help-block">Must be at least 6 characters long</span>
      </div>
    </div>
    <div class="clearfix">
      <label for="user_password_confirmation">Confirm Password</label>
      <div class="input">
        <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
      </div>
    </div>
    <div class="actions">
      <input class="btn primary" name="commit" type="submit" value="Sign Up" />
    </div>
  </fieldset>
</form>

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