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.
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
The New case form
app/views/cases/new.html.erb let's change the following line:
<%= form_for @case do |form| %>
<%= 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
<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.
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.