Estimated reading time: 7 minutes

Contact form on WhatsApp

Nowadays, we depend on WhatsApp in our life basically to contact among others and follow our tasks or work groups. WhatsApp is so easy and plays a vital role in follow our business activities to improve our productivity so that we are as developers have to make users’ life easier. We programmed this contact form to send it to WhatsApp message. When user fill form fields and click send message, user’s respond will be send to target WhatsApp number. We base this form on HTML, CSS and JS or PHP.

JS Code

WathsApp Send
<!-- CONTAINER --> <section class="container-fluid px-0 pt-5"> <div class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5"> <form accept-charset="utf-8"> <div class="form-group mb-2"> <label>Message</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text rounded-0 fa fa-pencil-square-o"></span> </div> <input id="message" type="text" class="form-control rounded-0"> </div> </div> <div class="form-group mb-2"> <label>Enviar</label> <div class="col px-0"> <button id="by-link" type="button" class="btn btn-info">Link</button> <button id="by-popup" type="button" class="btn btn-info">PopUp</button> </div> </div> </form> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script> <script> let phone = "your number here" let message = document.getElementById('message') // buttons let linkHandler = document.getElementById('by-link') let popUpHandler = document.getElementById('by-popup') // font: https://detectmobilebrowsers.com let isMobile = (function(a) { if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)) ) { return true } else { return false } })(navigator.userAgent || navigator.vendor || window.opera) const makeLink = function(mode) { let mount = function() { if ( isMobile ) { let target = `whatsapp://send?` if ( !!phone && phone !== '' ) { target += `phone=${encodeURIComponent(phone.value)}&` } if ( !!message && message.value !== '' ) { target += `text=${encodeURIComponent(message.value)}` } return target } else { let target = `https://api.whatsapp.com/send?` if ( !!phone && phone !== '' ) { target += `phone=${encodeURIComponent(phone)}&` } if ( !!message && message.value !== '' ) { target += `text=${encodeURIComponent(message.value)}` } return target } } let openLink = function() { let a = document.createElement('a') a.target = '_blank' a.href = mount() a.click() console.log('By Link') } let openPopUp = function() { let h = 650, w = 550, l = Math.floor(((screen.availWidth || 1024) - w) / 2), t = Math.floor(((screen.availHeight || 700) - h) / 2) // open popup let options = `height=600,width=550,top=${t},left=${l},location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=0` let popup = window.open(mount(), 'self', options) if ( popup ) { popup.focus() } console.log('By PopUp') } switch (mode) { case 'link': openLink() break case 'popup': openPopUp() break } } // events handler(s) linkHandler.addEventListener('click', function(e) { makeLink('link') }, false) popUpHandler.addEventListener('click', function(e) { makeLink('popup') }, false) </script>

PHP Code

Whatsapp Message Send Using PHP <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row mt-5"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="card"> <div class="card-header text-center bg-primary text-white text-uppercase"> Send Message on Whatsapp using PHP </div> <div class="card-body"> <form action="" method="post"> <div class="form-group"> <input type="text" name="mobile" placeholder="Enter Mobile Number"class="form-control"> </div> <div class="form-group"> <input type="text" name="message" placeholder="Write Message"class="form-control"> </div> <div class="form-group"> <input type="submit" class="btn btn-primary" name="submit" value="Send Message"> </div> </form> </div> </div> </div> <div class="col-sm-3"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body>

<?php

if(isset($_POST[‘submit’]))
{
$mobile=$_POST[‘mobile’];
$message=$_POST[‘message’];
$data = [
‘phone’ => $mobile, // Receivers phone
‘body’ => $message, // Message
];
$json = json_encode($data); // Encode data to JSON
// URL for request POST /message
$url = ‘https://eu138.chat-api.com/instance136593/message?token=9d4j8zvj4eantnmr’;
// Make a POST request
$options = stream_context_create([‘http’ => [
‘method’ => ‘POST’,
‘header’ => ‘Content-type: application/json’,
‘content’ => $json
]]);
// Send a request
$result = file_get_contents($url, false, $options);
print_r($result);
}

?>

Contact form to WhatsApp

To contact me, click here please