Floaty Form Inputs

Usage

Add floaty.css and floaty.js , then format your HTML inputs in the following way...

Each input needs the following:

• 1st: An outer wrapper div with the class "field"
• 2nd: The input itself with the class "floaty"
• 3rd: A label that uses the for attribute (which refers to the id of the input)
• 4th: A div with the class "input-background"
• ...and it needs to be in that order, because of the way CSS works.

<!--form.html-->
<form>
  <div class="field">
    <input class="floaty" id="first_name" placeholder="Steve">
    <label for="first_name">First Name<label/>
    <div class="input-background"></div>
  </div>
</form>

Rails Simple Form config

Add this to your Simple Form initializer:

# config/initalizers/simple_form.rb
SimpleForm.setup do |config|
  config.wrappers :floaty, tag: "div" do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper tag :div, class: "field" do |c|
      c.use :input, class: "floaty"
      c.use :label
      c.wrapper tag: :div, class: "input-background" do |d|
      end
    end
  end
end

Then in your view you can use:

# app/views/checkouts/_form.html.erb
<%= simple_form_for :checkout, wrapper: :floaty do |f| %>
  <%= f.input :first_name, placeholder: "Tim" %>
  <%= f.input :last_name, placeholder: "Urban" %>
  <%= f.submit %>
<% end %>

Now your Rails views will render HTML that work out of the box with floaty.css and floaty.js

Thank you to Stripe's Elements Examples for inspiring this approach.