...
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
## This snippet contains custom fields for inclusion in to the checkout <div class="row js-show-shipping"> <div class="columns small-16"> <div class="UcCustomTable"> <div class="UcCustomTableTitle"> <h2>Complete the following, if applicable.</h2> </div> <div class="UcCustomTableHeading"> <div class="UcCustomTableCellUcCustomTableRow"> <p>Table Heading</p> <div class="UcCustomTableCell"> </div> <h3>Custom Field 1 </div>Label</h3> <div class="UcCustomTableRow"> </div> <div class="UcCustomTableCell"> <h3>Custom Field 1 Label</h3> </div> <div class="UcCustomTableCell"> <input type='text' class="<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField1()"/><br> </div> </div> <div class="UcCustomTableRow"> <div class="UcCustomTableCell"> <p>Custom<h3>Custom Field 2 Label</p>h3> </div> <div class="UcCustomTableCell"> <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField2()"/><br> </div> <div class="UcCustomTableRow"> <div class="UcCustomTableCell"> <p>Custom<h3>Custom Field 3 Label</p>h3> </div> <div class="UcCustomTableCell"> <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField3()"/><br> </div> <div class="UcCustomTableRow"> <div class="UcCustomTableCell"> <p>Custom<h3>Custom Field 4 Label</p>h3> </div> <div class="UcCustomTableCell"> <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField4()"/><br> </div> <div class="UcCustomTableRow"> <div class="UcCustomTableCell"> <p>Custom<h3>Custom Field 5 Label</p>h3> </div> <div class="UcCustomTableCell"> <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField5()"/><br> </div> <div class="UcCustomTableRow"> <div class="UcCustomTableCell"> <p>Custom<h3>Custom Field 6 Label</p>h3> </div> <div class="UcCustomTableCell"> <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField6()"/><br> </div> <div class="UcCustomTableRow"> <div class="UcCustomTableCell"> <p>Custom<h3>Custom Field 7 Label</p>h3> </div> <div class="UcCustomTableCell"> <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField7()"/><br> </div> </div> </div> </div> </div> |
Example CSS for the Custom Field Div's
...
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<style type="text/css">
.UcCustomTable
{
display: table;
}
.UcCustomTableTitle
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.UcCustomTableHeading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.UcCustomTableRow
{
display: table-row;
}
.UcCustomTableCell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style> |
...