2

I am quite new to the simple form gem and I'd like to customize the inputs with SVG add-ons such as an email picture into the input field "Email"

Here is the svg code: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve" width="24" height="24"><title>email 84</title><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="#111111" stroke="#111111"><polyline data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" points="1,3 12,13 23,3 " stroke-linecap="butt"/> <rect x="1" y="3" fill="none" stroke="#111111" stroke-miterlimit="10" width="22" height="18"/></g></svg>

And here is my simple form code: 

<div class="col-xs-12 col-sm-4 col-sm-offset-4">
  <div class="form-login">
    <p>Welcome !!</p>
     <div class="hr">
    </div>

    <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= f.error_notification %>

      <div class="form-inputs">
        <%= f.input :first_name, required: true, autofocus: true, placeholder: "First name" %>
         <%= f.input :last_name, required: true, autofocus: true, placeholder: "Last name" %>
        <%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
        <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length), placeholder: "Password" %>
        <%= f.input :password_confirmation, required: true, placeholder: "Password" %>
      </div>

      <div class="form-actions">
        <%= f.button :submit, "Sign up", class: "btn btn-danger small-btn width-login" %>
      </div>
    <% end %>

</div>
</div>

Where should I put the SVG code?

Thanks !!

Ravi Mariya
  • 1,210
  • 15
  • 19
Pierre Laburthe
  • 318
  • 1
  • 11
  • You mean the user uploads the image or you just want to show it somewhere in the form? In the latter case, where exactly? – iGian Jul 23 '18 at 14:09
  • I just want to show it in the form ! I'd like the image to be in the input, sticked to the right border. – Pierre Laburthe Jul 24 '18 at 14:05

1 Answers1

0

You can put before input tag and into a label tag

<%= f.label(:email) do %>
  # Here is the SVG
  #Edit
  <%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
<% end %>

Edit: And you should use css like in How to add a SVG icon within an input?

Necrogoru
  • 108
  • 2
  • 9