Custom Forms in Kentico - forms

Question

I am aware Kentico has a form-builder built in as well as a custom layout feature. Is it possible to import a form with its own particular set of css rules?
For example, I have the 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 this section to briefly describe the purpose of your 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 and 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 all that 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 you have obtained any degrees/diplomas, please list them here</p>
<textarea class="bigTextArea"></textarea>
<p>If non-degree, how many undergraduate courses have you 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 and 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 the all other income sources, including other bursaries and other forms of financial assistance along with the amount for each."></textarea> <div class="clearFix"></div>
<p>Have you received an 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 to Travel For Course</p>
<div class="clearFix"></div>
<input type="text" name="distanceToCourseBox" id="distanceToCourseBox" />
<div class="clearFix"></div>
<p>Please list all expenses this bursary will be 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 any and all 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 any other information you believe may assist in your 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 at least TWO references who can speak to your 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 the following you are confirming that you have included current copies of both your Ontario Teaching Certificate of Qualifications and Registration and a copy of the course description, including cost, date of course commencement and the name of the 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 a way to import this form and its specifications into a pre-existing kentico site?

Answer 1

Your best possible bet, which we often do a lot will be to do following:-
Create you form control fields using Kentico fields. Basically mapping your fields in kentico.
Use custom layout to generate basic structure of your form.
Go to source of your custom layout and add and wrapper DIVS, Classes, and IDs around your key elements.
This approach will solve most of the use cases, unless you have a complex form functionality.
Cheers,
Chetan

Answer 2

You can get partially there, you can use a custom layout to get any wrapping divs around your items, and you can add your own class/style to the inputs and labels through the fields tab in the form. One thing you won't be able to do is to include the form tag as in your html. ASP.Net only allows one form in the page markup, unless it is hosted in an iframe or something other than being in the part markup. You could combine the styling elements and custom layout with some jquery to get very close to the same markup.
There are other options, but the ones mentioned above could at least get you started.

Answer 3

Technically speaking there is no way to import that form out of the box. The easiest way to complete this task is to recreate the form and add a custom layout to format it the way you want.
The problem I'm guessing you'll run into though is using Kentico's forms and form controls will cause your layout to be considerably different than what you have. So you'll need to adjust your CSS rules accordingly based on the additional elements that are added by Kentico.
You can store your css in the main css file if you choose or add a HTML head webpart to your page template and add your css there.