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.
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.
.jpg.aspx)
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