Simple Form… great, but not always good

The other day here at The Flatiron School, we participated in an in-person AMA with Adam Jonas, the Managing Director of Engineering for the School. He started out by asking us what we’re learning right now. At the time, at least, we were going pretty heavy on forms — creating them and integrating them into web apps. He paused and said something like, “Forms… that’s all the internet is.”

While that sounds incredibly boring, it’s not too inaccurate. In most cases, when you fill in any information or click on a button on a website, you’re interacting with a form. We on the other side of the website try to take the data you give us and respond in kind.

So when we graduated from some simple HTML forms to using the form_tag function in Rails, it felt like a big step up toward something more abstract and (sometimes) easier. Then again, we took a big step up with the form _for function, which almost felt like it magically did all my work for me. Not quite, but close.

I found another form creating option, which is actually quite popular among Rails developers, called Simple Form. As you can imagine, it sort of takes the form_for a half-step farther.

First thing’s first: place the gem in your gemfile.

gem 'simple form'

So I took an app that I’m working on for a group project and decided to recreate one of the forms using Simple Form. Here is each form, one after the other. The first is form_for, followed by Simple Form.

<%= form_for @user do |f| %>
<%= f.label :name %>
<%= f.text_field :name %><br>
<%= f.label :email %>
<%= f.email_field :email %><br>
<%= f.label :zip_code %>
<%= f.text_field :zip_code %><br>
<%= f.label :password %>
<%= f.password_field :password %><br>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %><br>
<%= f.submit "Create New User"%>
<% end %>
<%= simple_form_for @user do |f| %>
<%= f.input :name %>
<%= f.input :email %>
<%= f.input :zip_code %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.button :submit, 'Create New User' %>
<% end %>

The resulting form is almost exactly identical in terms of appearance and function. But the latter comes with some more perks depending on your needs. Each input comes with a label, so there is no need to manually include those. Also, each is wrapped in a div, so it is easier to apply styling to the form. The gem’s developers even tout its ease of integration with Bootstrap. The form also easily renders errors by default and can provide entry hints to users.

For certain purposes, Simple Form sounds pretty awesome. Probably for our purposes of a relatively simple web app that needs to collect user information, Simple Form is ideally suited. But it is also a bit too hand-holdy for comfort. It is reminiscent of Rails generators that are great in some ways, but can cause headaches by doing too much for you. This is definitely a tool that I will keep handy, but it is likely that any forms I’m building will need to be a bit more customized.

Ok so, the resulting HTML for each. First, form_for:

<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="tmn3hnmVnKZW9L0qRGFsGU+ZYK4huqToxe0Ouhc+erGKUlBDqx9pZ1wL4C0svHhspg7VxQuwZ52Wm6PEB3xk+g==">
<label for="user_name">Name</label>
<input type="text" name="user[name]" id="user_name"><br>
<label for="user_email">Email</label>
<input type="email" name="user[email]" id="user_email"><br>
<label for="user_zip_code">Zip code</label>
<input type="text" name="user[zip_code]" id="user_zip_code"><br>
<label for="user_password">Password</label>
<input type="password" name="user[password]" id="user_password"><br>
<label for="user_password_confirmation">Password confirmation</label>
<input type="password" name="user[password_confirmation]" id="user_password_confirmation"><br>
<input type="submit" name="commit" value="Create New User" data-disable-with="Create New User">
</form>

And now Simple Form:

<form class="simple_form new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="tmn3hnmVnKZW9L0qRGFsGU+ZYK4huqToxe0Ouhc+erGKUlBDqx9pZ1wL4C0svHhspg7VxQuwZ52Wm6PEB3xk+g==">
<div class="input string optional user_name">
<label class="string optional" for="user_name">Name</label>
<input class="string optional" type="text" name="user[name]" id="user_name"></div>
<div class="input email optional user_email">
<label class="email optional" for="user_email">Email</label>
<input class="string email optional" type="email" name="user[email]" id="user_email"></div>
<div class="input integer optional user_zip_code">
<label class="integer optional" for="user_zip_code">Zip code</label>
<input class="numeric integer optional" type="number" step="1" name="user[zip_code]" id="user_zip_code"></div>
<div class="input password optional user_password">
<label class="password optional" for="user_password">Password</label>
<input class="password optional" maxlength="72" size="72" type="password" name="user[password]" id="user_password"></div>
<div class="input password optional user_password_confirmation">
<label class="password optional" for="user_password_confirmation">Password confirmation</label>
<input class="password optional" type="password" name="user[password_confirmation]" id="user_password_confirmation"></div>
<input type="submit" name="commit" value="Create New User" class="button" data-disable-with="Create New User"></form>