Booking form - EditArea
 

How to insert a booking form

bookform.jpg

  1. create a block in the page
  2. go to the "body" entry
  3. click on
  4. enter the following code:

HTML Code

<div class="eaKeep">
<SCRIPT src="../../../third-parties/yav/js_compact/yav.js">&nbsp;</SCRIPT>
<SCRIPT src="../../../third-parties/yav/js_compact/yav-config.js">&nbsp;</SCRIPT>
<SCRIPT>
    var rules=new Array();
    rules[0]='email|required|e-mail';
    rules[1]='email|email|';
    rules[2]='name|required|Name';
    rules[3]='lastname|required|LastName';
    rules[4]='phone|required|Phone';
    rules[5]='room|required|Room';
    rules[6]='arrivaldate|required|ArrivalDate';    
    rules[7]='departuredate|required|DepartureDate';

    function swapDisplay (id){
        if (getStyleObject(id).display=='block'){
            hideCompById(id);
        } else {
            showCompById(id);
        }
    }
    

</SCRIPT>                                          <style type="text/css">
                <!--
                .inputError { border:#FF8000 1px solid; background-color: #FFFFD7; }
                .contactTable { margin-top:10px; border:#999999 1px solid;}
                .contactTable th { background-color:#DDDDDD; font-weight:bold; text-align:left }
                .contactTable ol { padding-left:15px }
                -->
                </style>
<form name="contactForm" action="../../../iw/core/main/sendForm.jsp" onsubmit="return performCheck('contactForm', rules, 'classic');" style="margin: 0pt;" class="fckForm">
    <table width="460" class="fckTable">
        <tbody>
            <tr>
                <th colspan="4">Booking form</th>
            </tr>
            <tr>
                <td colspan="4"><strong>Personal data</strong></td>
            </tr>
            <tr>
                <td width="80">First name*</td>
                <td>&#160;<input type="text" name="name" style="width: 150px;" /></td>
                <td width="80">Last Name*</td>
                <td>&#160;<input type="text" name="lastname" style="width: 150px;" /></td>
            </tr>
            <tr>
                <td width="80">City</td>
                <td>&#160;<input type="text" name="city" style="width: 150px;" /></td>
                <td width="80">Nationality</td>
                <td>&#160;<input type="text" name="nationality" style="width: 150px;" /></td>
            </tr>
            <tr>
                <td width="80">Phone*</td>
                <td>&#160;<input type="text" name="phone" style="width: 150px;" />&#160;</td>
                <td width="80">Mobile Phone</td>
                <td>&#160;<input type="text" name="cellphone" style="width: 150px;" /></td>
            </tr>
            <tr>
                <td width="80">Fax</td>
                <td>&#160;<input type="text" name="fax" style="width: 150px;" /></td>
                <td width="80">E-mail*</td>
                <td>&#160;<input type="text" name="email" style="width: 150px;" /></td>
            </tr>
        </tbody>
    </table>
    <table width="460" class="fckTable">
        <tbody>
            <tr>
                <td colspan="2"><strong>Booking data</strong></td>
            </tr>
            <tr>
                <td width="150">Room*</td>
                <td><select name="room" size="1">
                <option value="single">single</option>
                <option value="double">double</option>
                <option value="triple">triple</option>
                </select></td>
            </tr>
            <tr>
                <td width="150">Arrival date*</td>
                <td><input type="text" name="arrivaldate" style="width: 150px;" /></td>
            </tr>
            <tr>
                <td width="150">Departure date*</td>
                <td><input type="text" name="departuredate" style="width: 150px;" /></td>
            </tr>
            <tr>
                <td colspan="2">Notes</td>
            </tr>
            <tr>
                <td colspan="2"><textarea style="width: 500px; height: 100px;" name="Notes"></textarea>&#160;<input type="hidden" name="formTitle" value="Booking" /></td>
            </tr>
            <tr>
                <td colspan="4">Fields marked with (*) are mandatory.</td>
            </tr>
            <tr>
                <td colspan="4"><input type="submit" value="send" style="float: right;" /></td>
            </tr>
        </tbody>
    </table>
</form>
</div>