How to submit HTML Form to WhatsApp | Sending Form fields to WhatsApp Using HTML,CSS and Javascript

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

Step 1:

First you need to design a HTML form and give the id to each input field because these 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 following

<button type="button" class="btn btn-primary" onclick="whatsapp();">Submit</button>

HTML Code

                   <form action="#" class="form-group">
                        <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="button" class="btn btn-primary" onclick="whatsapp();">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 whatsapp() and 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 is used to hold the values of input fields.

JavaScript Code

<script>
function whatsapp(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var date = document.getElementById("date").value;
var message = document.getElementById("message").value;

var url = "https://wa.me/9182728581?text="
+"*Name :* "+name+"%0a"
+"*Email :* "+email+"%0a"
+"*Phone :* "+phone+"%0a"
+"*Date :* "+date+"%0a"
+"*Message :* "+message;

window.open(url,'_blank').focus();
}
</script>

I hope you got all information which was required to make this form and send it to WhatsApp. You can check the following videos as well.