Booking Form Sample with Auto Responder
1) Create a chunk for the form and add form code.
[[!FormIt? &hooks=`spam,email,FormItAutoResponder,redirect` &emailTpl=`bookingFormTpl` [[- 'This is the name of your email template chunk' ]] &emailTo=`[email protected]` &emailSubject=`[[++site_name]] Booking Form` &redirectTo=`6` &validate=`firstname:required, lastname:required, email:email:required, phone:required, address:required, suburb:required, propertytype:required, services:required` &fiarTpl=`bookingFormResponderTpl` [[- 'This is the name of your email response chunk' ]] &fiarSubject=`Subject` &fiarToField=`email` &fiarFrom=`[email protected]` &fiarFromName=`YourName` &fiarReplyTo=`[email protected]` ]]
<form action="[[~[[*id]]]]" method="post" class="txtbl">
<div class="row">
<div class="col-md-12">
<h2>Your Information</h2>
<div class="form-group col-md-6">
<label class="sr-only" for="firstname">First Name *</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name *" value="[[+fi.firstname]]">[[!+fi.error.firstname]]
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="lastname">Last Name *</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name *" value="[[+fi.lastname]]">[[!+fi.error.lastname]]
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="email">Email address *</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email address *" value="[[+fi.email]]">[[!+fi.error.email]]
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="phone">Phone Number *</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number *" value="[[+fi.phone]]">[[!+fi.error.phone]]
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Property Details</h2>
<div class="form-group col-md-12">
<label class="sr-only" for="firstname">Inspection Address *</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Address *" value="[[+fi.address]]">[[!+fi.error.address]]
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="sr-only" for="lastname">Suburb *</label>
<input type="text" class="form-control" id="suburb" name="suburb" placeholder="Suburb *" value="[[+fi.suburb]]">[[!+fi.error.suburb]]
</div>
<div class="form-group col-md-4">
<label class="sr-only" for="postcode">Post Code</label>
<input type="number" class="form-control" id="postcode" name="postcode" placeholder="Post Code" value="[[+fi.postcode]]">[[+fi.error.postcode]]
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="sr-only" for="state">State</label>
<span>Select State</span>
<select name="state" value="[[!+fi.state]]">
<option value="QLD" [[!+fi.state:FormItIsSelected=`qld`]]>QLD</option>
<option value="NSW" [[!+fi.state:FormItIsSelected=`nsw`]]>NSW</option>
<option value="ACT" [[!+fi.state:FormItIsSelected=`act`]]>ACT</option>
<option value="VIC" [[!+fi.state:FormItIsSelected=`vic`]]>VIC</option>
<option value="SA" [[!+fi.state:FormItIsSelected=`sa`]]>SA</option>
<option value="WA" [[!+fi.state:FormItIsSelected=`wa`]]>WA</option>
<option value="NT" [[!+fi.state:FormItIsSelected=`nt`]]>NT</option>
<option value="TAS" [[!+fi.state:FormItIsSelected=`tas`]]>TAS</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="sr-only" for="propertytype">Type of Property * </label>
<span>* Type Of Property:</span> <span>[[!+fi.error.propertytype]]</span></br>
<input type="hidden" name="propertytype[]" value="" />
<label><input type="radio" id="propertytype1" name="propertytype[]" placeholder="House" value="House" [[!+fi.propertytype:FormItIsChecked=`House`]]> House</label>
<br>
<label><input type="radio" id="propertytype2" name="propertytype[]" placeholder="Unit/Apartment" value="Unit/Apartment" [[!+fi.propertytype:FormItIsChecked=`Unit/Apartment`]]> Unit/Apartment</label>
<br>
<label><input type="radio" id="propertytype3" name="propertytype[]" placeholder="Townhouse" value="Townhouse" [[!+fi.propertytype:FormItIsChecked=`Townhouse`]]> Townhouse</label>
<br>
<label><input type="radio" id="propertytype4" name="propertytype[]" placeholder="Property On Acreage" value="Property On Acreage" [[!+fi.propertytype:FormItIsChecked=`Property On Acreage`]]> Property On Acreage</label>
<br>
<label><input type="radio" id="propertytype5" name="propertytype[]" placeholder="Duplex" value="Duplex" [[!+fi.propertytype:FormItIsChecked=`Duplex`]]> Duplex</label>
<br>
<label><input type="radio" id="propertytype6" name="propertytype[]" placeholder="Commercial" value="Commercial" [[!+fi.propertytype:FormItIsChecked=`Commercial`]]> Commercial</label>
<br>
</div>
<div class="form-group col-md-6">
<label for="beds">Number of Bedrooms</label>
<select name="beds" value="[[!+fi.beds]]">
<option value="0" [[!+.fi.beds:FormItIsSelected='0']]>0</option>
<option value="1" [[!+.fi.beds:FormItIsSelected='1']]>1</option>
<option value="2" [[!+.fi.beds:FormItIsSelected='2']]>2</option>
<option value="3" [[!+.fi.beds:FormItIsSelected='3']]>3</option>
<option value="4" [[!+.fi.beds:FormItIsSelected='4']]>4</option>
<option value="5+" [[!+.fi.beds:FormItIsSelected='5+']]>5+</option>
</select>
<label for="baths">Number of Bathrooms</label>
<select name="baths" value="[[!+fi.baths]]">
<option value="0" [[!+.fi.baths:FormItIsSelected='0']]>0</option>
<option value="1" [[!+.fi.baths:FormItIsSelected='1']]>1</option>
<option value="2" [[!+.fi.baths:FormItIsSelected='2']]>2</option>
<option value="3" [[!+.fi.baths:FormItIsSelected='3']]>3</option>
<option value="4" [[!+.fi.baths:FormItIsSelected='4']]>4</option>
<option value="5+" [[!+.fi.baths:FormItIsSelected='5+']]>5+</option>
</select>
</div>
</div>
<div class="row">
<h2>Services Required <span>[[!+fi.error.services]]</span> </h2>
<div class="form-group col-md-6">
<label class="sr-only" for="services">Services Required *</label>
<input type="hidden" name="services[]" value="" />
<label><input type="checkbox" id="services1" name="services[]" placeholder="Building and Pest Inspections" value="Building and Pest Inspections <br>" [[!+fi.services:FormItIsChecked=`Building and Pest Inspections`]]> Building and Pest Inspections</label>
<br>
<label><input type="checkbox" id="services2" name="services[]" placeholder="Termite Barriers" value="Termite Barriers <br>" [[!+fi.services:FormItIsChecked=`Termite Barriers`]]> Termite Barriers</label>
<br>
<label> <input type="checkbox" id="services3" name="services[]" placeholder="New House/Unit Defect Report" value="New House/Unit Defect Report <br>" [[!+fi.services:FormItIsChecked=`New House/Unit Defect Report`]]> New House/Unit Defect Report</label>
<br>
<label> <input type="checkbox" id="services4" name="services[]" placeholder="Structural Failure" value="Structural Failure <br>" [[!+fi.services:FormItIsChecked=`Structural Failure`]]> Structural Failure</label>
<br>
<label><input type="checkbox" id="services5" name="services[]" placeholder="Home Hand Over Inspections" value="Home Hand Over Inspections <br>" [[!+fi.services:FormItIsChecked=`Home Hand Over Inspections`]]> Home Hand Over Inspections</label>
<br>
<label><input type="checkbox" id="services6" name="services[]" placeholder="Concrete Inspections" value="Concrete Inspections <br>" [[!+fi.services:FormItIsChecked=`Concrete Inspections`]]> Concrete Inspections</label>
<br>
<label><input type="checkbox" id="services7" name="services[]" placeholder="Pest Management" value="Pest Management <br>" [[!+fi.services:FormItIsChecked=`Pest Management`]]> Pest Management</label>
</div>
<div class="form-group col-md-6">
<label><input type="checkbox" id="services8" name="services[]" placeholder="General Pest Spray" value="General Pest Spray <br>" [[!+fi.services:FormItIsChecked=`General Pest Spray`]]> General Pest Spray</label>
<br>
<label><input type="checkbox" id="services9" name="services[]" placeholder="Asbestos Identifications" value="Asbestos Identifications <br>" [[!+fi.services:FormItIsChecked=`Asbestos Identifications`]]> Asbestos Identifications</label>
<br>
<label><input type="checkbox" id="services10" name="services[]" placeholder="Rental Maintenance Report" value="Rental Maintenance Report <br>" [[!+fi.services:FormItIsChecked=`Rental Maintenance Report`]]> Rental Maintenance Report</label>
<br>
<label><input type="checkbox" id="services11" name="services[]" placeholder="Storm Damage" value="Storm Damage <br>" [[!+fi.services:FormItIsChecked=`Storm Damage`]]> Storm Damage</label>
<br>
<label><input type="checkbox" id="services12" name="services[]" placeholder="Carpentry Inspections" value="Carpentry Inspections <br>" [[!+fi.services:FormItIsChecked=`Concrete Inspections`]]> Carpentry Inspections</label>
<br>
<label><input type="checkbox" id="services13" name="services[]" placeholder="Roofing and Guttering Inspections" value="Roofing and Guttering Inspections <br>" [[!+fi.services:FormItIsChecked=`Roofing and Guttering Inspections`]]> Roofing and Guttering Inspections</label>
<br>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="sr-only" for="comment">Comments/Details</label>
<textarea class="form-control" id="comment" name="comment" placeholder="Comments/Details">[[+fi.comment]]</textarea>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 text-xs-right">
<button type="submit" id="submit" class="btn btn-primary hvr-grow">Submit</button>
</div>
</div>
</form>
2) Create a chunk for the form email response:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Booking Form</title>
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
h1{font-size:18px;}
h2{font-size:16px;color:#dd3743;}
.form-row{background-color:#eee;}
</style>
</head>
<body>
<h1>[[++site_name]] Booking Form</h1>
<table border="0" cellspacing="0" cellpadding="5" width="620">
<tr>
<td><h2>Customer Details</h2></td>
</tr>
<tr>
<td width="30%" class="form-row"><strong>First Name</strong></td>
<td width="70%" class="form-row">[[+firstname]]</td>
</tr>
<tr>
<td><strong>Last Name</strong></td>
<td>[[+lastname]]</td>
</tr>
<tr>
<td class="form-row"><strong>Email</strong></td>
<td class="form-row">[[+email]]</td>
</tr>
<tr>
<td><strong>Phone Number</strong></td>
<td>[[+phone]]</td>
</tr>
<tr>
<td><h2>Property Details</h2></td>
</tr>
<tr>
<td class="form-row"><strong>Address</strong></td>
<td class="form-row">[[+address]]</td>
</tr>
<tr>
<td><strong>Suburb</strong></td>
<td>[[+suburb]]</td>
</tr>
<tr>
<td class="form-row"><strong>Post Code</strong></td>
<td class="form-row">[[+postcode]]</td>
</tr>
<tr>
<td><strong>State</strong></td>
<td>[[+state]]</td>
</tr>
<tr>
<td class="form-row"><strong>Property Type</strong></td>
<td class="form-row">[[+propertytype]]</td>
</tr>
<tr>
<td><strong>Number of Beds</strong></td>
<td>[[+beds]]</td>
</tr>
<tr>
<td class="form-row"><strong>Number of Bathrooms</strong></td>
<td class="form-row">[[+baths]]</td>
</tr>
<tr>
<td><h2>Services Required</h2></td>
</tr>
<tr>
<td class="form-row"><strong>Services</strong></td>
<td class="form-row">[[+services]]<br></td>
</tr>
<tr>
<td><strong>Additional Comments/Details</strong></td>
<td>[[+comment]]</td>
</tr>
</table>
</body>
</html>
3) Create a chunk for the form email responder that get sents to the form filler:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.form-row {
background-color: #eeeeee;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
color:#666;
}
</style>
</head>
<body>
<img src="a logo maybe" width="400" alt="logo">
<h1>[[++site_name]] Booking Form</h1>
<p>Thank you for contacting .</p>
<p style="color:red; font-size:15px;">*PLEASE NOTE YOUR BOOKING IS NOT FINALISED*</p>
<p>A member of our staff will get back to you as soon as possible to confirm your quote and the date and time of your inspection.</p>
<p>If you have any questions or if your matter is urgent, please phone .... or email <a href="mailto:">[email protected]</a> to get in touch with us straight away.</p>
</body>
</html>
4) Create your contact page (resource) and add the modx call for the contact form chunk in the content area
[[$contact_form]]
Get In Touch
Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!