Webready Help Center Webready Help Center
  • Getting Started
    • How to create a Webready website
    • Understanding Webready Pricing
    • Webready Setup Checklist
    • Webready FAQ
  • Domains
    • Keeping the Free Webready URL
    • Assigning a Domain to your Webready website
    • About Domains
    • Configuring DNS to Point your Domain to Webready
    • Removing a Domain from Your Webready Account
    • Unassigning a Domain from Your Site
    • Securing your domain with an SSL certificate
    • Connecting Your Own Domain Name
    • Adding a Webready Domain
  • Accepting Payments
    • Payment Gateway
    • Payment Rules
    • Accepting Payment On Your Website
  • Managing your Website
    • How do I prevent spam from my website forms?
    • How do I keep track of my bandwidth?
    • How is my bandwidth calculated?
    • About your Website's Storage and Bandwidth
    • How to help my website get listed on Google
    • Exceeding Your Site's Bandwidth Limit
    • Why doesn't my bandwidth match Google Analytics?
  • Webready Editor
    • Booking Settings
      • Booking Form Presets
      • Booking Form Settings - Upsells Tab
      • Booking Form Settings - Discount Codes Tab
      • Booking Form Settings Overview
      • Booking Form Settings - Sidebar Tab
      • Booking Form Settings - Layout Tab
      • Booking Form Settings - Style Tab
    • Editor V2
      • Featured rentals and Custom rentals list feature (Editor V2)
      • How do I add or adjust my image logo?
      • Allow Gap Night Setting
      • How do I redirect my pages? (Editor V2)
      • How to use the Website Editor V2
      • Adding Custom Code to your Website
      • Global Settings Overview
      • Contact Form Settings
      • How do I set up a Cookie Policy on my website?
      • How do I add a telephone number to my forms and booking page? (Editor V2)
      • How Do I Access the Webready Editor V2?
      • How to create a text logo for my website?
      • How Do I Add Password Protection to my Website or Webpage?
      • Creating a Custom Page
    • Featured rentals and Custom rentals list feature
    • How do I add a telephone number to my forms and booking page?
    • How do I redirect my pages?
    • How Do I Block Dates from Check-in or Check-out?
    • How to use the Website Editor
  • Reports
    • Margins Custom Report Views
    • Reports Overview
  • eDocuments
    • Automations
      • eDocuments Automations
    • Inbox
      • eDocuments Inbox
      • eDocuments Photo Identification
    • Templates
      • eDocuments Documents
      • Cancel A Pending Signature Template
      • eDocuments Contracts
      • eDocuments Custom Codes
      • eDocuments Templates
      • Share an eDocuments Template
      • Send an eDocuments Template
      • Create A New eDocuments Custom Code
      • eDocuments Forms
      • eDocuments Data Dictionary
      • Create A New eDocument Tag
    • eDocuments Overview
    • eDocuments FAQ
  • Settings & Configurations
    • User Settings & Logins
      • How Do I Add Users?
    • Using Webready in Multiple languages
    • How Do I Add a Chat Box to my Website?
  • Rates
    • What is a Base rate?
    • How do I add a Discount Code?
    • What is a Dynamic Rate?
    • LOS (Length of Stay) Discounts
    • Rate Types in Webready
    • What is a Standard Rate?
  • Integrations
    • Webready Integration with Beds24
    • Webready integration with Pricelabs
    • Webready Integration with Hostaway
    • Webready integration with RentalWise
    • Webready Integration with Hospitable
    • Webready integration with Google's Vacation Rental platform
    • Google Vacation Rentals FAQs
    • Webready Integration with Booking Automation
    • Webready integration with OwnerRez
    • Webready integration with FantasticStay
    • Webready integration with Zeevou
    • Webready integration with Lodgify
    • Webready Integration with Wheelhouse
    • Webready Integration with Uplisting
    • Webready integration with Channex
  • Airbnb
    • Connecting to Airbnb
    • How do I refresh my Airbnb property list?
    • How to Rank Higher on AirBnB
    • Airbnb Connector FAQ
    • Co-hosting with Airbnb
    • Requirements for an Airbnb Rental
    • Airbnb Connector Overview
  • Automation
    • Webready Automations Overview
    • Data Dictionary
    • Automation Templates
    • HTTP Webhook Triggers
  • Rentals
    • Linking Rentals Together
    • How do I delete rentals?
    • Auto sync rental changes
    • Syncing your rentals manually
    • How do I add booking fees to my rental?
    • Manually adding your Rentals
    • Uploading Rentals from a CSV
    • How do I create Rentals?
  • Upsells
    • How Do I Display Upsells on my Website?
    • Upsells Overview
    • How Do I Create a Sale?
    • Upsells Reports
    • How to create an invoice for my upsells?
    • How Do I Create an Upsell?
  • Images
    • How do I add Images?
  • Webready Translator
    • Webready Translator: Translations
    • Webready Translator Overview
    • Webready Translator: Formats
    • Webready Translator: Languages
  • Invoices & Billing
    • Invoice Management
      • How to create Invoice templates?
      • Invoicing & Payments
      • How Do I Make Changes to an Invoice?
      • Scheduling Invoices
      • How to set up Invoice Rules?
      • Creating Credit Notes
      • How Do I Request a Partial Payment or Deposit Payment?
      • How Do I Charge a Guest for Multiple Items on an Invoice?
    • Payment Gateways
      • How Do I Accept Payments Online and Via Credit Card?
  • Managing your Account
    • How Do I Add or Remove My Credit Card?
    • Account Info Overview
  • App Store
    • App Store Billing & Subscriptions
    • App Store Overview
    • App Store FAQs
  • Messages
    • Messages: Spam
    • Messages Overview
    • Messages: Email Notifications
    • Messages: Inbox
    • Messages: Spam Filters
    • Messages: Templates
  • Webready Bookings
    • Webready Calendars Walkthrough
    • Creating Hold Events in Webready
    • Creating a Manual Booking
    • How Do I Delete an Inquiry?
    • How Do I Edit Bookings?
    • Creating a Website Booking Link
    • Importing an External Calendar
    • How do I view my messages?
    • Webready Booking List
    • Making Reservations for Individual Bedrooms
Webready Editor / Booking Settings / Booking Form Settings - Layout Tab /
Website Login

Booking Form Settings - Layout Tab

The Booking Form Settings allow you to customize the look and feel of the booking process once you have enabled bookings for your website.

To get direct bookings for your Webready website, you must first subscribe to the Booking Engine app from the App Store.

The Booking Form Settings can be found on the Booking page in the Website Editor.

Below, we'll explain the different options available in the Layout tab of the Booking Form settings.

The Layout Tab allows you to control the overall setup and details seen on the booking form. This includes specifying how the booking form steps should be displayed and where it should be located.

Customization can be done through the different sections as follows:

Layout

The Layout option lets you choose if booking steps will be displayed in separate tabs or placed directly below each other.

There are 2 options for the layout: Simple and Tab.

Simple:

The Simple option will show the booking form steps one after the other, continuously down the page, in blocks.

Tab:

The Tab option displays each booking step in a separate tab - as the guest completes one step, they will have to click a button to continue to the next step.

Steps

This section lets you specify how the blocks or tabs should be displayed. You'll also be able to choose whether to include a "Complete" step as part of the booking process, which will allow guests to review their information before submitting the booking.

Note: The Tab Bar and Back To Rental Button options will only be available when the Tab layout is selected.

The options available to be customized for Steps are as follows:

Block Collapsible

There are 3 options for this: None, Collapsible and Collapsible (With Step Number).

None:

When None is selected, there will be no arrow to collapse or expand the different booking steps. In the case of blocks (simple layout), the guest will need to scroll down to see the next step.

For the Tab layout, this option will only be obvious for smaller screen sizes where the tabs are displayed in blocks.

Collapsible:

With the Collapsible option, blocks will have arrows allowing you to collapse and expand the steps instead of having to scroll to get to other steps.

Collapsible (With Step Number):

Collapsible With Step Number, displays arrows at the right of the step, allowing you to collapse and expand, instead of having to scroll to get to other steps, while also placing the step numbers next to the step titles.

Tab Bar

There are 3 options for this: Detailed, Detailed (With Step Number) and Simple.

Detailed:

The Detailed option will display the title of the tab.

Detailed (With Step Number):

The Detailed (With Step Number) option will display the step number, along with the title of the tab.

Simple:

The Simple option shows the current step, with an indication of the next step below the tab title. Once the details have been completed on the current step, you will be able to navigate to the next step. This is ideal for small screen sizes.

Simple (With Progress Indicator):

The Simple (With Progress Indicator) tab option displays a progress indicator along with the title of your current and next step.

Complete Step

The Complete Step can either be enabled or disabled. Enabling it will show an additional step as the final step in the booking process. This step will allow guests to review their information before submitting the booking.

When enabled, the booking step will be seen like this:

Back To Rental Button

The Back To Rental Button can either be set to be visible or hidden. When "Visible" is selected, this button will be shown on the first step, allowing guests to click it to go back to the rental details page.

When visible, the Back To Rental Button will be seen like this:

Booking Form Info

This section lets you specify where the booking form should be placed and allows you to adjust how the booking dates and guest count input fields are displayed.

Within the Booking Form Info section, you will be able to customize the following:

Booking Info Form Placement

The Booking Form Info can either be placed in the Tab or Sidebar.

Tab:

When the tab option is selected, the Booking Info Form will be displayed as the first step in the booking tab or block.

Simple layout (Booking Info From is in the first step in the block):

Tab layout (Booking Info From is in the first step in the tab):

Sidebar:

When Sidebar is selected, the Booking Info Form will show in the sidebar area instead.

Date Input

The available Date Input options are Simple, Simple (With Label) or Detailed.

Simple

The Simple date input option allows the Check-In and Check-Out fields to be shown on 1 line. This is always the case when the Booking Info Form is in the sidebar. However, when the Booking Info Form is in a tab, the date inputs will only show on 1 line on smaller devices.

Sidebar showing date inputs on 1 line:

Tab with the Simple date input selected on a large screen:

Tab with the Simple date input selected on a small screen:

Simple (With Label)

The Simple With Label date input option allows the Check-In and Check-Out fields to be shown on 1 line with a label. This is always the case when the Booking Info Form is in the sidebar. However, when the Booking Info Form is in a tab, the date inputs will only show on 1 line on smaller devices - in larger screens, the detailed view will be seen.

Sidebar showing date inputs on 1 line with labels:

Tab with the Simple (With Label) date input selected on a large screen (the detailed view is seen):

Tab with the Simple (With Label) date input selected on a small screen:

Detailed

The Detailed option shows the Check-in and Check-out dates separately and with labels. This is always the case regardless of whether the date inputs are in the sidebar or on a tab, and for any screen size.

Guest Input

The available Guest Input options are Simple and Detailed.

Simple

When the Simple guest input is selected, the Guests option will display on 1 line that will expand when clicked to allow to input values for adults and children. This is always the case when the Booking Info Form is in the sidebar. However, when the Booking Info Form is in a tab, the guest inputs will only show on 1 line on smaller devices - in larger screens, the detailed view will be seen.

Sidebar showing guest input on 1 line with labels:

Expanded view when clicked:

Tab with the Simple guest input selected on a large screen (the detailed view is seen):

Tab with the Simple guest input selected on a small screen:

Detailed

The Detailed option shows the Adult and Children input fields separately and with labels. This is always the case regardless of whether the guest inputs are in the sidebar or on a tab, and for any screen size.

Phone Number

Choose if you will require guests to enter a country code with their phone number or if and how a default value should be added. Here, you can also specify if you will like phone numbers to be validated.

Under this section, you'll be able to perform the following changes:

Country Code

The Country Code options are as listed below:

  • Disable

  • No Default Country

  • Default to Rental Country

  • Default to Website Country

  • Auto Detect Guest Country - Using Guest IP Info Lookup

Disable

The Disable option allows guests to enter a telephone number without a country code.

No Default Country

With the No Default Country option, when the guest clicks into the phone number field, a pop up with a search bar will be available allowing the guest to find and select their country code.

Phone number field showing the selected country:

Default to Rental Country

With the Default to Rental Country option, the country code from the rental will automatically be filled into the telephone field.

Rental country:

Country code automatically entered for the telephone field based on the rental country:

Default to Website Country

With the Default to Website Country option, the country code that is saved for the website will automatically be filled into the telephone field.

To view the Country for the website, navigate to your Website dashboard in Webready, click on the Settings tab then the General Information tab.

Website country:

Country code automatically entered for the telephone field based on the website country:

Auto Detect Guest Country - Using Guest IP Info Lookup

The Auto Detect Guest Country - Using Guest IP Info Lookup option will automatically fill in the country code based on the guest's IP information.

Validate Phone Number

Note: If "Disabled" is chosen for the Country Code, then the Validate Phone Number options will not be available.

The Validate Phone Number can either be enabled or disabled. Enabling it will allow the phone number entered to be validated. If there is an issue with the value entered, the guest will be prompted to correct it.

When enabled and there's an issue, the error will be seen like this:

Message

The Require Message option can either be enabled or disabled. Enabling it will require that a message be sent with the booking details.

Validation Messages

Validation Messages can either be Disabled or Enabled. Enabling it will allow you to display all validation messages in a pop-up window.

How did we do? Thank you! We appreciate your feedback.
Website Login
Copyright © 2025 Webready. All Rights Reserved.
No documents match your search.
Searching...