Simple Form Cheatsheet

Simple Form.md

Gemfile

gem 'simple_form'

Installation

rails generate simple_form:install

# or with twitter bootstrap
rails generate simple_form:install --bootstrap

Set custom action for Form

= simple_form_for @participation, url: deal_join_path, method: :post do |f|
  = f.input :buyer_price, label: "Enter your desired price:"
  = f.button :submit, value: 'Join Deal', "data-disable-with" => "Submit.."

Using Simple Form without a modal

= simple_form_for :some_symbol do |f|
  = f.input :buyer_price, label: "Enter your desired price:"
  = f.button :submit, value: 'Join Deal', "data-disable-with" => "Submit.."

Styling radio buttons using Bootstrap

• Simple form can't output the correct radio structure for bootstrap

# In a nested form
- prefix = "booking[guests_attributes][#{index}]"
.form-group
  = label_tag "#{prefix}[gender]", "Gender", class: 'required control-label col-md-4'
  .col-md-6
    .radio
      %label
        = radio_button_tag "#{prefix}[gender]", "Male", g.object.gender == "Male"
        Male
    .radio
      %label
        = radio_button_tag "#{prefix}[gender]", "Female", g.object.gender == "Female"
        Female

z_sample_form.haml

%h1 Booking Form

%div.row
  %div.span12

    = simple_form_for(@booking, html: {class: 'form-vertical' }) do |f|

      = f.error_notification

      %h2 Select Your Departure Date
      %div.span5
        = f.input :ta_email, label: "Travel agent email:"
      %div.span6
        = f.input :departure_date, collection: @departures_options

      %h2 Enter Guests Information:
      - index = 0
      = f.simple_fields_for :guests do |g|
        %div.span5
          %h3= "Guest ##{index += 1}"
          = g.input :title, as: :select
          = g.input :first_name
          = g.input :last_name
          = g.input :citizenship, collection: Country.all
          = g.input :gender, as: :radio_buttons
          = g.input :date_of_birth, as: :string, label: 'Date of birth (YYYY/MM/DD)'
          = g.input :address
          = g.input :postal
          = g.input :city
          = g.input :country, collection: Country.all
          = g.input :phone, as: :tel
          = g.input :mobile, as: :tel
          = g.input :email, as: :email

      %div.span12
        %br
        = f.input :fare_id, as: :hidden
        = f.input :cruise_id, as: :hidden
        = f.button :submit, "Submit Bid", class: "btn btn-large btn-danger", "data-disable-with" => "Submitting.."