Rails 4 form builder with comprehensive support for Twitter Bootstrap 3

Question

Is there any Rails 4 compatible form builder gem(s) that provide comprehensive support for Twitter Bootstrap 3.0.0 forms?

Here's a benchmark for what I'd consider 'comprehensive' support:

• Support for all 3 layouts (basic, horizontal, inline)
• Support for basic input types (input, textarea, select, etc.)
• Support for both stacked & inline checkboxes/radio buttons
• Support for all input states (focus, disabled, validation)
• Support for help text/error messaging
• Support for input-append/prepend (now referred to as input-group in TWBS3).
• Support for dealing with Rails' specific form 'elements' e.g. date_select (inline select boxes)

See the TWBS3 docs and WIP github issue for details on TWBS3 forms.

I've had a look at both simple_form and twitter_bootstrap_form_for and whilst both are making progress neither appear to offer a sufficient solution at the moment.

Simple form

Appears to have a solution for the basic layout, however from what I can see horizontal forms are not currently possible due to the additional grid markup required by TWBS3.

https://github.com/plataformatec/simple_form/pull/864 https://github.com/plataformatec/simple_form/issues/857

Twitter bootstrap form for

This pull request looks promising, but I can see some inaccuracies in the markup and classes being used.

https://github.com/stouset/twitter_bootstrap_form_for/pull/84

Answer 1

In my own experience with Bootstrap and simple_form / form_builder approach is that simple_form is not worth the trouble. There are just too many things that simple form has no answer for layout and control wise, some key black spots being classes on wrapper tags, selects with html attributes, or doing something simple like bootstrap button groups that mimic toggle/radio buttons. The i18n support in simple_form has also been a challenge, requiring a lot of duplication.

Also consider if server side rendering is the right approach for a modern application. I am transitioning from traditional rails/server-side rendering to a SPA (Single Page Application) model. To do this I'm using backbone.js and marionette with eco templates and coffeescript.

Architecturally the simple_form / rails form builder approach seems kind of flawed and within it has a lot of convoluted code for essentially building a html string fragment.

Well I say that is what view templates are for!

At the end of the day a view is composed from many different sub-view templates (eg partials), and I think it should go right down to control/field components. In contrast, the builder approach is always caught out with lack of support for different jquery components and is not really agile enough to keep pace.

I'd suggest using parameterised view templates/partials that codify the markup you want for each type of control/component or view construct in your app and simply compose them to get the layout you want. If you're doing this server side, you could wrap up all the render partial calls with some helpers for syntactical sweetness. If you're doing it client side with say eco templates, check the main page, you will see an example of defining and calling form building templates there.

Don't lock yourself into the capabilities of a form builder, use the boostrap documentation examples as the starting point for your templates and simply call them!

Answer 2

Have you checked out https://github.com/potenza/bootstrap_form? We just added support for Bootstrap 3 and it's very lightweight.

We support almost all of your requirements, but we're still working on a good solution for date and time selects as they are currently stacked by default.

Here's an example form in erb:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

And the output:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" type="password">
  </div>
  <div class="checkbox">
    <label for="user_remember_me">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
    </label>
  </div>
  <input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>

Answer 3

Having tried this recently, there are some hacks to get simple_form working, I would say that it's not ready yet for primetime. Check back on simple form in a few weeks, in the mean time you could build your markup manually or live with awkward forms with simple_form till it's updated.

You can monitor it's progress here: https://github.com/rafaelfranca/simple_form-bootstrap/pull/28