In this article, I will show you how to send a WhatsApp message when an Wordpress Elementor form submission is received. Elementator is a popular wordpress plugin for website page & form builder. BotSailor can be used to capture Elementor form submission data & send WhatsApp message to the submitter.
You can create a contact form on Elementor and integrate it with BotSailor to send WhatsApp messages instantly.
We have also created a video tutorial on how to send a WhatsApp message when an Elementor form submission is received. You can watch the video tutorial:
You can create any kind of form and send a WhatsApp message when you receive the form submission.
First, you have to create a message template in the BotSailor. Read the article below to know how to create message template in BotSailor.
How to create a Message Template for WhatsApp by BotSailor
In the message template, you have to use a template variable called message.
Now you have to create a Webhook Workflow. To create a Webhook Workflow, follow the instructions below:
- Click on the Webhook Workflow menu in the left sidebar of the dashboard
- Now click on the create button to create a Webhook workflow.
- Provide a name in the Workflow name field.
- Select the WhatsApp account from where you want to send the message.
- Then select the message template you have created.
- Now click on the Create workflow button.
Instantly, a webhook callback URL will appear.
- Now copy the Webhook URL. You have to use the Webhook callback URL in the Eliminator form.
- Go to the WordPress admin dashboard.
- Select the Elementor -> select the Getting Started button.
- Click on Create Your First Page button.
Instantly, the Elementor page will appear.
- On the Elementor page, drag the form component and drop it on the editor.
- Instantly, a form will appear with three fields – name, email, and message– and a send button.
- You have to turn the Email field into a phone number field.
To turn the email field into a phone number field, you have to follow the instructions below:
- In the type, select number option.
- In the Label field, write "phone number".
- In the Placeholder field, write "phone number" .
- Now, go to the form’s actions after submit.
- On the add action, select Webhook.
- Then click on Webhook. And instantly, a webhook URL form will appear.
- And you have to paste the webhook URL that you have copied in the BotSailor.
- Then click on the publish button.
Now you have to test the Elementor form. To test the form, fill out the fields of the form.
- Put your name in the name field.
- Put your phone number in the phone number field.
- Then write a message in the message field.
Before clicking on the send button, you have to go to BotSailor and click on the Capture webhook response button.
Then return to the Elementor form and click on the Send button.
- It may take a while to capture the data.
- After a few moments, you will get the sample data.
- Now, you have to configure the Webhook Response Mapping
- In the phone number field, select the phone number.
- In the user name field, select Name.
- In the message field, select a message.
Finally, click on the Save Workflow button.
Now, let’s check if it’s working or not.
- Fill out the Elementor form again and click on the send button.
Now let’s check the report of the workflow. The status of the workflow is pending. It may take a while to complete the process.You have to wait a moment.
Now check your WhatsApp Account. Yes, the message has arrived.
So, this is how we can send a WhatsApp message when we receive an Elementor form submission.
Thank you for reading the article.
