#234 SimpleForm (revised)

Mar 03, 2012 | 9 minutes | Views, Plugins, Forms

Easily generate complex forms with SimpleForm. Here I show how to convert bulky markup into a concise list of fields, customize it by passing options, and add error handling.

Click to Play Video ▶

Download:
source codeProject Files in Zip (101 KB)
mp4Full Size H.264 Video (30.9 MB)
m4vSmaller H.264 Video (13.7 MB)
webmFull Size VP8 Video (14 MB)
ogvFull Size Theora Video (32.3 MB)

Browse Source Code

Resources

          Gemfile
        
gem 'simple_form'

          terminal
        
rails g simple_form:install

          products/_form.html.erb
        
<%= simple_form_for(@product) do |f| %>
  <%= f.error_notification %>
  <%= f.input :name %>
  <%= f.input :price, hint: "price should be in USD" %>
  <%= f.input :released_on, label: "Release Date" %>
  <%= f.input :discontinued %>
  <%= f.input :rating, collection: 1..5, as: :radio_buttons %>
  <%= f.association :publisher %>
  <%= f.association :categories, as: :check_boxes %>
  <%= f.error :base %>
  <%= f.button :submit %>
<% end %>

          app/assets/stylesheets/forms.css.scss
        
.simple_form {
  $indent: 120px;
  label {
    float: left;
    width: $indent - 20px;
    text-align: right;
    margin: 2px 10px;
    &.radio, &.checkbox {
      float: none;
      margin: 0;
      width: auto;
      text-align: left;
    }
    &.checkbox {
      display: block;
      margin-left: $indent;
    }
    &.radio {
      margin-right: 10px;
    }
  }
  div.input {
    margin-bottom: 10px;
  }
  input.radio_buttons, input.check_boxes {
    margin-right: 5px;
  }
  .btn {
    margin-left: $indent;
  }
  .alert-error {
    color: #D00;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .hint, .error {
    clear: left;
    margin-left: $indent;
    font-size: 12px;
    color: #D00;
    display: block;
  }
  .hint {
    color: #555;
    font-style: italic;
  }
}