Customizing the forms

The sing in and registration forms

Now that we've added the navbar, this is what the Sing in page looks like:

It looks good enough, but I'd like to add a more personal touch to it. First, I'd like to wrap the form in a panel.

Open the file app/views/devise/sessions/new.html.erb and add wrap the existing code in a <div class="panel panel-default">...</div>, like this:

  <div class="panel panel-default">
  <h2>Sign in</h2>

  <%= bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name), layout: :horizontal, label_col: "col-sm-1", control_col: "col-sm-6") do |f| %>
    <%= devise_error_messages! %>
    <%= f.email_field :email, label: "Email", autofocus: true, required: true %>
    <%= f.password_field :password, label: "Password", autocomplete: "off", required: true%>
    <%= f.check_box :remember_me %>
    <%= f.submit "Sign in" %>
  <% end %>

  <%= render "devise/shared/links"%>

  </div>

Next, I'd like to have the form centered on every type of screen. Boostrap slang for this type of positioning is adding a div applying several classes, like this:

<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12"> ... </div>

Having centered the form, I will drop the previously added layout: horizontal and columns for labels and controls:

<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
  <div class="panel panel-default">
  <h2>Sign in</h2>

  <%= bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>
    <%= f.email_field :email, label: "Email", autofocus: true, required: true %>
    <%= f.password_field :password, label: "Password", autocomplete: "off", required: true%>
    <%= f.check_box :remember_me %>
    <%= f.submit "Sign in" %>
  <% end %>

  <%= render "devise/shared/links"%>

  </div>
</div>

Now the form looks like this:

We would like to move it lower with respect to the navbar and add some padding. To do this, let's create a custom CSS class for the form panels.

In <div class="panel panel-default"> add a new class, form-panel, like this:

<div class="panel panel-default form-panel">

Now open the app/assets/stylesheets/application.scss file and define the styles specific to this class:

.form-panel {
  padding: 30px;
  margin-top: 40px;
}

To get this:

To move the auto-generated Sign up and Forgot your password links to the right, you can add an inline style. Just wrap the <%= render "devise/shared/links"%> in a div like this:

<div style="text-align: right;">
  <%= render "devise/shared/links"%>
</div>

Finally, this is the form:

And this is the full content of the app/views/devise/sessions/new.html.erb file:

<%= render "shared/external_navbar" %>

<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
  <div class="panel panel-default form-panel">
    <h2>Sign in</h2>

    <%= bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
      <%= devise_error_messages! %>
      <%= f.email_field :email, label: "Email", autofocus: true, required: true %>
      <%= f.password_field :password, label: "Password", autocomplete: "off", required: true%>
      <%= f.check_box :remember_me %>
      <%= f.submit "Sign in" %>
    <% end %>

    <div style="text-align: right;">
      <%= render "devise/shared/links"%>
    </div>
  </div>
</div>

Try to modify the registration form in the same way. Spoilers below!

To bring the registration form to the same style, this is what I did in the app/views/devise/registrations/new.html.erb file:

<%= render "shared/external_navbar" %>

<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
  <div class="panel panel-default form-panel">
    <h2>Register</h2>

    <%= bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= f.email_field :email, autofocus: true %>
      <%= f.password_field :password, autocomplete: "off" %>
      <%= f.password_field :password_confirmation, autocomplete: "off" %>
      <%= f.submit "Register" %>
  <% end %>

    <div style="text-align: right;">
      <%= render "devise/shared/links"%>
    </div>
  </div>
</div>

Challenge: Using what you've seen before while adapting the landing page, add a background image to the sign in and registration pages.

The new case and edit case forms

To modify the New and Edit forms for cases, the changes will be practically the same:

• Wrapping the forms in divs with panel classes and classes specifying the number of columns
• Removing the previous layouts attached to the forms

Finally, this is what I got in app/views/cases/new.html.erb:

<%= render "shared/internal_navbar" %>

<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
  <div class="panel panel-default form-panel">
    <h2> New Case</h2>
    <%= bootstrap_form_for(@case) 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 %>
  </div>
</div>

And, in app/views/cases/edit.html.erb:

<%= render "shared/internal_navbar" %>

<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
  <div class="panel panel-default form-panel">
    <h2> Edit Case</h2>
    <%= bootstrap_form_for(@case) do |form| %>
      <%= form.text_field :title, label: "Case title"%>
      <%= form.attachinary_file_field :case_image, label: "New case image"%>
      <%= form.text_area :body, label: "Case description"%>
      <%= form.submit %>
    <% end %>
  </div>
</div>

This is what they look like now: