I needed a quick way to whip a Zend_Form into some kind of decent looking layout.
The application I'm using it in is an eCommerce administration area and for speed of development, I've chosen to use Bootstrap 3.0.
To use Bootstrap with Zend_Form, you'll need to first give the form a class of 'form-horizontal' or something similar.
<?php
class My_Form extends Zend_Form
{
public function init()
{
$this->setAttrib('class', 'form-horizontal'); // Bootstrap Form
// rest of the form
}
For each element, I use a helper method, which I've detailed below:
<?php
class My_Form extends Zend_Form
{
// Your init() method goes here
/**
* Apply Bootstrap decorators to an element.
* @return array
*/
private function getBootstrapDecorator()
{
return array(
'ViewHelper',
'Description',
'Errors',
array(
'Label',
array(
'tag' => 'label',
'class' => 'control-label'
)
),
array(
'HtmlTag',
array(
'tag' => 'div',
'class' => 'form-group'
)
)
);
}
}
Now your form has the bootstrap class and you've got a simple helper method to generate the decorator, you can stick it all together like this:
<?php
class My_Form extends Zend_Form
{
public function init()
{
$this->setMethod('post');
$this->setAttrib('class', 'form-horizontal'); // Bootstrap Form
$name = new Zend_Form_Element_Text('name');
$name->setAttrib('class', 'form-control');
$name->setAttrib('placeholder', 'ex: Joe Bloggs');
$name->setDecorators(
$this->getBootstrapDecorator()
);
$name->setLabel('Name:');
$this->addElement($name);
$description = new Zend_Form_Element_Textarea('description');
$description->setAttrib('class', 'form-control');
$description->setAttrib('placeholder', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...');
$description->setDecorators(
$this->getBootstrapDecorator()
);
$description->setLabel('Description:');
$this->addElement($description);
$this->addElement(
'submit',
'save',
array(
'required' => false,
'ignore' => true,
'label' => 'Save',
'class' => 'btn btn-small btn-success'
)
);
}
/**
* Apply Bootstrap decorators to an element.
* @return array
*/
private function getBootstrapDecorator()
{
return array(
'ViewHelper',
'Description',
'Errors',
array(
'Label',
array(
'tag' => 'label',
'class' => 'control-label'
)
),
array(
'HtmlTag',
array(
'tag' => 'div',
'class' => 'form-group'
)
)
);
}
}
Update: 7th September 2013
I had to just write a decorator for styling a checkbox element. Keeping this in with Bootstrap, here's the private method I've put together.
<?php
/**
* Apply Bootstrap decorators to a checkbox element.
* @return array
*/
private function getBootstrapCheckboxDecorator()
{
return array(
'ViewHelper',
'Description',
'Errors',
array(
'Label',
array(
'tag' => 'label',
'class' => 'control-label'
)
),
array(
'HtmlTag',
array(
'tag' => 'div',
'class' => 'checkbox'
)
)
);
}
When you've displayed your form, it actually looks good! Who would have thought eh?
Helped you out? Let me know!