Cake PHP - Applying CSS to forms.

Today I will explain in a nutshell how to apply a css style to a form generated by the Form Helper. My form is very simple and serves as a registration form. You can find in many places how to create a model and a controller for such form e.g., here: http://planetcakephp.org/aggregator/items/1620-creating-a-community-in-five-minutes-with-cakephp. Therefore I will focus only on how to apply some css to this form.

My form is very simple and serves as a registration form. It has only 4 required fields and is generated by the following view:

<?php echo $form->create('User', array('class'=>'form'));?>

Sign Up

Please complete the form below. <?php echo $form->input('username', array( 'label' => 'Login', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror' ) )); echo $form->input('password', array( 'label' => 'Password', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror' ) )); echo $form->input('password_confirm', array( 'label' => 'Confirm password', 'type'=>'password', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror' ) )); echo $form->input('name', array( 'label' => 'Name', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror' ) )); echo $form->input('surname', array( 'label' => 'Surname', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror' ) )); echo $form->input('email', array( 'label' => 'E-mail', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror' ) )); echo $form->input('city_id', array( 'label' => 'City', 'div'=>'formfield', 'error' => array( 'wrap' => 'div', 'class' => 'formerror'))); ?>
<?php echo $form->end('Submit');?>

Some explanations:

  • To add a class to a form tag:
    $form->create('User', array('class'=>'form')) 

    generates:

  • To add a class to an input:
    echo $form->input('username',  array( 
    			'label' => 'Login', 
    			'div'=>'formfield', 
    			'error' => array(
    				'wrap' => 'div', 
    				'class' => 'formerror'
    				)
    			));

    generates this:

    An error in this case will appear in:

A sample css style may look like this:

.form{
	font-family: Verdana;    
	font-size:1em;
	margin:1em;
	padding:1em;	
}

.form p.formtitle{
	color: #026475;
	font-size:1.3em;
	font-weight: bold;
}

.form fieldset{
	width:40em;
	border:1px solid #FFE545;	
	background-image: url(../img/Contact.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.form fieldset legend{
	color: #026475;
}

.formfield{
	width:30em;
	padding:5px;
}

.formfield label{
	display:block;
	float:left;
	width:12em;
	padding:1px;
	color:#C2A34F;
	text-align:right;
}

.formfield input, .formfield  select{
	padding:0.15em;
	width:14em;
	border:1px solid #ddd;
	background:#FEFBAF;
	
	font-family: Verdana;    
	font-size:1em;
	
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
}

.formfield input:hover, input:focus {
	border-color:#c5c5c5;
	background:#f6f6f6;
} 

.required input {
	border:1px solid #FBB829;
}

.form .submit input{
	font-family: Verdana;    
	font-size:1em;
	margin-top: 0.3em;
}

.formerror{
	position:relative;
	left:12.1em;
	color:#FBB829;
}

The result:

nazwy 

More interesting sources about how to use css with forms:

Very interesting article about forms design patterns:

and, btw, some hint how to do CakePHP forms more secure using Security component:

Enjoy!