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=`steven@e-cbd.com` 
&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=`youremail@gmail.com`
&fiarFromName=`YourName`
&fiarReplyTo=`youremail@gmail.com`    
]]


<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:">youremail@gmail.com</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!