{"id":28166,"date":"2013-04-29T07:07:44","date_gmt":"2013-04-29T11:07:44","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=28166"},"modified":"2017-09-06T05:42:49","modified_gmt":"2017-09-06T09:42:49","slug":"wordpress-how-to-work-with-a-booking-form","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-work-with-a-booking-form.html","title":{"rendered":"WordPress. How to work with a booking form"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>This  tutorial is going to show you how to work on a booking form that comes with some of the WordPress templates.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=b1UK-c3mGbg?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress. How to work with a booking form<\/a><\/p>\r\n<p>It includes fields for name, email, phone and  message, a select list, a count select, two datepickers and a submit button. If your  template comes with a booking form and you would like to change some of its  options:<\/p>\r\n<ol>\r\n<li>Log into your WordPress admin panel.<\/li>\r\n<li>Go to the left-side menu <strong>Appearance -&gt; Theme Options<\/strong>.<\/li>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_1-300x159.jpg\" alt=\"\" title=\"wordpress_booking_form_1\" width=\"300\" height=\"159\" class=\"alignnone size-medium wp-image-28167\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_1-300x159.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_1-150x79.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_1.jpg 320w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<li>Click on the <strong>Booking Form<\/strong> tab at the top.<\/li>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_2-300x246.jpg\" alt=\"\" title=\"wordpress_booking_form_2\" width=\"300\" height=\"246\" class=\"alignnone size-medium wp-image-28169\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_2-300x246.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_2-150x123.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_2.jpg 730w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<li>There you will find a list of self-explanatory options:<\/li>\r\n<ul>\r\n<li><strong>Title<\/strong> allows you to put a name of the form e.g. book  a room: <\/li>\r\n<li><strong>Display &#8216;Name&#8217; Field?<\/strong> with yes\/no selections allows to switch the name field off and on; <\/li>\r\n<li><strong>Text for &#8216;Name&#8217; Field<\/strong> allows you to input text for the  field, e.g. Your Name<\/li>\r\n<li><strong>Display &#8216;Email&#8217; Field? <\/strong>allows you to switch the email field  on and off;<strong><\/strong><\/li>\r\n<li><strong>Text for &#8216;Email&#8217; Field <\/strong>allows you to input text for the  field, e.g. Email<strong><\/strong><\/li>\r\n<li><strong>Display &#8216;Phone&#8217; Field? <\/strong>allows you to switch the phone field  on and off;<strong><\/strong><\/li>\r\n<li><strong>Text for &#8216;Phone&#8217; Field <\/strong>allows you to input text for the  field, e.g. Phone<strong><\/strong><\/li>\r\n<li><strong>Default Text for Select Element <\/strong>allows you to input text for the for  select element, e.g. Select room type<strong><\/strong><\/li>\r\n<li><strong>Display Count Select? <\/strong>allows you to switch the count select  on and off;<strong><\/strong><\/li>\r\n<li><strong>Text for Count Select <\/strong>allows you to input text for the  count select, e.g. No. of rooms<strong><\/strong><\/li>\r\n<li><strong>Number of Items in Count Select <\/strong>allows to enter a  number of items in count select (from 1 to 10), e.g. 5<\/li>\r\n<li><strong>Date Format <\/strong>allows to choose date  format for datepicker elements, e.g. Default: mm\/dd\/yy<\/li>\r\n<li><strong>Display Datepickers 1? <\/strong>allows to switch Datepickers-1\u00a0 on and off;<strong> <\/strong><\/li>\r\n<li><strong>Include Timepicker to Datepickers 1? <\/strong>allows to switch  the timepicker in Datepickers-1\u00a0 on and  off;<strong> <\/strong><\/li>\r\n<li><strong>Default Text for Datepicker 1 <\/strong>allows you to input text for datapicker-1,  e.g. Check in<strong> <\/strong><\/li>\r\n<li><strong>Display Datepickers 2? <\/strong>allows to switch Datepickers-2\u00a0 on and off;<strong> <\/strong><\/li>\r\n<li><strong>Include Timepicker to Datepickers 2? <\/strong>allows to switch  the timepicker in Datepickers-2 on and off;<strong> <\/strong><\/li>\r\n<li><strong>Default Text for Datepicker 2 <\/strong>allows you to input text for datapicker-2,  e.g. Check out<strong> <\/strong><\/li>\r\n<li><strong>Display &#8216;Message&#8217; Field? <\/strong>allows you to switch the message  field on and off;<strong> <\/strong><\/li>\r\n<li><strong>Default Text for &#8216;Message&#8217; Field <\/strong>allows you to input text for the  message field, e.g. Additional Comments<strong> <\/strong><\/li>\r\n<li><strong>Text for Submit Button <\/strong>allows you to input text for the  submit button, e.g. submit<\/li>\r\n<\/ul>\r\n<li>To save the changes, click<strong> &ldquo;Save Options&rdquo; <\/strong>at the bottom or<strong> &ldquo;Restore Defaults&rdquo; <\/strong>in order to re-set  them.<strong><\/strong><\/li>\r\n<li>Open the page with the booking  form to check the options you saved.<\/li>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_3-300x43.jpg\" alt=\"\" title=\"wordpress_booking_form_3\" width=\"300\" height=\"43\" class=\"alignnone size-medium wp-image-28170\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_3-300x43.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_3-150x21.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_3-1024x150.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_3.jpg 1276w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<li>To enable  the booking form on your page,\u00a0 make sure that <strong>Contact  Form 7 <\/strong>and<strong> Contact Form 7 &#8211; Dynamic Text Extension plugins\u00a0 <\/strong>that come with your template are installed  and enabled under the menu <strong>Plugins \u00a0\u2013&gt;  Installed Plugins.\u00a0<\/strong><\/li>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_31.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_31-300x43.jpg\" alt=\"\" title=\"wordpress_booking_form_3\" width=\"300\" height=\"43\" class=\"alignnone size-medium wp-image-28171\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_31-300x43.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_31-150x21.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_31-1024x150.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_31.jpg 1276w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<li>Go to the left-side menu<strong> Contact.<\/strong> If you installed the template with the sample data, you should already have the  reservation forms  added. If not, you need to <a href=\"\/help\/wordpress-contact-form-advanced-configuration.html\">add<\/a> them by clicking <strong>&ldquo;Add New&rdquo;.<\/strong><\/li>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_4-300x176.jpg\" alt=\"\" title=\"wordpress_booking_form_4\" width=\"300\" height=\"176\" class=\"alignnone size-medium wp-image-28172\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_4-300x176.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_4-150x88.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_4.jpg 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<li>For example,<strong> Reservation Form  1<\/strong> (first column) may have the following in the <strong>Form <\/strong>field<strong>&nbsp;<\/strong><\/li>\r\n<pre class=\"brush:html\">\r\n&lt;div class=&quot;reservation-form-user&quot;&gt;<br \/>\r\n  &lt;p&gt;&lt;label&gt;First Name:&lt;\/label&gt;[text* your_name]&lt;\/p&gt;<br \/>\r\n  &lt;p&gt;&lt;label&gt;Last Name:&lt;\/label&gt;[text* your_surname]&lt;\/p&gt;<br \/>\r\n  &lt;p&gt;&lt;label&gt;E-mail:&lt;\/label&gt;[email* your_email]&lt;\/p&gt;<br \/>\r\n  &lt;p&gt;&lt;label&gt;Phone:&lt;\/label&gt;[text* your_phone]&lt;\/p&gt;<br \/>\r\n  &lt;p&gt;&lt;label&gt;Fax:&lt;\/label&gt;[text your_fax]&lt;\/p&gt;<br \/>\r\n  &lt;p class=&quot;area&quot;&gt;&lt;label&gt;Special Requirements:&lt;\/label&gt;[textarea your_requirements]&lt;\/p&gt;<br \/>\r\n  &lt;p class=&quot;submit&quot;&gt;[submit &quot;Send&quot;]&lt;\/p&gt;<br \/>\r\n  &lt;\/div&gt;\r\n<\/pre>\r\n<li>And<strong> Reservation Form 2 <\/strong>(second  column) may have add the following in the <strong>Form <\/strong>field: <\/li>\r\n<pre class=\"brush:html\">\r\n&lt;div class=&quot;reservation-form-user&quot;&gt;<br \/>\r\n&lt;p&gt;&lt;label&gt;First Name:&lt;\/label&gt;[text* your_name]&lt;\/p&gt;<br \/>\r\n&lt;p&gt;&lt;label&gt;Last Name:&lt;\/label&gt;[text* your_surname]&lt;\/p&gt;<br \/>\r\n&lt;p&gt;&lt;label&gt;E-mail:&lt;\/label&gt;[email* your_email]&lt;\/p&gt;<br \/>\r\n&lt;p&gt;&lt;label&gt;Phone:&lt;\/label&gt;[text* your_phone]&lt;\/p&gt;<br \/>\r\n&lt;p&gt;&lt;label&gt;Fax:&lt;\/label&gt;[text your_fax]&lt;\/p&gt;<br \/>\r\n&lt;p class=&quot;area&quot;&gt;&lt;label&gt;Special Requirements:&lt;\/label&gt;[textarea your_requirements]&lt;\/p&gt;<br \/>\r\n&lt;p class=&quot;submit&quot;&gt;[submit &quot;Send&quot;]&lt;\/p&gt;<br \/>\r\n&lt;\/div&gt;\r\n<\/pre>\r\n<li><strong>Reservation Form 2 <\/strong>should have  the<strong> Message body<\/strong> field filled in,  e.g.<\/li>\r\n<pre>\r\nFrom: [your_name] <[your_surname]>\r\n \r\nCoise: [selectedItem]\r\nDate From: [dateFrom]\r\nDate To: [dateTo]\r\nNo. of rooms: [countSelect]\r\n \r\nFirst Name: [your_name]\r\nLast Name: [your_surname]\r\nE-mail: [your_email]\r\nTelephone: [your_phone]\r\nFax: [your_fax]\r\nState\/Province: [your_state]\r\n \r\nSpecial Requirements:\r\n----------------------------------------------\r\n[your_requirements]\r\n<\/pre>\r\n<li>Put your email into the <strong>To: <\/strong>field<strong> <\/strong>under<strong> Mail of <\/strong><strong>Reservation Form 2, <\/strong>so it looks like this:<\/li>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_5-300x111.jpg\" alt=\"\" title=\"wordpress_booking_form_5\" width=\"300\" height=\"111\" class=\"alignnone size-medium wp-image-28175\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_5-300x111.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_5-150x55.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_5-1024x380.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2013\/03\/wordpress_booking_form_5.jpg 1121w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<li>Save the changes and try to send a message using  the booking form on your site. If there are problems, make sure the versions of  the plugins <\/li>\r\n<\/ol>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=b1UK-c3mGbg?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress. How to work with a booking form<\/a><\/p>\r\n<\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This  tutorial is going to show you how to work on a booking form that comes with  some of the Wordpress templates.<\/p>\n","protected":false},"author":30,"featured_media":28178,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1377,640,793,2405,1264],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/28166"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=28166"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/28166\/revisions"}],"predecessor-version":[{"id":83087,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/28166\/revisions\/83087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/28178"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=28166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=28166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=28166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}