2 columns form with Zend Form

Here’s yet another post about Zend Form. I love the power of Zend Forms, but there are many tricks I had to learn to make it work the way I want to.

Image may be NSFW.
Clik here to view.

Very often people ask how to create a form which has several columns. At this post I want to share how you can do that, giving 2 columns form as an example. But you can create multicolumn form with any number of columns you want using the same technique.

Ok, lets just start with some simple form definition:

class Default_Form_TwoColumn extends Zend_Form
{
	public function init()
	{
		$this->setOptions(array(
			'elements' => array(
				'element1' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 1',
					)
				),
				'element2' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 2',
					)
				),
				'element3' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 3',
					)
				),
				'element4' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 4',
					)
				),
				'element5' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 5',
					)
				),
				'element6' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 6',
					)
				),
				'submit' => array(
					'type' => 'submit',
					'options' => array(
						'label' => 'Save'
					)
				)
			),
		));

	}
}

What I do here is simply add 6 input elements and one submit button. They will all show one under another in one column. Ok, but we need 2 columns. An easy way to archive this is using display groups. What display groups do is simply grouping elements together.

Here we’ll need 3 display groups – first for the left column, second for the right column and third for our submit button:

		$this->addDisplayGroups(array(
			'left' => array(
				'options'  => array('description' => 'Left Column'),
				'elements' => array('element1', 'element2', 'element3'),
			),
			'right' => array(
				'options'  => array('description' => 'Right Column'),
				'elements' => array('element4', 'element5', 'element6'),
			),
			'bottom' => array(
				'elements' => array('submit'),
			)
		));

		$this->setDisplayGroupDecorators(array('Description', 'FormElements', 'Fieldset'));

At this point you should see something like this:

Image may be NSFW.
Clik here to view.

That border around our elements clearly shows what we have in our display groups. That border is displayed because of the “fieldset” tag added around our elements. By default each display group just wraps a set of its elements in a “fieldset” tag, but you can apply any other decorators to them.

You can also notice that I used setDisplayGroupDecorators() here. That is to override default decorators which were adding some tags that I did not need, also I added “Description” decorator so that to let it show the “title” of the column at the top.

Alright, this is all nice, but we still have one column form. What else should we do? Well, not everything needs to be solved at the server side. Sometimes all you need is just adding some styles with css:

				form fieldset#fieldset-left, form fieldset#fieldset-right
				{
					float: left;
					width: 15%;
					border: none;
				}

				form #fieldset-bottom
				{
					clear: both;
					border: none;
				}

				form dd
				{
					margin: 0;
				}

				form fieldset .hint
				{
					font-weight: bold;
				}

Here I set floting left for our main columns and clear:both for submit button. As you can see I used ids #fieldset-left, #fieldset-right, #fieldset-bottom – these ids are automatically added by display groups and named after name of the display group, so that way that’s easy to style separate groups using css.
I also added some more styling just to let our form look a little nicer.

Image may be NSFW.
Clik here to view.

Ok, that’s it! We’ve created a nice two column form with Zend Framework. If you need more columns, just add more display groups, place your elements into them and make sure you add “float: left” style to your display groups.

Hope that was helpful for you. Feel free to ask any questions at the comments section.