Kentico 中的自定义表单

Question

我知道 Kentico 有一个内置的表单生成器和一个自定义布局功能。是否可以导入具有自己特定的一组 css 规则的表单？

比如我有如下形式：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 站点？

Answer 1

您可以部分访问，您可以使用自定义布局在您的项目周围获取任何包装 div，并且您可以通过表单中的字段选项卡将您自己的 class/style 添加到输入和标签中。您将无法做的一件事是像 html 中一样包含表单标签。 ASP.Net 页面标记中只允许一种形式，除非它托管在 iframe 或部分标记中以外的其他内容中。您可以将样式元素和自定义布局与一些 jquery 结合起来，以获得非常接近相同的标记。

还有其他选择，但上面提到的至少可以帮助您入门。

Answer 2

你最好的选择，我们经常做的是做以下事情：-

使用 Kentico 字段创建表单控制字段。基本上在 kentico 中映射您的字段。
使用自定义布局生成表单的基本结构。
转到自定义布局的源代码并添加和包装 DIVS、类以及关键元素周围的 ID。

这种方法将解决大多数用例，除非您有复杂的表单功能。

干杯，车坛

Answer 3

从技术上讲，无法直接导入该表单。完成此任务的最简单方法是重新创建表单并添加自定义布局以按照您想要的方式对其进行格式化。

我猜您会运行遇到的问题是，使用 Kentico 的表单和表单控件会导致您的布局与现有布局大不相同。因此，您需要根据 Kentico 添加的其他元素相应地调整 CSS 规则。

您可以将 css 存储在主 css 文件中，如果您选择或将 HTML head webpart 添加到您的页面模板并在那里添加您的 css。

Kentico 中的自定义表单

Custom Forms in Kentico

forms

customization

kentico