SteemAdd a WhatsApp booking form to WordPress: a plugin you can build today
· 4 min read
Cabin owners, tour operators, coaches, and service businesses take bookings via WhatsApp because that is where their customers already are. The standard approach - a contact form that sends an email - puts the enquiry in an inbox while the customer has moved on. What these sites actually need is a form that drops the visitor straight into a WhatsApp conversation with the details already typed.
WhatsApp's open redirect URL makes this possible without any API access or business account. A wa.me link takes a phone number and an optional message parameter. Open it in a browser and WhatsApp launches with that message pre-filled, ready to send to your number. The only missing piece is a WordPress form that collects the booking details and builds that URL.
A plugin that renders the form, validates the dates, and redirects to the WhatsApp link is about sixty lines of PHP and JavaScript. No database writes. No settings page. No admin menu. Here is the prompt that builds it.
What one build gives you
- Shortcode that renders a booking form with name, check-in date, check-out date, number of guests, and an optional message field
- Client-side date validation that shows an inline error if check-out is before check-in, without a page reload
- wa.me URL construction with all form values URL-encoded into a pre-filled message, opened in a new tab
- Configurable WhatsApp number via shortcode attribute, supporting multiple numbers across one site
What it does not do
- Availability calendar: the plugin has no concept of which dates are already booked
- Submission storage: form data goes directly to WhatsApp and is not written to the WordPress database
- Email confirmation to the visitor after they submit
- Payment or deposit collection at booking time
- WhatsApp Business API: this uses the open wa.me redirect URL, which requires no API key or verified business account
Contact Form 7 does these. This covers the part most sites use.
The prompt
Loads into the composer so you can edit it first. Nothing is built, and nothing is charged, until you send it.
Build a WordPress plugin that adds a shortcode [whatsapp_booking phone=""] to any page or post. The shortcode renders a booking form with five fields: Name (text input, required), Check-in Date (date input, required), Check-out Date (date input, required), Number of Guests (number input, min 1 max 20, required), and Message (textarea, optional, placeholder 'Any questions or special requests'). On submit, use JavaScript to validate that the Check-in Date is before the Check-out Date. If not, display an inline error message below the date fields without reloading the page. If validation passes, build a URL in the format https://wa.me/[phone]?text=[URL-encoded message], where the message is a plain-text multi-line string with labels for each field value formatted as: 'Hi, I would like to make a booking:\nName: [name]\nCheck-in: [date]\nCheck-out: [date]\nGuests: [n]\nMessage: [message]'. Open this URL in a new browser tab using window.open. Enqueue the JavaScript with wp_enqueue_script. The phone number is read from the shortcode attribute. Sanitize all inputs on the PHP side with sanitize_text_field before outputting them to the page. Do not write anything to the database. Do not add a settings page or admin menu. Add minimal inline CSS so the form is usable without any theme dependency: a simple stacked label-input layout with a submit button.
How the wa.me link works
WhatsApp's share URL format is: wa.me/[phone number]?text=[URL-encoded message]. The phone number is in international format without the plus sign - a UK number starting 07 becomes 447... and a US number becomes 1555.... The text parameter is optional; omit it and WhatsApp opens a blank conversation. Include it and the message appears typed in the input box, ready to send but not yet sent.
The visitor still taps Send themselves. That is a feature, not a limitation - they review the details before committing, and you receive a message from their own WhatsApp account rather than a form email from your server. The conversation lives in your WhatsApp inbox alongside every other booking.
What the plugin builds
The plugin adds a shortcode [whatsapp_booking phone="15551234567"] that renders a small form: Name, Check-in Date, Check-out Date, Number of Guests, and an optional message field. On submit, JavaScript validates that the check-in date is before the check-out date. If it passes, the script constructs the wa.me URL with all the values URL-encoded into the pre-filled message and opens it in a new tab, so the booking page stays open.
The phone number comes from the shortcode attribute, so you can place the same plugin on multiple pages with different numbers - one for accommodation, one for activities, one for a second property. No settings page is required.
Who this is for
Any site where the business owner handles enquiries on their phone and WhatsApp is the channel they actually monitor. Cabin rentals, holiday lets, guided tours, personal trainers, photographers, music tutors, driving instructors. If the current flow is 'fill in a contact form, wait for an email reply, wait for a reply to that reply', this replaces the wait with an immediate WhatsApp thread.
It also works on sites with a mixed audience. Put the shortcode on a Contact page alongside a standard form. Visitors who prefer WhatsApp use one form; visitors who prefer email use the other.
Who should use a different approach
If you need to check availability before accepting a booking - a calendar that marks which dates are taken - this plugin does not do that. It sends the enquiry to WhatsApp; whether the dates are free is a conversation you have there. Plugins like Amelia or WooCommerce Bookings handle availability if that is a hard requirement.
If you need a record of every enquiry stored in WordPress for reporting or CRM, the data goes directly to WhatsApp and is not written to the database. Gravity Forms with a notification addon stores the submission server-side and then forwards it to WhatsApp. That is the right tool if you need both.
If the booking involves upfront payment - a deposit or full payment at the time of booking - nothing here handles that. WooCommerce with a bookings extension is the right direction.
How to build it
Paste the prompt below into Steem, substituting your own WhatsApp number in international format without the plus sign. The plugin downloads as a zip and installs under Plugins > Add New > Upload Plugin.
Once active, add [whatsapp_booking phone="your number"] to any page. Test it by submitting the form - WhatsApp should open with a message containing everything the visitor typed. On mobile it opens the WhatsApp app; on desktop it opens WhatsApp Web. If the tap-to-send behaviour is important for your use case, add that detail to your prompt and Steem will add a confirmation step before redirecting.
Questions
- Do I need a WhatsApp Business account?
- No. The wa.me link works with any WhatsApp account, personal or business. WhatsApp Business adds a business profile and automated replies, but neither is required for this plugin to function.
- Will this work on mobile?
- Yes. On a phone with WhatsApp installed, the link opens the app directly. On a desktop browser it opens WhatsApp Web. If WhatsApp Web is not logged in, the visitor is prompted to scan a QR code to connect.
- Are booking enquiries stored anywhere?
- No. The form data goes directly into the WhatsApp message and is not stored on your server. If you need a record, read back through your WhatsApp conversation history, or ask Steem to add a step that emails the submission to you before redirecting.
- Can I use a different phone number on different pages?
- Yes. The number is set in the shortcode attribute, so [whatsapp_booking phone="447911123456"] on one page and [whatsapp_booking phone="15551234567"] on another will send to different WhatsApp numbers.
- What format should the phone number be in?
- International format without the plus sign or spaces. A UK number +44 7911 123456 becomes 447911123456. A US number +1 555 123 4567 becomes 15551234567.
The prompt
Loads into the composer so you can edit it first. Nothing is built, and nothing is charged, until you send it.
Build a WordPress plugin that adds a shortcode [whatsapp_booking phone=""] to any page or post. The shortcode renders a booking form with five fields: Name (text input, required), Check-in Date (date input, required), Check-out Date (date input, required), Number of Guests (number input, min 1 max 20, required), and Message (textarea, optional, placeholder 'Any questions or special requests'). On submit, use JavaScript to validate that the Check-in Date is before the Check-out Date. If not, display an inline error message below the date fields without reloading the page. If validation passes, build a URL in the format https://wa.me/[phone]?text=[URL-encoded message], where the message is a plain-text multi-line string with labels for each field value formatted as: 'Hi, I would like to make a booking:\nName: [name]\nCheck-in: [date]\nCheck-out: [date]\nGuests: [n]\nMessage: [message]'. Open this URL in a new browser tab using window.open. Enqueue the JavaScript with wp_enqueue_script. The phone number is read from the shortcode attribute. Sanitize all inputs on the PHP side with sanitize_text_field before outputting them to the page. Do not write anything to the database. Do not add a settings page or admin menu. Add minimal inline CSS so the form is usable without any theme dependency: a simple stacked label-input layout with a submit button.