17: Styling the forms

As you have previously notices, the forms in our application are the worst ever could use some improvement.

We will use a gem for this, Rails Boostrap Forms.

We start by adding the gem to our Gemfile, then bundling the gems.

In the Gemfile

gem 'bootstrap_form'

Then, in the Terminal:

$ bundle install

We have to make one more adjustment, in the app/assets/stylesheets/application.scss file, adding the line:

/*
 *= require rails_bootstrap_forms
 */

The solution is simple, since the gem provides a bootstrap_form_for helper we can use instead of the previous form_for.

The New case form

In app/views/cases/new.html.erb let's change the following line:

<%= form_for @case do |form| %>

to

<%= bootstrap_form_for @case do |form| %>

Save and refresh the page:

Slightly better. Now, having skimmed the documentation we find out we can make use of labels and placeholder texts.

I did this and a few other changes (horizontal layout and a certain number of columns for titles and content), and this is what I got in the app/views/cases/new.html.erb file:

<h2> New Case</h2>
<%= bootstrap_form_for(@case, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-6") do |form| %>
  <%= form.text_field :title, label: "Case title", placeholder: "Enter your case title"%>
  <%= form.attachinary_file_field :case_image, label: "Case image"%>
  <%= form.text_area :body, label: "Case description", placeholder: "Enter the description of your case" %>
  <%= form.submit %>
<% end %>

And this is the form in it's ... final ... form.

Much better!

Your turn

Now you can do the same for the Edit case form. Try to figure how to make these improvements for the User registration / Login forms. Take a little time to explore the code and find where this can be done.