2016-08-08 15 views
0

私は、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サイトにこのフォームとその仕様をインポートする方法はありますか?

答えて

4

あなたの最善の賭け、: -

  1. があなたの作成にはKenticoフィールドを使用して制御フィールドを形成します。基本的には、フィールドをkenticoにマッピングします。

  2. カスタムレイアウトを使用してフォームの基本構造を生成します。

  3. カスタムレイアウトのソースに移動し、キー要素の周りにDIVS、クラス、IDを追加してラッパーします。

このアプローチでは、複雑なフォーム機能がない限り、ほとんどの使用例が解決されます。

乾杯、 チェタン

+0

これは意味がありますが、私はCSSを追加する場所を少し失っていますか? –

+0

私はレイアウトページを見てきましたが、個々のスタイルがどこにあるのか混乱しています。または、一度に1つずつスタイルを追加しますか? –

+0

CSSファイルを作成し、HEAD HTMLまたはCSS Stylesheet Webパーツを使用してオンラインフォームを使用しているテンプレートで、そのCSSファイルを参照できます。インラインスタイルを使用することもできますが、できるだけ避ける必要があります。 –

2

カスタムレイアウトを使用してアイテムの折り返し部分を取得したり、フォームのフィールドタブを使用して独自のクラス/スタイルを入力やラベルに追加することができます。あなたがすることができない1つのことはあなたのHTMLのようにフォームタグを含めることです。 ASP.Netは、iframeなどでホストされている場合を除いて、ページマークアップ内に1つのフォームのみを許可します。あなたは、同じマークアップに非常に近くなるように、スタイリング要素とカスタムレイアウトをいくつかのjqueryと組み合わせることができます。

他のオプションもありますが、上記のものは少なくともあなたを始められるかもしれません。私たちは、多くの場合、多くは次の操作を行うことになるん

+0

どのように正確にCSSを追加しますか? –

+0

私はレイアウトページを見てきましたが、個々のスタイルがどこにあるのか混乱しています。または、一度に1つずつスタイルを追加しますか? –

0

技術的には箱から出してそのフォームをインポートする方法はありません話します。このタスクを完了する最も簡単な方法は、フォームを再作成し、カスタムレイアウトを追加して、必要な方法でフォーマットすることです。

私はあなたがKenticoのフォームとフォームコントロールを使用しているにもかかわらず、あなたが抱いている問題はあなたのレイアウトとはかなり異なることになると思います。したがって、Kenticoによって追加された追加要素に基づいてCSSルールを調整する必要があります。

あなたのページテンプレートにHTMLヘッドウェブパーツを選択または追加してそこにCSSを追加すると、CSSのメインCSSファイルを保存できます。