Question

I am still very new to programming and trying to learn with rails. I have copied and pasted the email form from http://matharvard.ca/posts/2011/aug/22/contact-form-in-rails-3/ and I am now trying to apply twitter bootstrap styling to the form below. I have tried several different ways with no luck but I guess I lack understanding of what and why the fieldset tag exist and how to apply the various css classes to what I think are helpers. If someone could point me in the right direction that would be great (still very new to programming, design, and rails so if one could confirm that I am looking at helpers here that would be a bonus).

Thank you in advance for your help.

<%= form_for @message, :url => contact_path do |form| %>
<fieldset class="fields">
 <div class="field">
  <%= form.label :name %>
  <%= form.text_field :name %>
 </div>

 <div class="field">
  <%= form.label :email %>
  <%= form.text_field :email %>
 </div>
 <div class="field">
  <%= form.label :subject %>
  <%= form.text_field :subject %>
 </div>

 <div class="field">
  <%= form.label :venue %>
  <%= form.text_field :venue %>
 </div>

 <div class="field">
  <%= form.label :date %>
  <%= form.text_field :date %>
 </div>

 <div class="field">
  <%= form.label :time %>
  <%= form.text_field :time %>
 </div>

 <div class="field">
  <%= form.label :body %>
  <%= form.text_area :body %>
 </div>
</fieldset>

<fieldset class="actions">
  <%= form.submit "Send" %>
 </fieldset>
<% end %>

Answer 1

This is how it should be:

<%= form_for @message, :url => contact_path, :html => {:class => "form-horizontal"} do |form| %>
<fieldset>
 <div class="control-group">
  <%= form.label :name, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :name %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :email, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :email %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :subject, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :subject %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :venue, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :venue %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :date, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :date %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :time, :class => "control-label" %>
  <div class="controls">
    <%= form.text_field :time %>
  </div>
 </div>

 <div class="control-group">
  <%= form.label :body, :class => "control-label" %>
  <div class="controls">
    <%= form.text_area :body %>
  </div>
 </div>

 <div class="control-group">
  <div class="controls">
    <%= form.submit "Send" %>
  </div>
 </div>

</fieldset>
<% end %>

It’s going to be a headache adding this styles in a large Rails application with more than one form. So I recommend you to use SimpleForm gem that come with twitter bootstrap generator (read the installation guide).

With this gem your form will be bootstrap ready as simple as this:

<%= simple_form_for @message, :url => contact_path, :html => { :class => 'form-horizontal' } do |form| %>
  <%= form.input :name %>
  <%= form.input :email %>
  <%= form.input :subject %>
  <%= form.input :venue %>
  <%= form.input :date %>
  <%= form.input :time %>
  <%= form.button :submit %>
<% end %>