Time for Reforms has come!

I created this library because I grew tired using the same repetitive layout markup all over again for every new form I created. I needed something that would let me quickly create new forms that look great and support validation.

Reforms lets you build beautiful forms compatible with Om, Reagent and Rum.

Markup it generates is compatible with Bootstrap 3 and Font Awesome to give you a quick start. But you can use it without Bootstrap/Font Awesome and write the CSS yourself.

The code is very concise. Here's what takes to generate the form above (including validation and automatic alignment) using Reagent:

(def signup-validators [(present [:first] "Enter first name")
                         (present [:last] "Enter last name")
                         (present [:login] "Enter login name")
                         (equal [:password1] [:password2] "Passwords do not match")
                         (present [:password1] "Choose password")
                         (present [:password2] "Re-enter password")])
(defn sign-up!
  [user ui-state]
  (when (apply v/validate! user ui-state signup-validators)
    (... actual sign up code ...)))

(defn signup-view
  [user ui-state]
  (panel "Sign up"
   (form ui-state {:on-submit #(sign-up! user ui-state)}
    (text "First name" user [:first] :placeholder "Enter first name")
    (text "Last name" user [:last] :placeholder "Enter last name")
    (text "Login" user [:login] :placeholder "Choose login" )
    (password "Password" user [:password1] :placeholder "Enter password")
    (password "Confirm password" user [:password2] :placeholder "Re-enter password")
    (form-buttons
     (button-primary "Sign up" #(sign-up! user ui-state))))))

Quick start

Dependencies

Add the correct library to :dependencies in project.clj:

Om	Reagent	Rum

The library does not use Bootstrap JavaScript so just link to bootstrap css from your html page, e.g.:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

Optionally, to use Font Awesome icons to use features such as progress spinner, warning icons etc., link to it as well:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

Requires

	Om	Reagent	Rum
Core helpers	`reforms.om`	`reforms.reagent`	`reforms.rum`
Validation	`reforms.validation`	`reforms.validation`	`reforms.validation`

A simple form

Creating a form is a snap:

(form
  (text "Your name" "Type your name here" data [:name])
  (form-buttons
    (button {:class "foo"} "Submit" #(js/alert (:name @data)))))

It returns pure hiccup-like data. Here's output from the function above (slightly simplified for clarity):

[:form [:div {:class "form-group"
              :key "data-name"}
        [:label {:for "data-name"
                 :class "control-label "} "Your name"]
        [:input {:value "My name"
                 :type "text"
                 :class "form-control"
                 :id "data-name"
                 :placeholder "Type your name here"}]]
 [:div.form-group.form-buttons
  [:button {:type "button"
            :class "btn btn-primary foo"
            :onClick #(js/alert (:name @data))} "Submit"]]]

Rendering inside a component

Om	Reagent	Rum
`(sablono.core/html (form ....))`	`(form ...)`	`(form ...)`

See "Examples" below.

Documentation

Tutorial

API Reference

Examples

	Om	Reagent	Rum
Hello world	source - demo	source - demo	source - demo
Dynamic form	source - demo	source - demo	source - demo
Controls	source - demo	source - demo	source - demo
Validation	source - demo	source - demo	source - demo
In-progress	source - demo	source - demo	source - demo

Credits

Aspasia Beneti is the author and maintainer of Rum bindings for Reforms.

Contact

Please feel free to tweet me @martinbilski or drop me an email: gyamtso at gmail dot com.