Predefined Form Template: Booking Form (Hotel)

 

This article covers using the Booking Form (Hotel) template for Contact Form Ready

 

Create a new form by going to WordPress Dashboard → Contact Forms → New Contact Form. Type a name for your form into the Title text box. Then scroll down and select Booking form (hotel) from the Select from a predefined list dropdown.

 

Standard Fields – Booking Form (Hotel) Template

Click the Edit button on each field to make changes to the field settings.

 

 

Book now – Heading

  • Label – The text displayed as the form heading
  • Type – Select the CSS attribute/heading level used to style the label from the drop-down (h1, h2, h3).
  • Class – You can enter a custom CSS class here or leave the default.

 

 

This is a customizable paragraph field

  • Content – Type a description for your form here.
  • Type – Select the appropriate HTML tag from the drop-down.
    • p
    • Address
    • canvas
    • output
  • Class – You can enter a custom CSS class here or leave the default.

 

 

Name

  • Required – Click in the checkbox to make this a required field.
  • Label – The field label displayed on the form.
  • Help Text – Help text displayed when the user hovers the mouse over the ‘?’ next to the label.
  • Type – the default is text.
  • Placeholder – Text displayed as a placeholder.
  • Class – You can enter a custom CSS class here or leave the default.
  • Name – The system name for the field. You can enter a custom name or leave the default.
  • Value – Enter a default value for this field if desired.
  • Max Length – Set a max length (in characters) for this field if desired.

 

 

Email

  • Required – Click in the checkbox to make this a required field.
  • Label – The field label displayed on the form.
  • Help Text – Help text displayed when the user hovers the mouse over the ? next to the label.
  • Type – the default is email.
  • Placeholder – Text displayed as a placeholder.
  • Class – You can enter a custom CSS class here or leave the default.
  • Name – The system name for the field. You can enter a custom name or leave the default.
  • Value – Enter a default value for this field if desired.
  • Max Length – Set a max length (in characters) for this field if desired.

 

 

Guests

  • Required – Click in the checkbox to make this a required field.
  • Label – The field label displayed on the form.
  • Help Text – Help text displayed when the user hovers the mouse over the ? next to the label.
  • Placeholder – Text displayed as a placeholder.
  • Class – You can enter a custom CSS class here or leave the default.
  • Name – The system name for the field. You can enter a custom name or leave the default.
  • Options – You can change, add, or delete options

 

 

Check-in date

  • Required – Click in the checkbox to make this a required field.
  • Label – The field label displayed on the form.
  • Help Text – Help text displayed when the user hovers the mouse over the ? next to the label.
  • Class – You can enter a custom CSS class here or leave the default.
  • Name – The system name for the field. You can enter a custom name or leave the default.
  • Value – You can enter a default value here if desired.

 

 

Check-out date

  • Required – Click in the checkbox to make this a required field.
  • Label – The field label displayed on the form.
  • Help Text – Help text displayed when the user hovers the mouse over the ? next to the label.
  • Class – You can enter a custom CSS class here or leave the default.
  • Name – The system name for the field. You can enter a custom name or leave the default.
  • Value – You can enter a default value here if desired.

 

Additional comments

  • Required – Click in the checkbox to make this a required field.
  • Label – The field label displayed on the form.
  • Help Text – Help text displayed when the user hovers the mouse over the ? next to the label.
  • Placeholder – Text displayed as a placeholder.
  • Rows – Enter the number of rows allowed for this text field.
  • Class – You can enter a custom CSS class here or leave the default.
  • Name – The system name for the field. You can enter a custom name or leave the default.
  • Value – Enter a default value for this field if desired.
  • Max Length – Set a max length (in characters) for this field if desired.

 

 

Adding Additional Fields

You can always add additional fields to the form too. Let’s add a text field for the name of the person making the reservation, in case it is not the same person who will be using the reservation. Click on the Text Field box in the form controls lift on the left side of the screen and drag it between the Name and Email fields on the form editor.

 

 

Make any changes you want to the new text field and then scroll up and click the Publish or Update button, as appropriate.

 

Our Hotel Booking Form in Action

Copy the shortcode for your new form from WordPress Dashboard → Contact Forms → All Contact Forms and paste it into a Post or Page on your WordPress site.

 

 


 

This article covered using the Booking Form (Hotel) template for Contact Form Ready. If you need further assistance or are having other issues with the plugins, feel free to visit our Support Forum (on WordPress.org) or use our Contact Form.