Make Your Own Booking Widget: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 26: Line 26:
A basic HTML FORM can be created like this
A basic HTML FORM can be created like this


  <FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
  <FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
  <input type="hidden" name="propid" value="2035">
  <input type="hidden" name="propid" value="2035">
  <input type="submit" value="Book Now">
  <input type="submit" value="Book Now">
Line 44: Line 44:
It is possible using jQuery or javascript to keep the select options up-to-date with the current month/year but that is beyond the scope of this How To.
It is possible using jQuery or javascript to keep the select options up-to-date with the current month/year but that is beyond the scope of this How To.


  <FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
  <FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
  <select name='fdate_date'>
  <select name='fdate_date'>
  <option value='1'>1</option>
  <option value='1'>1</option>
Line 113: Line 113:
We can add selectors for the length of stay and number of guests as follows
We can add selectors for the length of stay and number of guests as follows


  <FORM METHOD="POST" ACTION="https://www.beds24.com/booking2.php">
  <FORM METHOD="POST" ACTION="https://beds24.com/booking2.php">
  <select name='fdate_date'>
  <select name='fdate_date'>
  <option value='1'>1</option>
  <option value='1'>1</option>
Line 245: Line 245:
4. Paste the code into the source code of your web site
4. Paste the code into the source code of your web site


  <nowiki><div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #339900; background: -moz-linear-gradient(top, #66cc00, #339900); background: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#339900)); background: -webkit-linear-gradient(top, #66cc00, #339900); background: -o-linear-gradient(top, #66cc00, #339900); background: linear-gradient(top, #66cc00, #339900); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#339900');" class="b24bookingstrip"><form method='GET' target='_blank' action='https://www.beds24.com/booking.php' style='margin:0; padding:0;'><span style='padding-right: 10px; display: inline-block;'><a style='color: #2f2f2f;text-decoration:none;' target='_blank' href='https://www.beds24.com/booking.php?propid=3103&page=getdates&type=0&referer=BookingStrip'></a></span><span style='display: inline-block; padding-right: 10px;'>
  <nowiki><div style="color: #2f2f2f; font-size:14px; width: 100%; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #339900; background: -moz-linear-gradient(top, #66cc00, #339900); background: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#339900)); background: -webkit-linear-gradient(top, #66cc00, #339900); background: -o-linear-gradient(top, #66cc00, #339900); background: linear-gradient(top, #66cc00, #339900); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#339900');" class="b24bookingstrip"><form method='GET' target='_blank' action='https://beds24.com/booking.php' style='margin:0; padding:0;'><span style='padding-right: 10px; display: inline-block;'><a style='color: #2f2f2f;text-decoration:none;' target='_blank' href='https://beds24.com/booking.php?propid=3103&page=getdates&type=0&referer=BookingStrip'></a></span><span style='display: inline-block; padding-right: 10px;'>
  <select id='fdate550775_date_propid3103' name='fdate_date' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f'<option value='1'>1</option><br></select>
  <select id='fdate550775_date_propid3103' name='fdate_date' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f'<option value='1'>1</option><br></select>
  <select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
  <select id='fdate550775_monthyear_propid3103' name='fdate_monthyear' style='font-size:inherit; margin:0; padding:0;color: #2f2f2f;'>
Line 264: Line 264:
Create a URL like this:
Create a URL like this:


https://www.beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book
https://beds24.com/booking2.php?propid=13434&checkin_hide=2016-11-24&numnight=2&numadult=1&br1-32906=Book


You need to define:
You need to define: