Prettier Accessible Forms with Zend Form and Zend Config

When I first started working with Zend Framework and showed a designer the output from Zend Form we had a few days of conversations back and forth and researched on whether or not the dl/dt setup was going to be sufficient for what we wanted and also “correct usage”.

While working through our first project we ran into issues with this structure of forms.  I didn’t run into any problems but in order to stop the complaints from the designers in our office I decided to work on getting Zend Form to generate forms in the style laid out at A List Apart.

I didn’t figure this would really be all that difficult because most of the documentation for Zend Framework fairly good.  Little did I know that the documentation and examples for Zend Form with Zend Config were fairly hard to find.  When I did find documentation the decorators stilled confused me for a while.  Then everything just seemed to click one day and I was successful in getting exactly what I wanted.  Now I don’t have designers complaining anymore because they have forms structured exactly the way they want(Sorry Rob :-) ).  In order to get the results I wanted I ended up with a form defined in my ini file like the following:

[signInForm]
form.id = "signInForm"
form.method = "post"
form.action = "/sign-in/"

; Form Decorators
form.disableLoadDefaultDecorators = true
form.decorators.formElements.decorator = "FormElements"
form.decorators.description.decorator = "Description"
form.decorators.form.decorator = "Form"

; Global Element Decorators
form.elementDecorators.decorator = "ViewHelper"
form.elementDecorators.error.decorator = "Errors"
form.elementDecorators.description.decorator = "Description"
form.elementDecorators.label.decorator = "Label"
form.elementDecorators.formElements.decorator = "HtmlTag"
form.elementDecorators.formElements.options.tag = "li"

; Group Decorators
form.displayGroupDecorators.decorator = "FormElements"
form.displayGroupDecorators.formElements.decorator = "HtmlTag"
form.displayGroupDecorators.formElements.options.tag = "ol"
form.displayGroupDecorators.fieldset.decorator = "FieldSet"

; Form Groups
form.displayGroups.signinGroup.elements.username    = "username"
form.displayGroups.signinGroup.elements.password    = "password"
form.displayGroups.signinGroup.elements.rememberMe  = "rememberMe"

form.displayGroups.submitGroup.elements.submit = "submit"

; username element
form.elements.username.type = "text"
form.elements.username.options.validators.notempty.validator = "NotEmpty"
form.elements.username.options.validators.notempty.breakChainOnFailure = true
form.elements.username.options.validators.strlen.validator = "StringLength"
form.elements.username.options.validators.strlen.options.min = 6
form.elements.username.options.validators.strlen.options.max = 20
form.elements.username.options.required = true
form.elements.username.options.label = "Username:"

; password element
form.elements.password.type ="password"
form.elements.password.options.validators.notempty.validator = "NotEmpty"
form.elements.password.options.validators.notempty.breakChainOnFailure = true
form.elements.password.options.validators.strlen.validator = "StringLength"
form.elements.password.options.validators.strlen.options.min = "6"
form.elements.password.options.required = true
form.elements.password.options.label = "Password:"

; remember me element
form.elements.rememberMe.type = "checkbox"
form.elements.rememberMe.options.label = "Remember Me?"

; login button element
form.elements.submit.type = "button"
form.elements.submit.options.name = "SignIn"
form.elements.submit.options.value = "Sign In"
form.elements.submit.options.label = "Sign In"

I hope this helps someone else as I could not find a good solid example of how to get this working. If anyone has any feedback on a better way of handling this let me know in the comments.
Thanks,
Chris

2 Responses to “Prettier Accessible Forms with Zend Form and Zend Config”

  1. Score!

  2. Hi, i’m from Italy and i appreciate your article! Good

Leave a Reply