9 YEARS AGO

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 form.

sliding_labels_contact_form.jpg

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 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


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 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