Below is an example of the code generated by Connect. It's a basic Job Ticket with extra fields added through the Connect interface (see screenshot). The second screenshot shows how the preview would look in Connect.
<html xmlns:EnfocusConnectNS="http://www.enfocus.com/2013/EnfocusConnectMetadataPreset">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
...
</script>
<link rel="stylesheet" type="text/css" href="CSS/EnfocusSwitchMetadata.css">
<title>Preview of Job Ticket: 'Basic JT'</title>
</head>
<body style="background: url(Images/BackgroundImage) no-repeat fixed center" onload="OnLoad()">
<form onsubmit="OnFormSubmit(event)" action="http://" method="post" autocomplete="on" name="EnfocusConnectMetadata" enctype="application/x-www-form-urlencoded">
<fieldset>
<p class="introduction">Job Ticket for '%1'</p>
<p class="note">Fields marked with an asterisk (<abbr title="Required Field">*</abbr>) are required</p>
<div id="MF_1">
<label for="MF_1_text" title="">Name:<abbr title="Required Field">*</abbr></label>
<input value="" name="MF_1" id="MF_1_text" required="" onchange="EnableChildNodes([[this,'','','']])" type="text">
</div>
<div id="MF_2">
<label for="MF_2_number" title="">Mobile:<abbr title="Required Field">*</abbr></label>
<input value="0" name="MF_2" id="MF_2_number" required="" onchange="EnableChildNodes([[this,'','','']])" type="number">
</div>
<div id="MF_3">
<label for="MF_3_date" title="">Consignment Date:<abbr title="Required Field">*</abbr></label>
<fieldset class="datetime">
<input name="MF_3" type="hidden" id="MF_3_date" required="" onchange="EnableChildNodes([[this,'','','']])" value="2016-04-19" updateonload="true" onload="OnDateFieldLoading( 'MF_3' )">
<div>
<label for="MF_3_year">Year</label>
<select id="MF_3_year" name="MF_3_year" onchange="DateChanged( 'MF_3' )">
<option value="2011">2011</option>
<option value="2012">2012</option>
...
<option value="2016" selected>2016</option>
...
</select>
</div>
<div>
<label for="MF_3_month">Month</label>
<select id="MF_3_month" name="MF_3_month" onchange="DateChanged( 'MF_3' )">
<option value="1">01</option>
...
</select>
</div>
<div>
<label for="MF_3_day">Day</label>
<select id="MF_3_day" name="MF_3_day" onchange="DateChanged( 'MF_3' )">
...
</select>
</div>
</fieldset>
</div>
<div id="MF_4">
<label for="MF_4_time" title="">Consignment Time:</label>
<fieldset class="datetime">
<input name="MF_4" type="hidden" id="MF_4_time" value="" updateonload="true" onload="OnTimeFieldLoading( 'MF_4' )">
<div>
<label for="MF_4_hour">Hour</label>
<select id="MF_4_hour" name="MF_4_hour" onchange="TimeChanged( 'MF_4' )">
...
</select>
</div>
<div>
<label for="MF_4_minute">Minute</label>
<select id="MF_4_minute" name="MF_4_minute" onchange="TimeChanged( 'MF_4' )">
...
</select>
</div>
<div>
<label for="MF_4_ampm"></label>
<select id="MF_4_ampm" name="MF_4_ampm" onchange="TimeChanged( 'MF_4' )">
<option value="AM">AM</option>
<option value="PM" selected>PM</option>
</select>
</div>
</fieldset>
</div>
<div id="MF_5">
<label for="MF_5_select" title="">Location:<abbr title="Required Field">*</abbr></label>
<select name="MF_5" id="MF_5_select" required="" onchange="EnableChildNodes([[this,'','','']])">
<option value="North" selected>North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
</select>
</div>
<div id="MF_6">
<label for="MF_6_select" title="">Have a coupon:</label>
<select name="MF_6" id="MF_6_select" onchange="EnableChildNodes( [[this,'MF_7','Equals','Yes']] )">
<option value="Yes">Yes</option>
<option value="No" selected>No</option>
</select>
</div>
<div id="MF_7" style="display: none;">
<label for="MF_7_number" title="">Coupon Code:</label>
<input value="0" name="MF_7" id="MF_7_number" type="number">
</div>
<input type="submit" value="Submit" class="controls">
</fieldset>
</form>
</body>
</html>