Blog Post Sitefinity Forms

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/3234184/KendoFiddle/kendo.common.min.css">
<link rel="stylesheet" href="http://dl.dropbox.com/u/3234184/KendoFiddle/kendo.metro.min.css">
            <a style="display: none;" href="javascript:__doPostBack('C001$ctl00$ctl00$C006$ctl00$ctl00$expandButton_write','')"
                class="sfOptionalExpander" id="C001_ctl00_ctl00_C006_ctl00_ctl00_expandButton_write"
                onclick="return false;">Click to add</a>
            <div style="display: ;" class="sfFieldWrp" id="C001_ctl00_ctl00_C006_ctl00_ctl00_expandableTarget_write">
                <textarea class="sfTxt" id="C001_ctl00_ctl00_C006_ctl00_ctl00_textBox_write" cols="20"
                    rows="5" name="C001$ctl00$ctl00$C006$ctl00$ctl00$textBox_write"></textarea>
                <div class="sfExample" id="C001_ctl00_ctl00_C006_ctl00_ctl00_exampleLabel_write">
                    Please describe yourself in as much obnoxious detail as possible
                </div>
            </div>
            <div style="display: none;" id="C001_ctl00_ctl00_C006_ctl00_ConditionalTemplates">
                <div id="ClientTemplatePanel_C006">
                    <div class="sfTxtLbl" id="titleLabel_read_C006">
                    </div>
                    <div class="sfTxtContent" id="textLabel_read_C006">
                    </div>
                    <p class="sfDescription" id="descriptionLabel_read_C006">
                    </p>
                </div>
            </div>
        </div>
        <div class="sfFormSubmit sfSubmitBtnSmall">
            <input type="submit" id="C001_ctl00_ctl00_C002" onclick="return Telerik.Sitefinity.Web.UI.Fields.FormManager.validateGroup(&quot;sf_sampleformC001&quot;);"
                value="Submit" name="C001$ctl00$ctl00$C002">
        </div>
    </div>
</div>

CSS

.sfFieldWrp textarea{
   width: 800px;   
}

.sfExample{
    font-size: 10px;   
    margin-bottom: 20px;
}


/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 * Remove excess height in iOS5 devices
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */

[hidden] {
    display: none;
}


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */

body {
    margin: 0;
}


/*...

JavaScript

$(document).ready(function(){
    /* Add kendo common element styling */
    //Input Boxes
    $(".name .sfTxt").addClass("k-input"); //Only style the first box, it's just a plain textbox
    //Submit Button
    $(".sfFormSubmit input").addClass("k-button");

    /* Create kendo objects  */    
    //Dropdown Lists
    $(".sfDropdownList select").kendoDropDownList();
    
    //Rich Text Editors
    $(".sfFieldWrp textarea").kendoEditor();
    
    //Numeric Text Box
    $(".age .sfTxt").kendoNumericTextBox({
        min:0
    });
});