Customizing the Design of a Devise Registration Page
Walk through how to implement a custom design for the Devise gem's default registration page.
Guide Tasks
  • Read Tutorial

Since it's one of the entry paths to the rest of the site I thought that it would make sense to begin implementing the design for the Registration page. If you look back at our user interface lesson, you can see that the registration should look like the design below:

large

If you navigate to http://localhost:3000/users/sign_up you'll see that our registration page renders, but it's the default HTML styling, which is very far away from the mock. So let's pull in the code from the design assets and integrate them into the Devise view template:

<!-- app/views/devise/registrations/new.html.erb -->

<div class="container">
  <div class="row">
    <div class="login pull-left">
        <h1>Log In</h1>
        <div class="form-group">
          <input type="email" placeholder="Email Address" />
          <input type="password" placeholder="Password" />
          <div class="checkbox">
            <label>
              <input type="checkbox"> Keep me logged in
            </label>
          </div>
          <a href="#login" class="btn btn-default btn-green"><span>Login</span></a>
          <a href="#forgot-password"><span class="pull-right">Forgot password?</span></a>
        </div>
        <div class="mobile">
          <img src="images/mobile.png" />
          <h2>Heading out?<br/> Stay connected</h2>
          <p>Visit <strong>daily smarty</strong> on your mobile phone.</p>
        </div>
    </div>
    <div class="register pull-right">
      <div class="header">
        <h1>Sign up</h1>
        <span>It’s free and always will be.</span>
      </div>

      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>

        <div class="form-group clearfix">
          <%= f.label :first_name %>
          <%= f.text_field :first_name, placeholder: 'e.g. Jon' %>
        </div>

        <div class="form-group clearfix">
          <%= f.label :last_name %>
          <%= f.text_field :last_name, placeholder: 'e.g. Snow' %>
        </div>

        <div class="form-group clearfix">
          <%= f.label :email %>
          <%= f.email_field :email, placeholder: 'e.g. jon@snow.com' %>
        </div>

        <div class="form-group clearfix">
          <%= f.label :username %>
          <%= f.text_field :username, placeholder: 'e.g. jonsnow' %>
        </div>

        <div class="form-group clearfix">
          <%= f.label :password %>
          <%= f.password_field :password, autocomplete: "off" %>
        </div>

        <div class="form-group clearfix">
          <%= f.label :password_confirmation %>
          <%= f.password_field :password_confirmation, autocomplete: "off" %>
        </div>

          <p>By clicking Sign Up, you agree to our <strong>Terms</strong> and that you have read and understand our <strong>Data Use Policy</strong>, including our <strong>Cookie Use.</strong></p>

        <div class="actions">
          <%= f.submit "Sign up", class: "btn btn-default btn-orange" %>
        </div>
      <% end %>

    </div>
  </div>
</div>

If you compare the registration/signup HTML asset and the original new registration template, you'll see that we've essentially merged the devise code into the template so the form elements are now functional. You may also notice that the login component on the left hand side is still a dummy form, so let's update that:

<!-- app/views/devise/registrations/new.html.erb -->

        <h1>Log In</h1>
        <div class="form-group">
          <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
            <div class="field">
              <%= f.label :email %>
              <%= f.email_field :email, autofocus: true %>
            </div>

            <div class="field">
              <%= f.label :password %>
              <%= f.password_field :password, autocomplete: "off" %>
            </div>

            <% if devise_mapping.rememberable? -%>
              <div class="field">
                <%= f.check_box :remember_me %>
                <%= f.label :remember_me %>
              </div>
            <% end -%>

            <div class="actions">
              <%= f.submit "Log in", class: 'btn btn-default' %>
            </div>
          <% end %>
        </div>

That's looking great, lastly, let's fix the broken image:

<!-- app/views/devise/registrations/new.html.erb -->

        <div class="mobile">
          <%= image_tag('mobile.png') %>
          <h2>Heading out?<br/> Stay connected</h2>
          <p>Visit <strong>daily smarty</strong> on your mobile phone.</p>
        </div>

Now if you refresh the page you'll see that both forms are fully functional and the implemented design is looking like a mock.

large

You may have also noticed that there are a few differences that the design has that we don't have yet:

  1. The icons - these are from bootstrap and we'll integrate these later on

  2. The font - right now our font looks pretty ugly, we'll walk through how to import the font properly later on

  3. Footer - we'll add in the footer later, this isn't necessary right now because once we add it, it will render on all the pages.

Resources