Styling new and edit 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.

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 post form

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

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

to

<%= bootstrap_form_for @post 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/posts/new.html.erb file:

<h1> New Post</h1>
<%= bootstrap_form_for(@post, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-6") do |form| %>
  <%= form.text_field :image_link, placeholder: "Post image URL"  %>
  <%= form.text_field :title, placeholder: "Post title"  %>
  <%= form.text_area :description, placeholder: "Post description"  %>
  <%= 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 post form.