How to submit HTML Form to Whats App using JavaScript

How to submit HTML Form to Whats App using JavaScript

How to submit HTML Form to Whats App | Sending Form fields to Whats App Using HTML,CSS and JavaScript

Amit Gajare's photo
Amit Gajare
·Sep 1, 2022·

2 min read

Play this article

Table of contents

  • Information
  • Step 1:
  • Step 2:


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.


Screenshot 2022-09-01 at 16-33-22 How to send Html form's data to WhatsApp Submit Form to WhatsApp Html form data to Whatsapp.png

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>


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

     <div class="form-group mb-3">
         <textarea id="message" cols="30" rows="5" class="form-control" placeholder="Message"></textarea>
     <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>

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

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 = ""
+"*Name :* "+name+"%0a"
+"*Email :* "+email+"%0a"
+"*Phone :* "+phone+"%0a"
+"*Date :* "+date+"%0a"
+"*Message :* "+message;,'_blank').focus();

add your number and design css part your self

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

Premium version Download

Did you find this article valuable?

Support Amit Gajare by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this