Introducing Forms, also known as Flows in Meta is a powerful tool designed to enhance how businesses interact with their customers on WhatsApp. This document provides a comprehensive guide on setting up, creating, and utilising Forms to improve customer interactions and streamline various processes directly within WhatsApp.
What is Forms?
Forms provide a structured framework for businesses to gather information, manage conversations, and enhance user experience.
It is a comprehensive form and workflow builder for WhatsApp that helps businesses build interactive communication to gather information and enhance user experience.
Benefits of using Forms
Unlike traditional question-answer bot flows, Forms streamline interactions, making data collection more organised and efficient. Businesses can utilise these forms for various tasks such as payment collection, signup processes, booking appointments, and more, all within the WhatsApp environment.
This seamless integration reduces user drop-off rates and increases task completion rates, ensuring a more satisfying user experience.
Creating Flows with JSON on Facebook Business Manager
Flow Builder helps developers manage their Flows. Inside the code editor, developers can edit the JSON of existing Flows.
Here’s how you can access the Flow Builder :
- Setup WhatsApp Business Account:
Ensure you have access to the WhatsApp Business Platform. Sign up or log into your Facebook Developer account. Or configure a WhatsApp Business Account if not done already.
- Navigate to WhatsApp Manager:
From Facebook Business Manager, go to WhatsApp Manager. - Access the Flows Section:
Under Account Tools in Facebook Business Manager, click on Flows.
- Create a New Flow:
In the Flows page, you can see a list of existing flows in your WhatsApp Business Account.
Click the Create New Flow button in the top-right corner to start building a new flow.
- Add Flow Details:
Name the Flow: Provide a name for your flow.
Choose the Category: Select a category for the flow (you can add more than one category).
- Edit the Flow Using Flow JSON:
When editing a flow, use the code panel to configure the Flow JSON.
Define the structure and actions of your flow using the JSON editor.
- Preview the Flow:
Click Run to update the right-side preview panel with the code in the editor. This allows you to see the flow in action based on your JSON configuration.
- Test the Flow in Interactive Mode:
You can also view and test your flow using the interactive mode to ensure everything works as expected.
- Save and Publish:
Once your flow is tested and finalised, click Save Draft.
When ready, click Publish. Remember, once the flow is published, it cannot be changed.
Note: For more information on the components available for media upload, you can refer to the official documentation here: WhatsApp Flow Components
Syncing the Forms on Verloop.io’s Dashboard
To sync Forms from Facebook Business Manager to Verloop.io’s dashboard, follow these steps:
- Access the Forms Section
Navigate to the “Forms” section in the Whatsapp Business Account tab.
- Synchronise Forms
Click on the “Synchronise Forms” button to initiate syncing.
If no forms are available, you will be prompted to create a new flow on Facebook Business Manager.
If no forms are available, you will be prompted to create a new form on Facebook Business Manager.
- View Synced forms
Once synced, you will see a list of all your forms with basic details such as flow name, status (drafted, published, deprecated, etc.), expires in (when the form expires) and actions.
Actions:
Under actions, there are two options available:
| ACTIONS | DESCRIPTION |
| Edit | This option enables you to edit the form. Clicking on this option will redirect you to Facebook Business Manager. |
| Form Setup | Clicking on ‘Form Setup’ will open out a Form Settings screen, where you can set up a message to be sent if this form has been accessed from a pre-closed conversation and the form expiry duration. |
Form Expiry
Form expiry lets you add an expiry time (in hours) for when you want the form to expire. This enables you to manage forms effectively as they are time-bound. Along with form expiry duration, you can also set up a message that needs to be sent if the form has been accessed post-expiry.
Default Settings –
Please note that the default form expiry is set as 0 hrs. (This means the form never expires.)
The default message is set as – “Thank you for your submission, but the form has expired. Please reply or send us a message to continue.”
You can change these according to your requirements.
- Utilise Forms in Outreach
You can create templates with form CTAs to send interactive messages to your customers. These templates can be sent via API or by uploading an Excel file with the required details. There are three main categories under which you can create templates:
- Marketing – Form Templates
- Create a new template.
- Fill in the template name and select your desired language. The guidelines for the template name are that the name can only contain lowercase alphanumeric characters, underscores and should not start with ‘sample’.
- Select “Marketing” as the category.
- Select “Form” as the sub-category.
- You can now fill in the necessary details you desire. The header and footer are optional. Click the toggle on if you wish to add them. You can then enter the Button Label under ‘Buttons’. And also select the form you want to add.
- Depending on the form selected, you can choose the Flow Action, between ‘Navigate’ and ‘data exchange’.
| FLOW ACTION | DESCRIPTION |
| Data Exchange | You can only use this action if your Flow is connected to a Data Endpoint. Use it when you need to send data to your server before moving to the next screen or ending the flow. The server will then decide the next step and provide the needed information. |
| Navigate | This option triggers the next screen in the flow using the provided payload from the chosen first screen. The CTA button is disabled until the required data is supplied. |
- Finally, synchronise forms to enable forms as your CTA.
Alternatively, you could have also selected the Custom sub-category for more flexibility:
- Marketing – Custom Templates
- Choose “Marketing” as the category and “Custom” as the sub-category.
- Toggle on the Button option, select the required type, and fill in the details before adding the button to the form.
- Utility – Custom Templates
- Choose “Utility” as the category and “Custom” as the sub-category.
- Toggle on the Button option, select the required type, and fill in the necessary details before adding the button to the form.
- Forms block in Bot builder
While creating a bot recipe, add a new block called “Forms”.
Components of a Forms Block
| Component | Description |
| Media File Upload (optional) | Upload any desired media file to enhance the form’s visual appeal and provide context for users. |
| Question Input | Enter the question you want to ask users, ensuring clarity and relevance to the task at hand. |
| CTA Button Text | Configure the Call-To-Action (CTA) button text, guiding users on what action to take next after responding to the form. |
| Submission Configuration | Set up the subsequent recipe steps for handling successful form submissions, directing users based on their responses. |
| Fallback Flow Configuration | Implement fallback flows to manage potential errors or failures during form submission, ensuring users receive appropriate guidance and support. |
Note:
Under form settings:
You can select the form which you’d like to trigger. Upon selecting the desired form, the form status will be visible. Also select the form action.
You can also select the first screen to be shown from the drop down.
Saving Forms and Getting Form Responses:
In our system, form responses are stored and utilised in different ways depending on the use case:
When used via outreach: The form response is captured and reflected in the outreach report for easy tracking and analysis.
When used within a recipe: Each response from the form is automatically converted into a variable based on the form’s response JSON. For every key in the JSON, a corresponding variable is automatically created, eliminating the need to manually define variables.
For example, if the form block is named Form1 and the response contains a key “name”, a variable will be created as Form1.response.name, where Form1 refers to the form block, and “name” refers to the key storing the value.
Response availability: In addition to becoming variables, the form responses are also available in the master report for comprehensive data analysis.
In the case of API responses, our system automatically creates variables based on the structure of the JSON response. The pattern for the variables follows this format: blockName.response.body.keyName in case you want access body of response, in case of header the format is blockName.response.header.keyName
where:
- blockName is the name of the API block calling the response.
- KeyName is the key from the JSON response.
Example JSON Response:
json
{
"user": {
"name": "John Doe",
"email": "johndoe@example.com"
},
"order": {
"id": "12345",
"status": "shipped"
}
}Variable Creation:
If the API block is named APIBlock1, the following variables will be automatically created:
- APIBlock1.response.body.user.name → “John Doe”
- APIBlock1.response.body.user.email → “johndoe@example.com”
- APIBlock1.response.body.order.id → “12345”
- APIBlock1.response.body.order.status → “shipped”
Utilising Forms in Your Bot Flow
Integrate Forms at strategic points in your bot flow to enhance user interactions:
- Dynamic Responses: Use the information collected through Forms to generate personalised responses, tailoring the conversation based on user inputs.
- Data Collection and Processing: Gather information from users and process it efficiently, sending the data to external systems or retrieving relevant information to display in the chat.
- Error Handling: Implement fallback flows for scenarios where the form submission fails, ensuring a smooth user experience even in case of errors.
- Follow-up Actions: Utilise stored form responses in subsequent steps of your bot flow to drive further engagement or actions based on user submissions.
By following these steps, you can effectively create, manage, and utilise Forms to enhance customer interactions and streamline various processes directly within WhatsApp.
