<apex:page showHeader="false"> 
<!-- This script takes the endpoint URL parameter passed from the deployment 
  page and makes it the action for the form -->
<script type="text/javascript">
     (function() { 
     function handlePageLoad() {
       var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
       document.getElementById('prechatForm').setAttribute('action',
       decodeURIComponent(endpointMatcher.exec(document.location.search)[1]));
     } if (window.addEventListener) {
              window.addEventListener('load', handlePageLoad, false);
   } else { window.attachEvent('onload', handlePageLoad, false);
              }})(); 
</script>
<form method='post' id='prechatForm' class="elegant-aero"> 

<h1>Welcome! <span>Before we begin, please enter the information below</span></h1>
      First name: <input type='text' name='liveagent.prechat:FirstNameDetail'
        id='customField1' /><br />
      Last name: <input type='text' name='liveagent.prechat:LastNameDetail'
        id='customField2' /><br />
      Email address: <input type='text' name='liveagent.prechat:EmailDetail'
        id='customField3' /><br />
      <!-- Department: <select name="liveagent.prechat.buttons">
           Values are LiveChatButton IDs. 
          <option value="573a00000000001">Customer Service</option> 
          <option value="573a00000000002">Technical Support</option> 
          <option value="573a00000000001,573a00000000002">Customer Service if online, 
          otherwise Technical Support</option> 
      </select> --><br /> 

      <!-- Map liveagent.prechat:FirstNameDetail and liveagent.prechat:LastNameDetail
        custom detail to Lead's field FirstName and LastName -->
      <input type="hidden" name="liveagent.prechat.findorcreate.map:Lead"
        value="FirstName,FirstNameDetail;LastName,LastNameDetail;Email,EmailDetail" />
      
      <!-- Specify query for to match lead email address to existing record -->
      <input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Lead"
        value="Email,true" />

      <!-- Return results only if there is an exact match of email address-->
      <input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Lead"
        value="Email,true" />

      <!-- If no match in search, create a new Lead record with the mapped value
        of firstname and last name and email-->
      <input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Lead"
        value="FirstName,true;" />

      <!-- If a new Lead record has been created, open it as a subtab -->
      <input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Lead"
        value="true" />

      <!-- Save the Lead id to transcript's field LeadId -->
      <input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Lead"
        value="LeadId" />
        
      <!-- save the name and email address to the transcript for insurance -->
      <input type="hidden" name="liveagent.prechat.save:email"  value="Email__c" />  

      <input type='submit' value='Request Chat' id='prechat_submit'/> 
<style type="text/css"> 
/* Elegant Aero */
.elegant-aero {
    margin-left:auto;
    margin-right:auto;
    font: 24px "Open Sans",sans-serif;
    max-width: 500px;
    background: #99cc66;
    padding: 20px 20px 20px 20px;
    font: 12px Arial, Helvetica, sans-serif;
    color: #fff;
}
.elegant-aero h1 {
    font: 24px "Open Sans",sans-serif;
    padding: 10px 10px 10px 20px;
    display: block;
    background: #339933;
    border-bottom: 1px solid #B8DDFF;
    margin: -20px -20px 15px;
    color: #fff;
}
.elegant-aero h1>span {
    display: block;
    font-size: 11px;
}

.elegant-aero label>span {
    float: left;
    margin-top: 10px;
    color: #fff;
}
.elegant-aero label {
    display: block;
    margin: 0px 0px 5px;
}
.elegant-aero label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 15px;
    margin-top: 10px;
    font-weight: bold;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {
    color: #888;
    width: 70%;
    padding: 0px 0px 0px 5px;
    border: 1px solid #C5E2FF;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
    box-shadow: inset 0px 1px 6px #ECF3F5;
    font: 200 12px/25px Arial, Helvetica, sans-serif;
    height: 30px;
    line-height:15px;
    margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
    height:100px;
    padding: 5px 0px 0px 5px;
    width: 70%;
}
.elegant-aero select {
    background: #fbfbfb url('down-arrow.png') no-repeat right;
    background: #fbfbfb url('down-arrow.png') no-repeat right;
   appearance:none;
    -webkit-appearance:none;
   -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 70%;
}
.elegant-aero .button{
    padding: 10px 30px 10px 30px;
    background: #000;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px #4C6E91;
    -webkit-box-shadow: 1px 1px 1px #4C6E91;
    -moz-box-shadow: 1px 1px 1px #4C6E91;
    text-shadow: 1px 1px 1px #5079A3;
   
}
.elegant-aero .button:hover{
    background: #99cc66;
}
</style> 
</form> 
</apex:page>