I've written a little lib which piggy backs on the standard merb form helpers to give you nicer looking forms with help from Andy and Martyn.

We weren't happy with our forms and we were writing too much code. So we wrapped some goodies around the merb form helpers. We've got notes, inline errors, required / not required formatting, and cancel buttons. The API is so minimal you won't be able to resist.

Here's an example of the ruby code, the generated HTML, and what it looks like with some sexy CSS:

Example Code

Ruby

<%= field(:text, :nickname, :required => true, :note => "You'll be known by this on the site. Don't use your real name. It has to be unique, and you can't change it later.")%>
<%= field(:password, :password, :required => true)%>
<%= field(:password, :password_confirmation, :required => true, :note => "Type the same password again, just to make sure we've got it right" )%>
<%= field(:checkbox, :terms_and_conditions, :required => true, :value => true, :label=>"I accept the terms and conditions")%>
<%= form_submit "Sign Up!" %>

Html Generated

<div class="field password required">
<label for="user_password">Password</label>
<input type="password" class="password" name="user[password]" id="user_password" />
</div>

<div class="field password required">
<label for="user_password_confirmation">Password confirmation</label>
<input type="password" class="password" name="user[password_confirmation]" id=
"user_password_confirmation" />

<p class="note">Type the same password again, just to make sure we've got it right
<abbr title="smile">: )</abbr></p>
</div>

<div class="field checkbox required">
<input type="hidden" class="hidden" name="user[terms_and_conditions]" value="0" />
<input type="checkbox" class="checkbox" name="user[terms_and_conditions]" value="1"
id="user_terms_and_conditions" />
<label for="user_terms_and_conditions">I accept the terms and conditions</label>
</div>

<div class="field controls">
<button type="submit" class="positive">Sign Up!</button>
</div>

Html with Errors

<div class="field error password required">
<label for="user_password">Password</label>
<input type="password" class="error password" name="user[password]" id="user_password" />

<p class="error">can't be blank and is too short (minimum is 4 characters)</p>
</div>

<div class="field error password required">
<label for="user_password_confirmation">Password confirmation</label>
<input type="password" class="error password" name="user[password_confirmation]" id="user_password_confirmation" />

<p class="note">Type the same password again, just to make sure we've got it right
<abbr title="smile">: )</abbr></p>

<p class="error">can't be blank</p>
</div>

<div class="field error checkbox required">
<input type="hidden" class="hidden" name="user[terms_and_conditions]" value="0" />
<input type="checkbox" class="error checkbox" name="user[terms_and_conditions]" value="1" id="user_terms_and_conditions" />
<label for="user_terms_and_conditions">I accept the terms and conditions</label>

<p class="error">must be accepted</p>
</div>

Sexy Form

You can be the judge of the sexyness of these forms, but they are much nicer than the default error message in my opinion.

Code/CSS

Code is licensed under the MIT License, and under no guarantee that it will not break if they change the external API for form helpers.

• For Merb and AR

• For Merb and DM

• The CSS

Install

Add the file in your lib folder, add the dependency in your init.rb and then include in your global helpers.

Enjoy!