How to set up a hotel reservation form in a WordPress page

Posted in CMS Development, Wordpress by Alex | Tags: custom template, hotel reservation, how to, wordpress page
WP Greet Box icon
Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

A few days back I was asked by a client to set up a hotel reservation form in his WordPress powered website. The problem is easy to solve and implement. This tutorial consists of setting up a WordPress custom page template and some php for a Hotel reservation page.

Result-reservation

By the end of this tutorial you will know hot to set up a hotel reservation page, a restaurant reservation page or anything that requires a reservation inside WordPress.

Step #1 – Set up a WordPress custom page template

This is fairly easy to do. Go inside your WP theme root and simply duplicate the page.php file and name it anything you want. I renamed my file reservation.php.

Next you need to delete everything in the page loop. So head over open up your reservations.php and delete this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
 
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

The next thing to do is to tell WordPress there is a custom page template named reservations.php. To do this simply copy and paste the following before the get_header(); tag.

<?php
    /*
    Template Name: RESERVATION
 
    */
    ?>

So you got something like this:

    <?php
    /*
    Template Name: REZERVARI
 
    */
    ?>
 
<?php get_header(); ?>

Next go inside your WordPress dashboard and add a new page, on the right you will have a option to select a custom page template. Select RESERVATIONS like in the image below.

Custom-template-select

Step #2 Setting up the reservation php code

Now the only place you will need to work is the reservation php file. Go and edit the file and copy/paste this code where the page loop was.

<script>
function checkform2 ( form )
{
 
  if (form.nume.value == "") {
    alert( "Va rugam completati campul: Nume!" );
    form.nume.focus();
    return false ;
  }
 
  if (form.prenume.value == "") {
    alert( "Va rugam completati campul: Prenume!" );
    form.prenume.focus();
    return false ;
  }
 
  if (form.telefon.value == "") {
    alert( "Va rugam completati campul: Telefon!" );
    form.telefon.focus();
    return false ;
  }
 
 
 
  return true ;
}
</script>
		<h2>Online Reservation</h2> 
<form name="tstest" method="post" action="/reservation" onsubmit="return checkform2(this)">
 
 
To make a online reservation to one of our hotel rooms please fill out the form below:
 
 
                    <table class="BodyTXT" border="0" cellpadding="1" cellspacing="1" width="100%">
 
                      <tbody><tr>
 
                        <td width="22%"><div align="left">First Name:*</div></td>
 
                        <td><input name="nume" id="nume" type="text"></td>
 
                        </tr>
 
                      <tr>
 
                        <td><div align="left">Last Name:*</div></td>
 
                        <td><input name="prenume" id="prenume" type="text"></td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Phone:*</div></td>
 
                        <td><input name="telefon" id="telefon" type="text"></td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">E-mail:</div></td>
 
                        <td><input name="email" id="email" type="text"></td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Room number:</div></td>
 
                        <td>
 
						<select name="nr_camere" id="nr_camere">
							<option selected="selected" value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
						</select>						</td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Room: </div></td>
 
                        <td>
						<select name="camera">
							<option value="Double">Double</option>
							<option value="Matrimoniala">Apartment</option>
							<option value="Matrimoniala cu jacuzzi">Apartment with jacuzzi</option>
						</select>						</td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Arrival date: </div></td>
 
                        <td width="47%"><input name="data_intrare" id="data_intrare" type="text"><script language="JavaScript">
	var o_cal = new tcal ({
		// form name
		'formname': 'tstest',
		// input name
		'controlname': 'data_intrare'
	});
 
	// individual template parameters can be modified via the calendar variable
	o_cal.a_tpl.yearscroll = false;
	o_cal.a_tpl.weekstart = 1;
 
	</script></td>
                        </tr>
 
                      <tr>
 
                        <td><div align="left">Departure Date: </div></td>
 
                        <td width="47%"><input name="data_iesire" id="data_iesire" type="text"><script language="JavaScript">
	var o_cal = new tcal ({
		// form name
		'formname': 'tstest',
		// input name
		'controlname': 'data_iesire'
	});
 
	// individual template parameters can be modified via the calendar variable
	o_cal.a_tpl.yearscroll = false;
	o_cal.a_tpl.weekstart = 1;
 
	</script></td>
                        </tr>
 
                      <tr>
 
                        <td><div align="left">Other comments: </div></td>
 
                        <td><textarea name="observatii" cols="40" rows="4" id="observatii"></textarea></td>
                        </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td>* required fields</td>
                        </tr>
 
                      <tr>
 
                        <td></td>
 
                        <td><input name="trimitecontact" id="trimitecontact" value="yes" type="hidden">
 
 
                            <input name="Submit" class="RedButton" value="Send" type="submit"></td>
                        </tr>
                    </tbody></table>
 
 
      </form>
 
 
 <?
if ($_POST['trimitecontact'] == "yes")
{
	$nume = $_POST['nume'];
	$prenume = $_POST['prenume'];
	$telefon = $_POST['telefon'];
	$email = $_POST['email'];
	$cam = $_POST['nr_camere'];
	$tip = $_POST['camera'];
	$di = $_POST['data_intrare'];
	$die = $_POST['data_intrare'];
	$mesaj = $_POST['observatii'];
 
	$message = "This reservation is from:\n" .
	"------------------------------------------------------------\n" .
	"First Name: $nume\n" .
	"Last Name: $prenume\n" .
	"Phone: $telefon\n" .
	"Email : $email\n".
	"Room Number: $cam\n" .
	"Room: $tip\n" .
	"Arrival Date: $di\n" .
	"Departure Date: $die\n" .
	"Other Comments : $mesaj\n".
	"\n\n------------------------------------------------------------\n" ;
	$uself = 1;
	$subject = "New room reservation at your hotel";
$headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ;
$http_referrer = getenv( "HTTP_REFERER" );
$mailto = 'CHANGE@THIS.TOYOUREMAIL' ;
$ip = getenv(REMOTE_ADDR);
mail($mailto, $subject, $message,
	"From: \"$nume\" <$email>" . $headersep . "Reply-To: \"$nume\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.08" );
echo '<strong> Quote sent</strong>';				
}
?>
 
   <span class="text_contact">
 
The reservation will be considered after receiving payment.
                  </span>

And this is the result:

Result-reservation

Note: You must set the action=”/reservation” of the form imput to match your custom page php name. Ex. if I have a custom page php called joomla.php i would rename the action to action=”/joomla”.

Remember to chage the $mailto = ‘CHANGE@THIS.TOYOUREMAIL’ ; to your desiered email where the messages will come.

You may be interested in these also:

14 Comments to “How to set up a hotel reservation form in a WordPress page”

  • Wow!, exactly what I was looking for. I will use it to reserve seats in our next free event, guitar masterclass in spain.

    Thanks a lot for this easy and customizable solution.
    dogday´s last blog ..Entrevistas, y videos del festival My ComLuv Profile

  • hello there,

    When changing to my email address and test it. It never arrives to my inbox. Is there a way to fix this?

  • Try and see if you specified the email correctly btween the 2 ” so it looks like in the example a few lines up. Or, try and see if you specified the filename php in the form input area.

    action=”/reservation”

    let me know if you have further problems

  • I am also having trouble getting the email to send. it says “quote sent”, but nothing arrives. Are their any other components that need to be installed on the server?

  • ok, try and check the “$mailto = ‘CHANGE@THIS.TOYOUREMAIL’ ;” inside the reservation php file :) and also check the action=”/reservation” form input. Cheange it according to your reservation filename.

  • This is exactly what I have Alex,

    $mailto = ‘test@yahoo.com’ ;
    $ip = getenv(REMOTE_ADDR);
    mail($mailto, $subject, $message,

    The action name is correct as well.
    Desz´s last blog ..Quality Drinks My ComLuv Profile

  • [...] the rest here: How to set up a hotel reservation form in a WordPress page | Design strike Comments0 Leave a Reply Click here to cancel [...]

  • Form seems to be ok and displayed well but pressing “SEND” button call an error:

    The requested URL /reservation was not found on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    Form header is:

  • Howdy that

  • Awesome post! love this blog

  • i added the form in my page but i get the following lines along with the table:

    ” . $headersep . “Reply-To: \”$name\” ” . $headersep . “X-Mailer: chfeedback.php 2.08″ ); echo ‘ Quote sent’; } ?> The reservation will be considered after receiving payment.

    Also when pressing the “SEND” button, i get an error:

    The requested URL /reservation was not found on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    Can somebody please help me….

  • Please check if you have all the paths correctly written

  • I’ve done everything you said, but when pressed the send button, i received 404 error, i checked mail to and action= … for about …. 1000 times
    my php file is reservation.php :

    Online Reservation

    here is the email section

    $uself = 1;
    $subject = “New room reservation at your hotel”;
    $headersep = (!isset( $uself ) || ($uself == 0)) ? “\r\n” : “\n” ;
    $http_referrer = getenv( “HTTP_REFERER” );
    $mailto = ‘lequanghan2@gmail.com’ ;
    $ip = getenv(REMOTE_ADDR);
    mail($mailto, $subject, $message,
    “From: \”$nume\” ” . $headersep . “Reply-To: \”$nume\” ” . $headersep . “X-Mailer: chfeedback.php 2.08″ );
    echo ‘ Quote sent‘;
    }
    ?>
    please help

  • Terrific website engine website! Keep it up!

Post comment

CommentLuv Enabled