DEV Community

Asad Bukhari
Asad Bukhari

Posted on

Connecting a WordPress booking form to WhatsApp, step by step

A plain contact form can quietly lose enquiries. A visitor fills it in, clicks submit, and sees a short confirmation message. The owner then has to check email, reply, ask for the missing details, and wait. If the email goes to spam, or the reply comes hours later, the conversation may never start.

For a service business that takes bookings by appointment, that delay matters. This article shows how to turn that moment into a WhatsApp conversation, with the booking details already in the message.

The problem with a plain contact form

A standard contact form asks for a name, an email address, and a message. That suits a general enquiry, but not a booking. A booking needs specific answers first: which service the visitor wants, which day and time suit them, and how to reach them quickly.

Without those answers, the business must follow up to ask for them, and each extra message is another chance for the visitor to lose interest. Many small businesses also check WhatsApp far more often than email, so an enquiry left in an inbox overnight may be answered too late.

A form that opens WhatsApp with a ready-written message also builds trust: the visitor can see exactly what they are sending.

Step 1: Decide what the form should ask

First decide what the business actually needs to reply. Every extra field makes the visitor more likely to leave the form unfinished; every missing field means a follow-up question later. A booking form usually needs:

  • Name — so the business knows who is asking.
  • Phone or WhatsApp number — so the business can reply if the visitor does not send the message straight away.
  • Service — a dropdown of the services offered, so the visitor picks a real option.
  • Preferred date — a date picker.
  • Preferred time — a dropdown of time slots.
  • Notes — one short optional field.

That is enough for most booking enquiries. Do not add fields the business will not use. Use a dropdown for services: free text invites unclear descriptions and makes the WhatsApp message harder to read. Keep labels clear and plain, so the visitor never has to guess what a field means.

Step 2: Add validation that prevents junk enquiries

Validation checks the visitor's answers before the form is submitted. Without it, the business receives empty messages, wrong phone numbers, and dates that have already passed.

Make name, service, preferred date, and preferred time required, and leave notes optional. Check the phone number simply: it should not be empty, and it should contain digits. Do not make the check so strict that a normal number is rejected. For the date, use a picker that only allows today onwards — a past date is not useful — and set the earliest date later if the business does not take same-day bookings.

Show each error message next to the field with the problem, not only at the top of the form. Then test with wrong answers on purpose: an empty name, a missing service, a past date, and a phone number with letters in it. Each one should stop the form and show a clear message.

Step 3: Write the prefilled WhatsApp message

The prefilled message is the text that appears in WhatsApp when the visitor clicks the button. It should read like a normal booking request, not like a form printout:

Hello, I would like to book an appointment.

Name: [Name]
Service: [Service]
Preferred date: [Date]
Preferred time: [Time]
Notes: [Notes]

Each line comes from the form, so the business receives the details in the same order every time. The visitor can read the message before sending it, and edit it if needed. Keep it short, and use line breaks instead of one long paragraph — a single block of text is hard to scan on a phone. Do not include internal field names or the visitor's email address unless the business needs it.

Note that line breaks and symbols in the message need to be encoded properly in the link, or it may arrive broken. Test it with a real message before going live.

Step 4: Connect the form to WhatsApp

Once the form and the message are ready, the form needs to send the visitor to WhatsApp with the prefilled message, using the business WhatsApp number. The usual way is a link in this format:

https://wa.me/<business-number>?text=<prefilled-message>

The business number must be in international format, without a plus sign, spaces, or brackets. The prefilled message goes after text=, encoded so spaces, line breaks, and symbols pass through correctly.

Two options work after submission. First, redirect after submission: the details are saved, and the visitor goes straight to WhatsApp with the message ready to send. Second, a button on the confirmation screen, which the visitor clicks when ready. The first is more direct; the second gives the visitor a choice. Pick one and use it consistently.

Use the number the business actually answers — not a personal or disused number, or one for a different branch — and update the link if it changes. The form must still save the enquiry on the website, even if the visitor closes WhatsApp without sending, so the business has a record to follow up on. You can see examples of WordPress builds for small and service businesses on my portfolio at https://asadbukhari.site — use them as a reference for how a booking flow fits into a finished site, not as a template to copy without checking the details.

Step 5: Test before going live

Testing is not optional. A form that looks right but sends the wrong message — or no message at all — is worse than a plain contact form, because the visitor thinks the booking has been sent when it has not. Check these before publishing:

  • Submit the form with complete details. Does WhatsApp open with the right name, service, date, and time?
  • Submit it with a missing required field. Does the form stop with a clear error?
  • Submit it with a past date. Does the form reject it?
  • Read the message on a phone. Is it easy to scan, and is anything cut off?
  • Send the message to the business number. Does it arrive?
  • Confirm the submission is stored on the website, even if the visitor never sends the WhatsApp message.
  • Test on mobile first, then desktop. Check the button text too: "Send via WhatsApp" is clearer than "Submit".

Ask someone else to test it too, if possible — a fresh pair of eyes will notice unclear labels the builder no longer sees.

What not to do

Do not skip the saved enquiry. If the form only opens WhatsApp and saves nothing, the business has no record when a visitor closes WhatsApp without sending. Save it first.

Do not ask for too much. A long form with fields the business does not need will put visitors off. Ask only for what is needed to reply.

Do not use a vague message. A message that only says "Hello, I want to book" forces the business to ask for the details anyway. Include them from the start.

Do not hard-code one service into the message. Services change — build the message from the form fields instead.

Do not forget the fallback. Not every visitor uses WhatsApp, so keep a phone number or email address on the same page.

Do not publish without testing the number. A single wrong digit sends visitors to the wrong WhatsApp account. Test it with a real message before going live, and again whenever the number changes.

A short summary

This is not a complicated build. The work is in the details: the right fields, validation, a clear prefilled message, the right number, and testing before visitors use it. When it works, the visitor sends a booking request in one step, and the business can reply without follow-up questions. Build it carefully, test it on a real phone, and keep the fallback contact options on the page.

About the author

Asad Bukhari is a freelance WordPress developer based in Lahore, Pakistan. He builds WordPress websites for small and service businesses, including salons and spas, and sets up AI automation with n8n workflows. He also works on SEO for WordPress sites.

Portfolio: https://asadbukhari.site

Top comments (0)