How to send a Wix contact form’s input data from my Wix site to my WhatsApp chat directly? (Wix Code with Velo).

I have been working with the Wix platform for more than six years and run a Web Design Company that primarily uses the Wix platform to design websites for our clients.

I have absolutely no coding background and have been learning the basics of coding from the Wix Velo learning platform. So this can be easily achieved with little coding knowledge.

The code below is designed to take the user’s input from a custom Wix form and then use that data to build the Whatsapp chat link with the input pre-written.

You might want to use this feature on your Wix website for various reasons. In this case, instead of having my users type input details without any order, I can have them enter the data in an input form which then redirects the user to my Whatsapp chat with the data already input and ready to send. This feature is quite valuable as many users nowadays prefer Whatsapp as a faster and easy-to-use method rather than email.

Before we begin:

Firstly, you’ll need to open the Wix Website Editor and enable Velo from the top menu under Dev Mode and select ‘Turn on Dev Mode’ as shown below.

Velo is Wix’s an open development platform that let’s you work in Wix’s visual builder, add custom functionality and interactions using Velo’s APIs, use your own tools, and enjoy serverless coding in both the front-end and backend.

A Code Editor will show up at the bottom of the page(like shown in the image below)and other options like Page Code, Databases, Velo Tools, etc are available on the left sidebar.

For this example, we will edit the code for the selected page by clicking ‘Page Code’ and choosing the desired page. This will enable our code only on visitors visiting this webpage.

• If you want to apply a certain code to all pages, you will have to select ‘Global(Site)’ and enter your code.

Let’s begin:

First, we need to Import wix-location API, which will enable us to use the feature in our code.

⚠️IMPORTANT⚠️️

These API imports need to go before any other code in your Velo Code Editor.

import wixLocation from 'wix-location';

Now that we’ve imported the API, it’s ready to use.

The next step is to add a click event. For this, we will use the export function. Now, when the ‘Submit’ button is clicked, it will trigger the event.

export function testbtn42_click(event) {

Note: Our input form in this scenario looks like this (for reference).

Once you’ve completed the above step, the next line of code we’re going to add will retrieve the input information that the user entered in the custom form and prepare it for the final Whatsapp link.

let text1 = "First Name:" + $w("#input7").value + "______";
let text2 = "Last Name:" + $w("#input8").value + "______";
let text3 = "Email:" + $w("#input9").value + "______";
let text4 = "Phone:" + $w("#input10").value + "______";
let text5 = "Message:" + $w("#input11").value; 
let text6 = text5.replace(/\s/g, "%20");

We are adding a prefix in each line with the ‘field name’ of the input to better organize the final data when we receive it. It’s important to note that we have used, ‘let text6 = text5.replace(/\s/g, “%20”);’ under the ‘message’ input to encode the input data for the Whatsapp link. The other inputs are single entries and ideally would not require encoding.

We have added the value “______” because currently, the Whatsapp link does not recognize line breaks. This makes it easier to distinguish the final data in the Whatsapp chat.

let link = "https://wa.me/XXXXXXXXXXXX?text=" + text1 + text3 + text5 + text7 + text10;

In the above line, we are putting together the final link. Please note that ‘XXXXXXXXXXXX’ will be replaced by the receiving phone number, written in international format without spaces or brackets.

Find more details about generating your Whatsapp link here.

Lastly, we have the earlier imported wix-location API redirect the user to the generated Whatsapp link with the form input data pre-filled as shown below.

wixLocation.to (link)

The final code:

import wixLocation from 'wix-location';
export function testbtn42_click(event) {
let text1 = "First Name:" + $w("#input7").value + "______";
let text3 = "Last Name:" + $w("#input8").value + "______";
let text5 = "Email:" + $w("#input9").value + "______";
let text7 = "Phone:" + $w("#input10").value + "______";
let text9 = "Message:" + $w("#input11").value; 
let text10 = text9.replace(/\s/g, "%20");
let link = "https://wa.me/XXXXXXXXXXXX?text=" + text1 + text3 + text5 + text7 + text10;
wixLocation.to (link)
}

Feel free to play around with it. You can replace or add the input fields.

Please Note:

It is a functional and easy to implement solution that helps users drop their information directly & quickly to your Whatsapp chat.

It is important to note that the link generated lets the user reach your destination phone number’s Whatsapp chat but does not automatically send the message. This may be to protect people from SPAM. As anyone can generate a link to any phone number and can SPAM that number.

I hope this helps out all those looking to add the Wix Contact Form to Whatsapp Chat feature to their Wix website.

Thank you for reading. Best of luck!

PS — If you have any suggestions to improve the code above or you have found any errors in it, please feel free to email me at hello@josesibik.com so I can update it.