How to Create a WhatsApp Form in WordPress

Do you need to create a WhatsApp form on your WordPress site?

WPForms makes it easy to send a notification to a WhatsApp number each time you get a new contact form message.

Connecting a WordPress site with WhatsApp in this way can be complex, and most of the existing solutions are limited. The good news is that the WPForms and Uncanny Automator integration provides an easy and powerful way to get this done.

Read on to learn how to set it all up!

How Do I Create a WhatsApp Form?

You can create a WhatsApp form easily using WPForms as a WhatsApp plugin. It integrates seamlessly with the Uncanny Automator plugin, and that’s how you can send form entries to WhatsApp’s Cloud API.

We set this up ourselves and found it incredibly easy to achieve. Here’s how we did it.

How to Create a WhatsApp Form in WordPress

We’ll be using the following tools and platforms:

• WPForms Pro or Lite
• Uncanny Automator Pro or Lite
• Facebook for Developers
• Meta Business Suite.

Please note that you will need a Facebook account to access the Facebook for Developers and Meta Business Suite platforms.

Step 1: Install WPForms & Uncanny Automator

First, we’ll get started by installing WPForms. We recommend that you use WPForms Pro so that you have access to all of our advanced tools and features.

WPForms is the best form plugin for WordPress with 6+ million active installations, and WPForms has 13,037 5-star reviews on WordPress.org.

For help with installing WPForms, check out this helpful guide to installing WordPress plugins for beginners.

Once you’ve got WPForms installed, the next step is installing Uncanny Automator.

Uncanny Automator is the leading WordPress automation plugin. You can use it to connect WPForms to different plugins and platforms.

Uncanny Automator Lite will work just fine for this tutorial. If you choose to upgrade to Pro you’ll have more control over your WordPress WhatsApp form, including the ability to look for a specific value in a field before sending the form to WhatsApp.

When you’ve decided which version to use, go ahead and install Uncanny Automator like you installed WPForms.

Ready to move on?

Step 2: Connect Your Site With Uncanny Automator

You can connect your site with Uncanny Automator from the WordPress admin dashboard.

To do this, click through Automator » Settings from the sidebar in the WordPress dashboard.

The page will open in the General tab.

Scroll to the License section and click the button labeled Connect your site.

You’ll see a popup window where you can now initiate the setup wizard by clicking Connect your free account.

At this point, you’ll need to enter your name and email and set up your Uncanny Automator account. This step takes just a minute or less, and then you’ll be redirected back to WordPress.

Next, we need to first set up a Business app on Facebook for Developers. We’ll hop out of WordPress for a short while, but keep the tab open, as we’ll be right back.

Step 3: Create a Business App on Facebook for Developers

In order to send forms from WordPress to WhatsApp, we’ll need to create a Meta (Facebook) Business app first.

For this step, you’ll need to have a regular Facebook account.

Head over to Meta for Developers and click My Apps to get started.

In the dashboard, click Create App.

On this screen, you’ll have a range of app types to choose from. Select Business, then scroll down and click Next.

After this, you’ll be prompted to provide some basic information, such as a name for your new app, email address, and your Business Manager account.

We’re assuming you’re starting from scratch, so you don’t already have a Business Manager account. In this case, leave it at No Business manager account selected. But if you do have one, select it from the dropdown.

Click Create app to move on to the next stage.

On the next page, you’ll see a bunch of products you can add to your business app.

Click Set up under the WhatsApp icon.

This will redirect you to a WhatsApp Business Platform API window. You’ll be prompted to create or select a Meta Business account from a dropdown.

This field will be set to Create a business account by default. If you don’t have one, you can simply click Continue to move on.

Once you’ve done that, click Start using the API.

On the next page, you’ll see 5 steps, but we found that we only needed to look at step 1, 3, and 5.

From Step 1, grab the following details:

• Temporary Access Token
• Phone number ID
• WhatsApp Business Account ID

We’ll need these details when we hop back into WordPress shortly. For now, you’ll notice that what you have is a temporary access token that will expire in 23 hours.

You can use it for testing purposes, but you’ll need a permanent access token for the connection to work fully. We’ll show you how to get a permanent token shortly.

Switch tabs and head back into the Uncanny Automator Settings page. Here, we’ll add our Access Token, Phone Number ID, and WhatsApp Business Account ID to Uncanny Automator.

To do this, head into the WordPress admin dashboard and click through Automator » Settings » Premium Integrations » WhatsApp.

Then paste the details and click Connect WhatsApp account.

We’ll have a functioning Uncanny Automator and WhatsApp connection at this point, but we’ve used a temporary token. We’ll create a permanent one in a few steps when we configure webhooks.

First, let’s add a phone number to your business app.

Add a Phone Number to Your App

Setting up a phone number is an important step that will allow you to send messages to WhatsApp numbers.

To add one to your business app, scroll down to Step 5 and click  Add phone number.

If you chose Create a business account when you first landed on the WhatsApp Business platform, a modal will pop up now, prompting you to create a WhatsApp Business profile.

Here, you’ll need to enter a few details:

• WhatsApp Business profile display name
• Timezone
• Category
• Business description (optional)

On the next page, there’ll be a few more fields you’ll need to fill out:

• Legal business name
• Business email
• Country
• Business website/ URL or a social media profile

Click Next once you’re done.

Now, you can go ahead to enter the phone number you’d like to use with WhatsApp.

This may seem like a long process to create a WhatsApp form, but we’re almost there.

Configure Webhooks

Webhooks are an important part of how Uncanny Automator will communicate with WhatsApp.

To set this up, scroll down to Step 3 and click Configure webhooks.

On the Webhooks configuration page, click the Edit button in the section labeled Configuration.

Now, we’ll quickly hop back into the WhatsApp settings in Automator.

Copy the Webhooks URL along with the value in the field labeled Verify Token.

Head back into the WhatsApp Business tab, enter these details, and then click Verify and save.

There’s one more step to take here. Scroll down and click Manage.

Then scroll down again to Messages and click Subscribe. Save these settings, and your webhook will be all configured.

Finally, we’ll need to set up a permanent access token, and we’ll be ready to start using our WhatsApp form.

Configure a Permanent Access Token

First, we’ll have to add a new System user to your business app. To do this, you’ll need to log on to the Meta Business Suite and click on Business Settings.

Then, look for the System users link under Users.

Click Add to get started.

Enter a name for the new system user, and assign them the role of admin from the dropdown labeled System user role, then click Create system user.

Now, you’ll need to assign assets to the new user. We want this user to have full access to the WhatsApp business app we’ve created.

So we’ll scroll down to the Assigned Assets section and click Add Assets.

Then, in the Apps section, click on the App you want to add—you should have only one at this stage.

Scroll down and toggle the button next to the Manage App button, then click Save to move on to the next stage.

We can now go ahead to create our new token. Click Generate new token in the section labeled  Generating Access Tokens.

From the available permissions, choose whatsapp_business_management and whatsapp_business_messaging and, again, click Generate token.

Copy the token and click OK.

Now, we’ll head back into Automator settings, where we previously entered the temporary access token and other details.

To get back here, click through Automator » Settings »Premium Integrations » WhatsApp.

Once there, click Disconnect.

Swap out the temporary access token you entered previously with the permanent one we’ve just created and save these settings.

Your connection is done! Now we need to create the form that’ll send notifications to WhatsApp.

Step 4: Create a New Form

At this point, you’ll be done working with the Facebook for Developers platform.

To send your form notifications to WhatsApp, we’ll now have to set up an Uncanny Automator recipe. This is the part we found easiest.

We just need to enable this recipe on the forms we’d like to send to WhatsApp.

For this guide we’ll assume you want to create a new form.

From the WordPress admin area, navigate to WPForms » Form Templates. This will take you to the template gallery, where you can choose from 2,000+ WordPress form templates.

For this guide, we’ll choose the  Simple Contact Form Template.

Clicking on Simple Contact Form Template will open up the form in the form builder. We can customize the form by adding form fields from the panel on the left, but the simple contact form is good enough for this example, so we’ll leave it as is.

What we want to do is to set up this particular form to send submissions to WordPress. So, navigate over to the left sidebar and click through Marketing » Uncanny Automator.

Click Create Automation. 

You’ll now be prompted to connect your WhatsApp account with Uncanny Automator.

Go ahead and click Connect account to move on.

You’ll now be redirected to an Uncanny Automator recipe page. We’re almost done!

Step 5: Create a New Recipe to Send WordPress Form Entries to WhatsApp

Uncanny Automator recipes have two parts: a trigger and an event. The trigger is the action or initial event that triggers a follow-up action called an event.

In this case, a form submission will be the trigger, and receiving a notification on a WhatsApp number will be the action.

So, first, navigate to the Triggers section and click on the WPForms logo, then choose A form is submitted as your trigger.

Then, scroll down to the Actions section and click Add action.

Look for the WhatsApp logo, and click on it when you find it.

Then click on  Choose Action. 

You’ll see the options to Send a WhatsApp Template to a WhatsApp number and Send a WhatsApp message to a number.

By default, your first message to a WhatsApp number using the WhatsApp Cloud API has to be a WhatsApp message template. Once the recipient of the message template responds to your initial message, you’ll be able to send them a regular message.

None of the available WhatsApp message templates are designed for form submission notifications. However, you might not mind using one of the complementary WhatsApp message templates.

Go ahead and click Send a WhatsApp message template to a number.

You can make limited customizations to these default templates by pulling data using preset variables.  Here’s what to do:

Click Get variables to add variables like a user’s name and email to the template.

We need a variable to add content to the body of the template. So in the Body variables field, click on the asterisk to see the available variables.

Simply select the variable type you want, then select the tokens you’d like to include in the template.

In this case, we’ll choose from the Triggers section, since the trigger is an action in WPForms, and we want WPForms-specific tokens.

When you scroll below the Triggers label, you’ll see the trigger for our recipe, which is the submission of a form. Click on the dropdown icon next to it.

You’ll now see a bunch of WPForms-specific tokens to choose from.

We’ll select Name, Email, and the message field for our WhatsApp form, which is labeled What can we help you with. Yours might be something different.

You can also add a bit of text to the template to help organize things. We’ll add a few labels to ours, along with some punctuation marks.

Remember to add some spaces in between the content. If you don’t, the text will appear without spaces when you receive notifications.

Remember to toggle the Status button on the right of the page to make the connection live.

And that’s it!

You’ll now have a fully active connection that sends a message to a WhatsApp number each time a form is submitted on your website.

Here’s the result of the form submission that we received in WhatsApp:

You’ll see the name of the user, which is Sullie Eloso, in this case, and their email address, [email protected]. You’ll also see that the template adds a bit of text that isn’t useful.

We can’t change this from your site, but you can create a fully customized template, if you’d prefer, on the Meta Business Manager platform.

And that wraps it up for our guide to sending form submission notifications to WhatsApp! Although this took us a while to set up, we hope this guide will help you to retrace our steps.

Next, Get Slack Notifications When a Form is Submitted

We’ve just shown you how to set up your website to send form submission notifications to a WhatsApp number.

Did you know you can do the same thing with Slack?

Learn all about this in our guide to getting Slack notifications from WordPress forms.

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

Create Your WordPress Form Now

And if you found this article useful, make sure to follow us on Facebook and Twitter for more from the blog.