# How to Send a WhatsApp Flow From a Website Form | ZazzyAgent You can connect a website form to [ZazzyAgent](http://zazzyagent.com) so that submitting the form automatically starts a WhatsApp conversation or WhatsApp Flow. This is useful for: * Lead qualification * Appointment booking * Sales enquiries * Customer onboarding * Service requests * Order verification A typical workflow is: **Website form** ↓ **Webhook** ↓ **ZazzyAgent** ↓ **WhatsApp template** ↓ **WhatsApp Flow** ## What you need Prepare: * Connected and verified WhatsApp account * A WhatsApp Flow * A WhatsApp template with the required button configuration * A ZazzyAgent Bot Flow containing your WhatsApp Flow * A website form * Ability to configure a webhook in your form The website form must collect the customer's WhatsApp phone number. ## Step 1: Create your WhatsApp Flow First create the WhatsApp Flow that you want customers to receive. For example: > Lead Qualification The form could collect: * Name * Email * Service * Budget See [How to Create a WhatsApp Flow Form in ZazzyAgent](https://blog.zazzyagent.com/how-to-create-whatsapp-flow-form-zazzyagent). ## Step 2: Create the WhatsApp template Create the WhatsApp template that will initiate the experience. Use an appropriate CTA or Quick Reply button according to the available WhatsApp configuration. The template should be approved before using it for a workflow that requires an approved template. For background, see [WhatsApp Message Templates: Complete Guide for Businesses](https://blog.zazzyagent.com/whatsapp-message-templates-complete-guide). ## Step 3: Create a Bot Flow Create a Bot Flow in ZazzyAgent. Open the visual Flow Builder. Add the WhatsApp Flow element. Select the WhatsApp Flow you created. This connects the template/button entry point to the actual form experience. ## Step 4: Create the Webhook Workflow Open the WhatsApp Webhook Workflow area. Create a new webhook workflow. Choose: * Workflow name * WhatsApp account * WhatsApp template Then create the workflow. Copy the webhook URL provided by ZazzyAgent. ## Step 5: Configure your website form Open your website form settings. For example, if you're using Elementor, open the form's **Actions After Submit** settings and add a Webhook action. Paste the ZazzyAgent webhook URL. The exact settings depend on your form builder. The same general approach can work with other form tools that support outgoing webhooks. ## Step 6: Make sure the form collects the required information The form should include the information required by your WhatsApp Flow. At minimum, the workflow needs the customer's WhatsApp phone number. For example: ```text Name Email Phone Service ``` Make sure the form field names/data are available in the webhook payload. ## Step 7: Submit a test form Submit the form once with realistic test data. For example: ```text Name: Rahul Email: rahul@example.com Phone: +919999999999 Service: WhatsApp Automation ``` The submission sends data to the webhook. ## Step 8: Capture the webhook data Return to the ZazzyAgent webhook workflow. Capture the sample webhook response. You should now be able to see the raw data sent by the website form. ## Step 9: Map the fields Map the incoming form data to the values required by the workflow. For example: **Name → name** **Phone → phone** **Email → email** Use the actual field names shown in your captured payload. Don't guess the field paths. ## Step 10: Attach the Bot Flow The webhook workflow needs to know which Bot Flow should be triggered. Select the Bot Flow containing your WhatsApp Flow. The template/button relationship must also be configured correctly. ## Step 11: Save Save the completed webhook workflow. ## Step 12: Test from the website Submit the form again. The expected path is: ```text Website form ↓ Webhook ↓ ZazzyAgent receives data ↓ Field mapping ↓ WhatsApp template ↓ Bot Flow ↓ WhatsApp Flow ``` ## Can this work with Elementor? Yes, when the Elementor form can send an outgoing webhook. A common Elementor setup is: **Elementor form** → **Actions After Submit** → **Webhook** → **ZazzyAgent webhook URL** The form must collect the WhatsApp phone number and other values required by the Flow. ## Can this work with WPForms? A supported WPForms webhook setup can send form data to the ZazzyAgent webhook. The configuration is similar: **WPForms** → **Webhook** → **ZazzyAgent** → **WhatsApp** See the dedicated integration documentation in [ZazzyAgent Integrations & Developer Guides](https://blog.zazzyagent.com/series/integrations-developer-guides). ## Can this work with custom HTML forms? It can work when the form can send the required HTTP request/webhook payload. The important part is not the specific form builder. The important parts are: **Form can send data** **Webhook receives it** **Phone number is correctly mapped** **WhatsApp Flow is correctly connected** ## Can I delay the Flow? A delay can be added in the Bot Flow before the WhatsApp Flow component when your workflow requires one. For example: **Form submitted** ↓ Wait ↓ Send WhatsApp Flow This can be useful when an immediate message isn't appropriate. ## Common problems ### Form submitted but no WhatsApp message arrives Check: * Webhook URL * Phone-number mapping * Phone-number format * WhatsApp template * Template approval * Bot Flow mapping ### Webhook receives data but fields are empty Capture a new sample payload and review the actual field structure. ### WhatsApp template arrives but Flow doesn't start Check that the template button is correctly linked to the appropriate Bot Flow. ### Flow isn't available Check that: * The WhatsApp Flow was created. * The Bot Flow was created. * The correct WhatsApp Flow is attached. * The flow is saved/published as required. * The webhook points to the correct workflow. The current setup reference specifically identifies webhook URL, phone mapping, template-button mapping and Bot Flow attachment as key troubleshooting points for this workflow. ## Example: Website lead qualification A visitor fills in: **Name:** Priya **Phone:** +91XXXXXXXXXX **Requirement:** CRM automation The website sends the information to the webhook. ZazzyAgent receives it. A WhatsApp template starts the conversation. The customer then receives: > Let's get a few details so we can understand what you need. The WhatsApp Flow collects the rest of the information. This connects your website lead form with a structured WhatsApp experience without requiring your sales team to manually contact every lead.