No commit activity in last 3 years
No release in over 3 years
A form helper with a 'Simple Form'-like interface, that supports Bootstrap 3
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 1.5
>= 0
>= 3.0.0

Runtime

>= 4
 Project Readme

Bootstrap 3 Form Builder

CiecleCI Build Status

  • I'm a fan of Boootstrap
  • I'm a fan of Simple Form
  • Bootstrap 3 was released in August 2013, but as of February 2014 Simple Form has yet to support it.
  • If your forms are relatively simple, this gem can be used as a stop-gap measure until Simple Form supports Bootstrap 3.

People have been working on Bootstrap 3 support for Simple Form, for 7 months now but as yet it has failed to see the light of day.

I think the reason for this may be that while Simple Form is configurable using an initializer, Bootstrap 3 requires wrapping something in a new way, which is going to require a new feature in the base Simple Form framework.

SimpleForm is a featurefull generic framework that will layout forms for multiple different CSS frameworks (right now Bootstrap 2.3 and Zurb Foundation). The challenge with this is that greater flexibility incurs greater complexity in implementation. I believe the continued non-appearance of Simple Form Bootstrap 3 support reflects the difficulty people have in working in this more complex framework, and getting the results integrated and released.

This goal of this gem is to:

  • Implement a subset of the Simple Form API
  • Layout forms for Bootstrap 3 only
  • Be easier to maintain

Installation

Add this line to your application's Gemfile:

gem 'simple_bootstrap_form'

And then execute:

$ bundle

Or install it yourself as:

$ gem install simple_bootstrap_form

Usage

Replace calls to:

simple_form_for ...

with

bootstrap_form_for ...

For example:

= bootstrap_form_for @article_form do |f|
  = f.input :title
  = f.input :published_at
  = f.input :visible
  = f.input :body, rows: 20
  = f.input :topic_names, label: 'Tags'

Generates (spaces added for clarity):

<form accept-charset="UTF-8" action="/articles" class="form-horizontal"
      id="new_article" method="post" role="form">
  <div style="display:none"><input name="utf8" type="hidden" value=""><input
    name="authenticity_token" type="hidden"
    value="NYiknMBfTGqphSHozhG8NMCGQeWbRY6hzs2a0+gaxJw="></div>

  <div class="form-group article_title_group"><label
    class="control-label col-sm-3" for="article_title"><abbr
    title="required">*</abbr> Title</label>

    <div class="col-sm-6"><input class="form-control" id="article_title"
                                 name="article[title]" placeholder="Title"
                                 required="required" type="text"></div>
  </div>

  <div class="form-group article_published_at_group"><label
    class="control-label col-sm-3" for="article_published_at">Published
    at</label>
    <div class="col-sm-6">
      <div class="input-group"><input class="form-control"
                                      id="article_published_at"
                                      name="article[published_at]"
                                      placeholder="Published at"
                                      type="datetime">

        <div class="input-group-addon"><span
          class="glyphicon glyphicon-calendar"
          data-activate-datepicker="#article_published_at"></span></div>
      </div>
    </div>
  </div>

  <div class="form-group article_visible_group"><label
    class="control-label col-sm-3" for="article_visible">Visible</label>

    <div class="col-sm-6"><input name="article[visible]" type="hidden"
                                 value="0"><input id="article_visible"
                                                  name="article[visible]"
                                                  type="checkbox" value="1">
    </div>
  </div>

  <div class="form-group article_body_group"><label
    class="control-label col-sm-3" for="article_body">Body</label>

    <div class="col-sm-6"><textarea class="form-control" id="article_body"
                                    name="article[body]" placeholder="Body"
                                    rows="20"></textarea></div>
  </div>

  <div class="form-group article_topic_names_group"><label
    class="control-label col-sm-3" for="article_topic_names">Tags</label>

    <div class="col-sm-6"><input class="form-control" id="article_topic_names"
                                 label="Tags" name="article[topic_names]"
                                 placeholder="Topic names" type="text" value="">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-2">
      <input class="btn btn-primary" name="commit" type="submit" value="Save">
    </div>
  </div>
</form>

Input Options

Option Meaning Default
:as Override column type. Use on of the types from the Supported Field Types table below.
:label Set custom label. Humanized and titlized attribute name.
:placeholder Set custom placeholder. Humanized and titlized attribute name.
:group_class For ease of testing in Capybara, a class is added to each form-group div, constructed from the object name and attribute name, e.g. article_title_group. This option allows you to override that class name, or suppress using the value false. (model)_(attribute)_group
:label_size Bootstrap CSS class to use to size the label for this field. By default this is set by the form. This option is only needed if you need a label to be differently sized from the rest of the form's labels.
:input_size Bootstrap CSS class to use to size the input for this field. By default these are set by the form. This option is only needed if you need an input to be differently sized from the rest of the form's inputs.
:required Set this to true/false to override whether this field should be marked required. If an attribute has a presence validator, it will be marked required.

Support

Bootstrap Support

  • Horizontal Form

Simple Form API Support

  • Required fields.
  • Placeholders, automatic and custom.

Supported Field Types

  • These are straighforward to add. Just take a look in fields/.

    Field Type Generated HTML Element Database Column Type
    boolean input[type=checkbox] boolean
    email input[type=email] string with name =~ /email/
    password input[type=password] string with name =~ /password/
    string input[type=text] string
    text textarea text
    datetime input[type=text] setup for jquery.datetimepicker datetime
    select select just provide a collection: option

Contributing

  1. Fork it ( http://github.com//my_gem/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Releasing

  1. Update lib/simple_bootstrap_form/version.rb
  2. git commit && git push
  3. rake build
  4. rake release

TODO

  • Vertical Form
  • Inline Form
  • bootstrap_fields_for
  • Suppress placeholder