Backend Training: SimpleForm Custom Wrapper

🔖 simple_form, simple_form custom wrapper, Boostrap Input Groups

Now, we have our subscriber form working but it doesn't really look like the one on the mockup.

Ours...

The mockup...

We need to make some changes to reflect the design on the mockup. The ideal bootstrap component we will use is the Boostrap Input Groups.

However, simple_form does not have this implemented by default so we need to add it to our simple_form configs.

Let's add a vertical_input_group wrapper to the config file.

# config/initializers/simple_form_bootstrap.rb
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn btn-default'
  config.boolean_label_class = nil

  config.wrappers :vertical_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'control-label'

    b.wrapper tag: 'div' do |ba|
      ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append|
        append.use :input, class: 'form-control'
      end
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

......

And change your subscriber form view

# app/views/subscribers/_form.slim
= flash_messages
= simple_form_for @subscriber, remote: true do |f|
    = f.input :email, label: false, wrapper: 'vertical_input_group' do
      = f.input_field :email, class: 'form-control'
      .input-group-btn
        = f.button :button, wrapper: false do
          = fa_icon('chevron-right')

Now, stop your server Control+c on your terminal window and start your server again..

$ rails s

Refresh the browser Command ⌘+r, and the end result should look like...

Great! Let's commit and move on...

$ git add -A
$ git commit -m 'SimpleForm Custom Input Group Wrapper'

↪️ Next Section: Mandrill Mailer