index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Ajax contact form</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
			$('myForm').addEvent('submit', function(e) {

			new Event(e).stop();
			var log = $('log_res').empty().addClass('ajax-loading');
			this.send({
				update: log,
				onComplete: function() {
					log.removeClass('ajax-loading');
				}
			});
			});
		});
	</script>
</head>
<body>
	<div id="log">
	<div id="log_res">
		<!-- spanner -->
	</div>
	</div>
	<form id="myForm" action="send.php" method="get" name="myForm">
	<div id="form_box">
		<div>
			<p>
				First Name:
			</p><input type="text" name="first_name" value="" />
		</div>
		<div>
			<p>
				Last Name:
			</p><input type="text" name="last_name" value="" />
		</div>
		<div>
			<p>
				Phone Number:
			</p><input type="text" name="phone" value="" />
		</div>
		<div>
			<p>
				E-Mail:
			</p><input type="text" name="e_mail" value="" />
		</div>
		<div>
			<p>
				Referred By:
			</p><select name="referred_by" class="validate[optional]">
					<option value=""> </option>
                    <option value="Word of mouth"> Word of mouth </option>
                    <option value="Search Engine"> Search Engine </option>
                    <option value="Yellow Pages"> Yellow Pages </option>
                    <option value="Expo/Trade Show"> Expo/Trade Show </option>
                    <option value="Past client"> Past client </option>
                    <option value="Press advert"> Press advert </option>
                    <option value="Signage"> Signage </option>
                </select>
		</div>
		<div>
			<p>
			    Event Type/Theme:
			</p><input type="text" name="event_type" value="" />
		</div>
		<div>
			<p>
				Event Date(approx):
			</p><input type="text" name="event_date" value="" />
		</div>
		<div>
			<p>
				Venue:
			</p><input type="text" name="venue" value="" />
		</div>
		<div>
			<p>
				Number of Guests:
			</p><input type="text" name="num_guests" value="" />
		</div>
		<div>
			<p>
				Budget:
			</p><input type="text" name="budget" value="" />
		</div>
		<div>
			<p>
				Decor Required:
			</p><br clear="all"/>
			<div class="one_column">
                <input value="Entry" name="entry" class="validate[optional]" type="checkbox" />
                <label>Entry</label>
            </div>
            <div class="one_column">
                <input value="Dance floor" name="dance_floor" class="validate[optional]" type="checkbox" />
            	<label>Dance floor</label>
            </div>
            <div class="one_column">
                <input value="Stage" name="stage" class="validate[optional]" type="checkbox" />
                <label>Stage</label>
            </div>
            <div class="one_column">
                <input value="Ceiling" name="ceiling" class="validate[optional]" type="checkbox" />
                <label>Ceiling</label>
            </div>
            <div class="one_column">
                <input value="Table" name="table" class="validate[optional]" type="checkbox" />
                <label>Table</label>
            </div>
		</div>
		<div>
			<p>
				Message:
			</p><br clear="all" /><textarea name="themessage" cols="40" rows="5"></textarea>
		</div>
		<div class="hr">
			<!-- spanner -->
		</div><input type="submit" name="button" id="submitter" /></div>
	</form>
</body>
</html>