私は、Kenticoにカスタムレイアウト機能と同様にフォームビルダーが組み込まれていることを認識しています。独自のCSSルールセットを使用してフォームをインポートすることは可能ですか?Kenticoのカスタムフォーム
例えば、私は次の形式を持っている: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>
は、既存のkenticoサイトにこのフォームとその仕様をインポートする方法はありますか?
これは意味がありますが、私はCSSを追加する場所を少し失っていますか? –
私はレイアウトページを見てきましたが、個々のスタイルがどこにあるのか混乱しています。または、一度に1つずつスタイルを追加しますか? –
CSSファイルを作成し、HEAD HTMLまたはCSS Stylesheet Webパーツを使用してオンラインフォームを使用しているテンプレートで、そのCSSファイルを参照できます。インラインスタイルを使用することもできますが、できるだけ避ける必要があります。 –