floaty-inputs's Introduction

Floaty Form Inputs

Simple CSS + JS for user-friendly "floaty" HTML form inputs

Check out a live demo of an example form.

Here is an image of an example:

Why "Floaty" Form Inputs

Floaty form inputs provide a great user experience: combining labels and inputs decreases cognitive load, and unlike with HTML placeholders, the label is always visible.

Usage

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

HTML

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.

Example HTML

<!--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/intializers/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 %>