Special reservation form

Updated: October 25, 2013, 9:45 am

For each your custom type you can create special reservation form, for example for booking some of provided sports.
Example of this form.
Here is the tutorial how you can create special reservation form like you can see in this picture:

See also video tutorial how you can set up special form:

Required plugins:

  • Contact Form 7
  • Really Simple CAPTCHA

All you need to do is just create new form and insert shortcode of contact form into page where you want to have booking. For fast set up here is the example of code which you can use for creating form layout:

<h3>Send Enquiry</h3>
<div class="contact-form-container">
	<div class="contact-form-inside">
    <div class="text-summary">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><strong>Requested date:</strong></td>
        <td><strong>Requested time:</strong></td>
        <td><strong>Number of persons:</strong></td>
      </tr>
      <tr>
        <td>
          <div id="datepickerFormat" style="display: none; visibility: hidden">mm/dd/yy</div>
          <input type="text" id="datePicker1" name="datepickerFrom" value="Date" class="hasDatepicker" />
        </td>
        <td>
          <select name="time" class="time">
            <option value="8:00">8:00</option>
            <option value="9:00">9:00</option>
            <option value="10:00">10:00</option>
            <option value="11:00">11:00</option>
            <option value="12:00">12:00</option>
            <option value="13:00">13:00</option>
            <option value="14:00">14:00</option>
            <option value="15:00">15:00</option>
            <option value="16:00">16:00</option>
          </select>
        </td>
        <td>
          <select name="persons" class="persons">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>
        </td>
      </tr>
    </table>
    </div>
  </div>
</div>

<h2>Please fill Your Contact Information to complete the Order:</h2>

<table class="contact-form-user">
  <tr>
    <td>First Name:</td>
    <td>[text* your-name]</td>
    <td class="empty"></td>
    <td>Address:</td>
    <td>[text* your-address]</td>
  </tr> 
    <tr><td>Last Name:</td>
    <td>[text* your-surname]</td>
    <td class="empty"></td>
    <td>Town/City:</td>
    <td>[text* your-city]</td>
  </tr> 
    <tr><td>E-mail:</td>
    <td>[text* your-email]</td>
    <td class="empty"></td>
    <td>State/Province:</td>
    <td>[text* your-state]</td>
  </tr> 
  <tr>
    <td>Telephone:</td>
    <td>[text* your-phone]</td>
    <td class="empty"></td>
    <td>Country:</td>
    <td>[text* your-country]</td>
  </tr> 
  <tr>
    <td>Fax:</td><td>[text* your-fax]</td>
    <td class="empty"></td><td>ZIP Code:</td>
    <td>[text* your-zip]</td></tr>
    <tr>
    <td colspan="5"> </td>
  </tr>
    <tr>
    <td colspan="5">Special Requirements</td>
  </tr>
  <tr>
    <td colspan="5">[textarea* your-options]</td>
  </tr>
  <tr>
    <td colspan="5"> </td>
  </tr>
  <tr>
    <td colspan="5"><strong>Security Check</strong> (please enter text below)</td>
  </tr>
  <tr>
    <td class="captcha">[captchac captcha-330]</td>
    <td>[captchar captcha-330]</td>
    <td class="empty"></td>
    <td colspan="2">[acceptance acceptance-1 default:on]I agree with the terms and conditions</td>
    </tr>
  <tr>
    <td colspan="5">[submit "Send"]</td>
  </tr>
</table>


Mail message related to form example used above may be as this:

From: [your-name] < [your-email]>

Sport: [_post_title]
Date: [datepickerFrom]
Requested time: [time]
Number of persons: [persons]

First Name: [your-name]
Last Name: [your-surname]
E-mail: [your-email]
Telephone: [your-phone]
Fax: [your-fax]

Address: [your-address]
Town/City: [your-city]
State/Province: [your-state]
Country: [your-country]
ZIP Code: [your-zip]

Special Requirements
---------------------------------------------------------------------------------
[your-options]

Paste mail message into Message Body textarea in edit page of form:

guesthouse-special-form_message-body


Insert shortcode of contact form into page where you want to have this form.

top

close

Form is prepared for the single page of your custom type (for example some sport), as this: http://preview.ait-themes.com/guesthouse/wp/item/golf-for-beginners/

This is not the form for the summary page available after sending form through Reservation form in slider or roomviewer!