---
title:        "BizForm with Sliding Labels"
description:  "You might have noticed the script I used on my Contact form. I thought it would be nice to share the steps needed to integrate it on your own KenticoCMS website."
url:          https://www.jeroenfurst.nl/blog/BizForm-with-Sliding-Labels
date:         2010-01-24
category:     Forms
tags:         [Forms]
reading_time: 1
---

# BizForm with Sliding Labels

> You might have noticed the script I used on my Contact form. I thought it would be nice to share the steps needed to integrate it on your own KenticoCMS website.

You might have noticed the "Sliding Labels" script I used on my [Contact](~/Contact) form.
 
 [![sliding_labels_contact_form.jpg](~/getContentAsset/aac8c2b9-5b70-4392-a488-a15546d4afa7/310c1ea5-13ca-4d75-95a0-620f51989b44/6e3e2778_sliding_labels_contact_form.jpg.jpg)](~/Contact)
 
 I thought it would be nice to share the steps needed to integrate it on your own KenticoCMS website.
 
 
 **Step 1. Create a bizform with custom form layout**
 
 Add a bizform to your website and create a custom form layout. Below you can find the custom form layout I used.

<div id="contact">
 <div id="name-wrap" class="slider">$$label:Name$$ $$input:Name$$ $$validation:Name$$</div><!--/#name-wrap-->
 <div id="email-wrap" class="slider">$$label:Email$$ $$input:Email$$ $$validation:Email$$</div><!--/#email-wrap-->
 <div id="website-wrap" class="slider">$$label:Website$$ $$input:Website$$ $$validation:Website$$</div><!--/#website-wrap-->
 <div id="message-wrap" class="slider">$$label:Message$$ $$input:Message$$ $$validation:Message$$</div><!--/#message-wrap-->
 <div id="code-wrap" class="slider">$$label:Code$$ $$input:Code$$ $$validation:Code$$</div><!--/#code-wrap-->
 $$submitbutton$$
 </div>

Next add the bizform to a page via e.g. "Editable text" or "BizForm" web part.
 
 
 **Step 2. Download and add the scripts**
 
 Click [here](~/blog-images/Media/js/slidinglabels.js) to download the script and upload it to your KenticoCMS website. The second script needed is the jQuery Core. 
 
 Because I only want to add the scripts on the page that actually uses it, create a new template and reference the scripts in the Page Templates Header.
 
 ![sliding_labels_template-(1).jpg](~/getContentAsset/0a688df7-2710-47ba-ae33-ce25f9bee475/310c1ea5-13ca-4d75-95a0-620f51989b44/3f9f6b3e_sliding_labels_template-(1).jpg.jpg)
 
 
 **Step 3. Add the CSS**
 
 Below you can find the CSS I used to style the "Sliding Labels".

#contact { margin: auto; padding: 10px 0px 10px 75px; }
 #contact div { clear: both; position: relative; margin: 0 0 10px; }
 label { cursor: pointer; display: block; }
 input\[type="text"\] { border: 1px solid #999; padding: 5px; -moz-border-radius:4px; width: 200px; }
 input\[type="text"\]:focus { border-color: #599CD4; }
 textarea { border:1px solid #999; padding: 5px; -moz-border-radius:4px; width: 300px; }
 textarea:focus { border-color: #599CD4; }

Make sure you add the "position: relative" on the wrapper div. The rest is pure for cosmetic reasons.
 
 
 **Conclusion**
 
 There, all finished! By now you should have a working version similar to my [Contact](~/Contact) form. Please note that the "Sliding Labels" script only supports textboxes and textareas, and that a lot more work needs to be done to fully support all the controls used in BizForms.
 
 
 *Reference:* [*Form Design with Sliding Labels*](http://www.csskarma.com/blog/sliding-labels/)