Easily make your CakePHP forms compatible with Bootstrap

Great plugins exist to integrate Bootstrap within CakePHP, like twitter-bootstrap-helper. However, even if they allow to easily integrate Bootstrap elements within an application, they do not allow to change automatically the display of existing forms.

If you have generated your forms within your views with the 'cake bake' console command, or by following the same standard, here is a helper that will instantly make your forms Booststrap compatible.

This Helper is compatible with Bootstrap 2.3.1 and Cake 2.X.

 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Licensed under The MIT License
 * Copyright (c) La Pâtisserie, Inc. (http://patisserie.keensoftware.com/)
 * @license     MIT License (http://www.opensource.org/licenses/mit-license.php)

App::uses('FormHelper', 'View/Helper');

class BootstrapFormHelper extends FormHelper {

 * Default input values with bootstrap classes
 * Changed order of error and after to be able to display validation error messages inline
	protected $_inputDefaults = array(
		'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
		'div' => 'control-group',
		'label' => array('class' => 'control-label'),
		'between' => '<div class="controls">',
		'after' => '</div>',
		'class' => 'input-xxlarge',
		'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline'))
 * Added an array_merge_recursive for labels to combine $_inputDefaults with specific view markup for labels like custom text.
 * Also removed null array for options existing in $_inputDefaults.
	protected function _parseOptions($options) {
		if(!empty($options['label'])) {
			//manage case 'label' => 'your label' as well as 'label' => array('text' => 'your label') before array_merge()
			if(!is_array($options['label'])) {
				$options['label'] = array('text' => $options['label']);
			$options['label'] = array_merge_recursive($options['label'], $this->_inputDefaults['label']);
		$options = array_merge(
			array('before' => null),
		return parent::_parseOptions($options);
 * adds the default class 'form-horizontal to the <form>
	public function create($model = null, $options = array()) {
		$class = array(
			'class' => 'form-horizontal',
		$options = array_merge($class, $options);
		return parent::create($model, $options);
 * modified the first condition with a more general empty() otherwise if $default is an empty array
 * !is_null() returns true and $this->_inputDefaults is erased
	public function inputDefaults($defaults = null, $merge = false) {
		if (!empty($defaults)) {
			if ($merge) {
				$this->_inputDefaults = array_merge($this->_inputDefaults, (array)$defaults);
			} else {
				$this->_inputDefaults = (array)$defaults;
		return $this->_inputDefaults;

How to use this Helper ?

In order to use this Helper, create a file named BootstrapFormHelper.php in the directory View/Helper of your application and paste the source code. Otherwise you can get it on github.

Redeclaring _parseOptions() is utilitarian, it allows to personalize a label with a custom text without having to declare its class again. Otherwise, without array_merge_recursive(), the 'label' array declared in the view would replace  the one in $_inputDefaults.

Redeclaring create() is mandatory in order to add the class "form-horizontal" to the form declaration.

Redeclaring inputDefaults() is also mandatory, otherwise the values of protected $_inputDefaults can be replaced by an empty array.

Finally, in order to use this helper in a transparent way in your views with the $this->Form->input() syntax, dont forget to create an alias for the FormHelper in your AppController.php or in the controller where you declare the Form Helper.

public $helpers = array('Form' => array('className' => 'BootstrapForm'));
This page belongs to the following categories: news , CakePHP , Code.


Add a comment

Petits fours baked