How to submit HTML Form to Whats App using JavaScript

Information

In this post, I am going to explain how can we submit HTML forms to WhatsApp. By using this functionality form’s data will be summited to the chat interface of WhatsApp, As normally we chat on WhatsApp. This example will tell you about sending form fields to WhatsApp by using JavaScript.

Demo

Step 1:

First, you need to design an HTML form and give the id to each input field because this id will be used in JavaScript code to send the data to WhatsApp such as

<input type="text" id="name" class="form-control" placeholder="Name" required>

and in the **form **element you just need to use action **attribute **and you also need to use a button by pressing this button the input fields will be sent to WhatsApp by using JavaScript code so you can use button as follows

<button type="submit" class="btn btn-primary">Submit</button>

HTML Code

<form action="#" class="form-group" id="whatsappForm">
        <div class="form-group mb-3">
            <input type="text" id="name" class="form-control" placeholder="Name" required>
        </div>
        <div class="form-group mb-3">
            <input type="email" id="email" class="form-control" placeholder="Email" required>
        </div>
        <div class="form-group mb-3">
            <input type="text" id="phone" class="form-control" placeholder="Phone Number" required>
        </div>

        <div class="form-group mb-3">
            <textarea id="message" cols="30" rows="5" class="form-control" placeholder="Message"></textarea>
        </div>
        <div class="text-end">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
        </div>
    </form>

Step 2:

Now, Create a JavaScript function called addEventListener this function will be called when someone clicks the button of the form and by using this function data will be sent to the WhatsApp interface. so first you need to take some variables which are used to hold the values of input fields.

JavaScript Code

document.getElementById("whatsappForm").addEventListener("submit", function (event) {
            event.preventDefault();

            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var phone = document.getElementById("phone").value;
            var message = document.getElementById("message").value;
            let contact = 'your number'; // add your number ex(+9100000000)

            var encodedMessage = encodeURIComponent(
                "Name: " + name + "\n" +
                "Email: " + email + "\n" +
                "Phone: " + phone + "\n" +
                "Message: " + message
            );

            var link;

            // Check if user is on a mobile device
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                link = `whatsapp://send?phone=${contact}&text=${encodedMessage}`;
            } else { // Desktop device
                link = `https://web.whatsapp.com/send?phone=${contact}&text=${encodedMessage}`;
            }

            window.open(link, '_blank');
});

add your number and design css part yourself

I hope you got all information that was required to make this form and send it to WhatsApp.

Premium version Download

Normal version Download