i aware kentico has form-builder built in custom layout feature. possible import form own particular set of css rules?
for example, have following form: form
body { margin-left: 0; margin-top: 0; background-color: #f5f5f5; } .clearfix { clear: both; } p { font-size: 13px; margin-top: 10px; margin-bottom: 5px; margin-left: 35px; margin-top: 15px; color: #696969; float: left; } #lastname { margin-left: 300px; } .city { margin-left: 318px; } #province { margin-left: 294px; } #oid { margin-left: 294px; } .postalcode { width: 300px; height: 25px; margin-left: 35px; } #schoolname { margin-left: 285px; } #coursefee { margin-left: 268px; } #courseenddate { margin-left: 258px; } .netincome { margin-left: 255px; } .lastnamedependent { float: left; margin-left: 200px; } .agedependent { float: left; margin-left: 200px; } #ontarioteachingcert { float: left; margin-top: 10px; } #certificateofqualification { float: left; margin-top: 10px; } #letterofpermission { float: left; margin-top: 10px; } #other { float: left; margin-top: 10px; } #previousbursaryyears { margin-left: 81px; } .oectapositionreference { margin-left: 332px; } #daytimetele { margin-left: 295px; } #teachingyears { margin-left: 241px; } #membershipstatus { margin-left: 279px; } .ptitles { font-size: 18px; margin-top: 15px; margin-bottom: 8px; margin-left: 35px; color: #696969; font-weight: bold; } .thinline { height: 0.5px; width: 671px; content: ""; background-color: #cccccc; margin-left: 35px; } #lowerthinline { margin-top: 15px; height: 1px; } #firstnamebox { width: 300px; height: 25px; margin-left: 35px; } #lastnamebox { width: 300px; height: 25px; margin-left: 60px; } .addressbox { width: 300px; height: 25px; margin-left: 35px; } #oectaidbox { width: 300px; height: 25px; margin-left: 64px; } #otctextbox { width: 300px; height: 25px; margin-left: 60px; margin-bottom: 10px; } #coqtextbox { width: 300px; height: 25px; margin-left: 71px; margin-bottom: 10px; } #loptextbox { width: 300px; height: 25px; margin-left: 111px; margin-bottom: 10px; } #coursenamebox { width: 300px; height: 25px; margin-left: 35px; } #coursecostbox { width: 300px; height: 25px; margin-left: 60px; } #teachingexperiencebox { width: 300px; height: 25px; margin-left: 35px; } #undergradbox { width: 300px; height: 25px; margin-left: 35px; } #othertextbox { width: 300px; height: 25px; margin-left: 201px; margin-bottom: 10px; } #grosssalarybox { width: 300px; height: 25px; margin-left: 35px; } #netsalarybox { width: 300px; height: 25px; margin-left: 60px; } #distancetocoursebox { width: 300px; height: 25px; margin-left: 35px; } .firstnamedependentbox { width: 150px; height: 25px; margin-left: 35px; float: left; } .lastnamedependentbox { width: 150px; height: 25px; margin-left: 114px; float: left; } .agedependentbox { width: 70px; height: 25px; margin-left: 111px; } .firstnamereferencebox { width: 300px; height: 25px; margin-left: 35px; } .oectapositionreferencebox { width: 300px; height: 25px; margin-left: 60px; } #memberstatusbox { width: 300px; height: 25px; margin-left: 60px; } #startdate { width: 300px; height: 25px; margin-left: 35px; } #enddate { width: 300px; height: 25px; margin-left: 60px; } .bigtextarea { width: 667px; height: 60px; margin-left: 35px; } #dependentcomments { height: 90px; } #purposeofstudy { height: 90px; } .cityselect { width: 300px; height: 25px; margin-left: 60px; } #provinceselect { width: 300px; height: 25px; margin-left: 60px; } .unitselect { width: 300px; height: 25px; margin-left: 35px; } #schoolboardselect { width: 300px; height: 25px; margin-left: 35px; } #schoolnmaeselect { width: 300px; height: 25px; margin-left: 63px; } #bursaryyears { width: 300px; height: 25px; margin-left: 60px; } #previousbursaries { width: 300px; height: 25px; margin-left: 35px; } #otccheckbox { margin-left: 35px; margin-top: 10px; float: left; } #coqcheckbox { margin-left: 35px; margin-top: 10px; float: left; } #lopcheckbox { margin-left: 35px; margin-top: 10px; float: left; } #othercheckbox { margin-left: 35px; margin-top: 10px; float: left; } #finalconformation { float: left; margin-left: 415px; margin-top: -18px; } .daytimetelephonebox { width: 300px; height: 25px; margin-left: 60px; } #email { width: 300px; height: 25px; margin-left: 35px; } #formstyle10 { display: block; height: 100%; width: 100%; } input[type="radio"] { display: none; } .tabs { float: none; width: 800px; padding: 0; position: relative; margin: 75px 75px; list-style: none; } .tabs li { float: left; margin-right: 2px; } .tabs label { display: block; position: relative; background: #e6e6e6; height: 60px; width: 115px; margin-right: 3px; padding: 0px 15px 1px 15px; line-height: 60px; font-family: 'lucida sans'; font-size: 15px; text-align: center; color: #696969; cursor: pointer; z-index: 1; box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1); } .tabs label:hover { background: #ffffff; } .tab-content { height: 650px; width: 745px; position: absolute; display:none; z-index: 2; left: 0; top: 61px; background-color: #f5f5f5; font-size: 16px; font-family: 'lucida sans'; font-weight: normal; box-sizing:border-box; box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1); } [id^=tab]:checked + label { background: #f5f5f5; z-index: 3; } [id^=tab]:checked~[id^=tab-content] { display:block; } .tabs li:first-child { box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1); } #submitbutton { height: 30px; width: 150px; float: right; margin-right: 35px; margin-top: 15px; } html:
<form id="formstyle10" runat="server"> <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab-1" checked /> <label for="tab-1">information</label> <div id="tab-content-1" class="tab-content"> <p class="ptitles">personal information</p> <div class="clearfix"></div> <div class="thinline"></div> <div class="clearfix"></div> <p>first name</p> <p id="lastname">last name</p> <div class="clearfix"></div> <input type="text" name="firstname" id="firstnamebox" /> <input type="text" name="lastname" id="lastnamebox" /> <div class="clearfix"></div> <p>address</p> <p class="city">city</p> <div class="clearfix"></div> <input type="text" name="addressbox" class="addressbox" /> <select class="cityselect"> <option>select</option> <option>city 2</option> <option>city 3</option> <option>city 4</option> </select> <div class="clearfix"></div> <p>postal code</p> <p id="province">province</p> <div class="clearfix"></div> <input type="text" name="postalcode" class="postalcode" /> <select id="provinceselect"> <option>select</option> <option>prov 1</option> <option>prov 2</option> <option>prov 3</option> </select> <div class="clearfix"></div> <p>oecta unit</p> <p id="oid">oecta id</p> <div class="clearfix"></div> <select class="unitselect"> <option>select</option> <option>prov 1</option> <option>prov 2</option> <option>prov 3</option> </select> <input type="text" name="oectaidbox" id="oectaidbox" /> <div class="clearfix"></div> <p>school board</p> <p id="schoolname">school name</p> <div class="clearfix"></div> <select id="schoolboardselect"> <option>select</option> <option>board 1</option> <option>board 2</option> <option>board 3</option> </select> <select id="schoolnmaeselect"> <option>select</option> <option>school 1</option> <option>school 2</option> <option>school 3</option> </select> <div class="clearfix"></div> <p>email address</p> <p id="membershipstatus">membership status</p> <div class="clearfix"></div> <input type="email" name="email" id="email" /> <input type="text" name="memberstatusbox" id="memberstatusbox" /> <div class="clearfix"></div> <p>use section briefly describe purpose of study</p> <div class="clearfix"></div> <textarea class="bigtextarea" id="purposeofstudy"></textarea> </div> </li> <!-- --> <li> <input type="radio" name="tabs" id="tab-2" /> <label for="tab-2">qualifications</label> <div id="tab-content-2" class="tab-content"> <p class="ptitles">teaching qualifications</p> <div class="clearfix"></div> <div class="thinline"></div> <div class="clearfix"></div> <p>professional , academic information<br/ > involvement in oecta (i.e. committees, agm delegate, unit meetings, etc.)</p> <div class="clearfix"></div> <textarea class="bigtextarea"></textarea> <div class="clearfix"></div> <p>qualifications (check apply)</p> <div class="clearfix"></div> <input type="checkbox" name="otccheckbox" id="otccheckbox" /> <p id="ontarioteachingcert">ontario teaching certificate</p> <input type="text" name="otctextbox" id="otctextbox" placeholder="year of issue" /> <div class="clearfix"></div> <input type="checkbox" name="coqcheckbox" id="coqcheckbox" /> <p id="certificateofqualification">certificate of qualification</p> <input type="text" name="coqtextbox" id="coqtextbox" placeholder="year of issue" /> <div class="clearfix"></div> <input type="checkbox" name="lopcheckbox" id="lopcheckbox" /> <p id="letterofpermission">letter of permission</p> <input type="text" name="loptextbox" id="loptextbox" placeholder="year of issue" /> <div class="clearfix"></div> <input type="checkbox" name="othercheckbox" id="othercheckbox" /> <p id="other">other</p> <input type="text" name="loptextbox" id="othertextbox" placeholder="please specify" /> <div class="clearfix"></div> <p>qeco category</p> <p id="teachingyears">years of teaching experience</p> <div class="clearfix"></div> <select class="unitselect" id="quecocategory"> <option>select</option> <option>category a</option> <option>category a1</option> <option>category a2 </option> <option>category a3</option> <option>category a4</option> </select> <input type="text" name="teachingexperiencebox" id="teachingexperiencebox" /> <div class="clearfix"></div> <p>if have obtained degrees/diplomas, please list them here</p> <textarea class="bigtextarea"></textarea> <p>if non-degree, how many undergraduate courses have compelted?</p> <div class="clearfix"></div> <input type="text" name="undergradbox" id="undergradbox" /> <div class="clearfix"></div> </div> </li> <!-- --> <li> <input type="radio" name="tabs" id="tab-3" /> <label for="tab-3">expenses</label> <div id="tab-content-3" class="tab-content"> <p class="ptitles">expenses , financial information</p> <div class="clearfix"></div> <div class="thinline"></div> <div class="clearfix"></div> <p>name of course</p> <p id="coursefee">course fee</p> <div class="clearfix"></div> <input type="text" name="coursenamebox" id="coursenamebox" /> <input type="text" name="coursecostbox" id="coursecostbox" /> <div class="clearfix"></div> <p>course start date</p> <p id="courseenddate">course end date</p> <div class="clearfix"></div> <input type="date" name="startdate" id="startdate" /> <input type="date" name="enddate" id="enddate" /> <div class="clearfix"></div> <p>total gross salary</p> <p class="netincome">total net income</p> <div class="clearfix"></div> <input type="text" name="grosssalarybox" id="grosssalarybox" /> <input type="text" name="netsalarybox" id="netsalarybox" /> <div class="clearfix"></div> <p>other income sources</p> <div class="clearfix"></div> <textarea class="bigtextarea" placeholder="please list other income sources, including other bursaries , other forms of financial assistance along amount each."></textarea> <div class="clearfix"></div> <p>have received oecta bursary before?</p> <p id="previousbursaryyears">year(s) if applicable</p> <div class="clearfix"></div> <select id="previousbursaries"> <option>select</option> <option>yes</option> <option>no</option> </select> <input type="text" name="bursaryyears" id="bursaryyears" /> <div class="clearfix"></div> <p>distance travel course</p> <div class="clearfix"></div> <input type="text" name="distancetocoursebox" id="distancetocoursebox" /> <div class="clearfix"></div> <p>please list expenses bursary used for</p> <div class="clearfix"></div> <textarea class="bigtextarea"></textarea> </div> </li> <!-- --> <li> <input type="radio" name="tabs" id="tab-4" /> <label for="tab-4">dependents</label> <div id="tab-content-4" class="tab-content"> <p class="ptitles">dependents</p> <div class="clearfix"></div> <div class="thinline"></div> <div class="clearfix"></div> <p>please list , dependents</p> <div class="clearfix"></div> <p class="firstnamedependent">first name</p> <p class="lastnamedependent">last name</p> <p class="agedependent">age</p> <div class="clearfix"></div> <input type="text" class="firstnamedependentbox" /> <input type="text" class="lastnamedependentbox" /> <input type="text" class="agedependentbox" /> <div class="clearfix"></div> <div class="clearfix"></div> <p class="firstnamedependent">first name</p> <p class="lastnamedependent">last name</p> <p class="agedependent">age</p> <div class="clearfix"></div> <input type="text" class="firstnamedependentbox" /> <input type="text" class="lastnamedependentbox" /> <input type="text" class="agedependentbox" /> <div class="clearfix"></div> <div class="clearfix"></div> <p class="firstnamedependent">first name</p> <p class="lastnamedependent">last name</p> <p class="agedependent">age</p> <div class="clearfix"></div> <input type="text" class="firstnamedependentbox" /> <input type="text" class="lastnamedependentbox" /> <input type="text" class="agedependentbox" /> <div class="clearfix"></div> <div class="clearfix"></div> <p class="firstnamedependent">first name</p> <p class="lastnamedependent">last name</p> <p class="agedependent">age</p> <div class="clearfix"></div> <input type="text" class="firstnamedependentbox" /> <input type="text" class="lastnamedependentbox" /> <input type="text" class="agedependentbox" /> <div class="clearfix"></div> <div class="clearfix"></div> <p class="firstnamedependent">first name</p> <p class="lastnamedependent">last name</p> <p class="agedependent">age</p> <div class="clearfix"></div> <input type="text" class="firstnamedependentbox" /> <input type="text" class="lastnamedependentbox" /> <input type="text" class="agedependentbox" /> <div class="clearfix"></div> <div class="clearfix"></div> <p class="firstnamedependent">first name</p> <p class="lastnamedependent">last name</p> <p class="agedependent">age</p> <div class="clearfix"></div> <p>comments</p> <div class="clearfix"></div> <textarea class="bigtextarea" id="dependentcomments" placeholder="please list other information believe may assist in application"></textarea> <div class="clearfix"></div> </div> </li> <!-- --> <li> <input type="radio" name="tabs" id="tab-5" /> <label for="tab-5">references</label> <div id="tab-content-5" class="tab-content"> <p class="ptitles">references</p> <div class="clearfix"></div> <p>please include @ least 2 references can speak oecta involvement</p></p> <div class="clearfix"></div> <div class="thinline"></div> <div class="clearfix"></div> <p>name</p> <p class="oectapositionreference">oecta position held</p> <div class="clearfix"></div> <input type="text" name="firstnamereferencebox" class="firstnamereferencebox" /> <input type="text" name="oectapositionreferencebox" class="oectapositionreferencebox" /> <div class="clearfix"></div> <p>address</p> <p class="city">city</p> <div class="clearfix"></div> <input type="text" name="addressbox" class="addressbox" /> <select class="cityselect"> <option>select</option> <option>city 1</option> <option>city 2</option> <option>city 3</option> </select> <div class="clearfix"></div> <p>postal code</p> <p id="daytimetele">daytime telephone</p> <div class="clearfix"></div> <input type="text" name="postalcode" class="postalcode" /> <input type="tel" name="daytimetelephone" class="daytimetelephonebox" /> <div class="clearfix"></div> <br /> <p>name</p> <p class="oectapositionreference">oecta position held</p> <div class="clearfix"></div> <input type="text" name="firstnamereferencebox" class="firstnamereferencebox" /> <input type="text" name="oectapositionreferencebox" class="oectapositionreferencebox" /> <div class="clearfix"></div> <p>address</p> <p class="city">city</p> <div class="clearfix"></div> <input type="text" name="addressbox" class="addressbox" /> <select class="cityselect"> <option>select</option> <option>city 1</option> <option>city 2</option> <option>city 3</option> </select> <div class="clearfix"></div> <p>postal code</p> <p id="daytimetele">daytime telephone</p> <div class="clearfix"></div> <input type="text" name="postalcode" class="postalcode" /> <input type="tel" name="daytimetelephone" class="daytimetelephonebox" /> <div class="clearfix"></div> <div class="thinline" id="lowerthinline"></div> <p>by selecting following confirming have included current copies of both ontario teaching certificate of qualifications , registration , copy of course description, including cost, date of course commencement , name of institution.</p> <input type="checkbox" name="finalconformation" id="finalconformation" /> <div class="clearfix"></div> <input type="submit" name="submitbutton" id="submitbutton" value="submit" /> </div> </li> </ul> </form> is there way import form , specifications pre-existing kentico site?
your best possible bet, lot following:-
create form control fields using kentico fields. mapping fields in kentico.
use custom layout generate basic structure of form.
go source of custom layout , add , wrapper divs, classes, , ids around key elements.
this approach solve of use cases, unless have complex form functionality.
cheers, chetan
Comments
Post a Comment