insurance quote form

by Laura Kishimoto

HTML

<script src="http://www.monkeyphysics.com/mootools/download/jsmin/2/datepicker.js"></script>
<h1>New claim report</h1>

<form name="claim" method="post" action="send_form_email.php">
    
    <label for="date">Current date: </label>
    <input type="text" name="currentdate">
    
    <label for="name">Loss reported by: </label>
    <input type="text" name="name" maxlength="40">
    
    <label for="agent">Agent: </label>
    <input type="text" name="agent" maxlength="40">
    
    <label for="policy">Policy number: </label>
    <input type="text" name="policy" maxlength="40">
    
    <label for="claimdate">Date of loss: </label>
    <input type="text" name="lossdate">
    
    <label for="coclaim">Co claim number: </label>
    <input type="text" name="coclaim" maxlength="40">
    
    <label for="insured">Insured: </label>
    <input type="text" name="insured" maxlength="40">
    
    <label for="address">Mailing address: </label>
    <textarea  name="address" maxlength="1000" cols="30" rows="2"></textarea> 
    
    <label for="city">City: </label>
    <input type="text" name="city" maxlength="40">
    
    <label for="province">Province: </label>
    <select id="prov" name="prov">
        <option value="BC">British Columbia</option>
        <option value="AB">Alberta</option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NF">Newfoundland</option>
        <option value="NT">Northwest Territories</option>
        <option value="NS">Nova Scotia</option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">Prince Edward Island</option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
        <option value="YT">Yukon Territory</option>
    </select>
    
    <label for="postalcode">Postal code: </label>
    <input type="text" name="name" maxlength="7">
    
    <label for="phone">Phone...

CSS

/* form */

label {
    float: left;
    clear: both;
    width: 180px;
    text-align: right;
    margin: 0 6px 6px 0;
}
input, select, textarea {
    float: left;
    width: 300px;
    margin-bottom: 6px;
}
form {
    width: 500px;
    padding: 0 0 20px 20px;
}

/* basic */

body {
    color: #333333;
    font-family: arial, calibri, sans serif;
    font-size: 13px;
}
h1, h2, h3, h4, h5, h6 {
    color: #008080;
    font-weight: bolder;
    clear: both;
}

h1 {
    font-size: 24px;
    margin: 15px 0;
}

JavaScript

var mydate = new Date()
var theyear = mydate.getYear()
if (theyear < 1000) theyear += 1900
var theday = mydate.getDay()
var themonth = mydate.getMonth() + 1
if (themonth < 10) themonth = "0" + themonth
var theday = mydate.getDate()
if (theday < 10) theday = "0" + theday

var displayfirst = themonth
var displaysecond = theday
var displaythird = theyear

document.claim.currentdate.value = displayfirst + "-" + displaysecond + "-" + displaythird