There are also various contact form pages, usually site owners provide many alternative contact forms according to needs so that it is easy for visitors to interact.
One of them is WhatsApp chat contacts, in this article we will discuss a tutorial for creating WhatsApp chat contacts widget on a blogger site.
BEFORE CREATE THIS LET'S SEE A PREVIEW
HOW TO ADD A FLOATING WHATSAPP BUTTON?
Step 1: First of all Login to your Blogger Dashboard.Step 2: Open the Blogger > Layout > Add Gadgets.
Step 3: Select Widgets HTML/Javascript.
Step 4: Then copy and enter the following HTML code bellow.
<!--[ Contact Form Floating WhatsApp by AbdullahCoded.blogspot.Com ]-->
<div class='nav-whatsapp'>
<div class='wrapperWA'>
<div class='wrapperWA-header'>
<h2>WhatsApp Chat</h2>
<div class='closeWA'>
<svg class='h-6 w-6' fill='none' stroke='#f40076' viewbox='0 0 24 24'><path d='M6 18L18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'></path></svg>
</div>
</div>
<div class='form-container' id='waform-IT'>
<div class='formC'>
<div class='Fcontrol'>
<input class='cName' id='cName' name='name' required='required' type='text'>
<span class='nameC'>Name</span>
<span class='valid' id='error_name'></span>
</div>
<div class='Fcontrol'>
<input class='cEmail' id='cEmail' name='email' required='required' type='email'>
<span class='emailC'>Email</span>
<span class='valid' id='error_email'></span>
</div>
</div>
<div class='formC'>
<div class='Fcontrol'>
<select class='cSubject' id='cSubject'>
<option value='Help'>Help</option>
<option value='Question'>Question</option>
<option value='Request'>Request</option>
</select> <span class='subjectC'>Select Subject</span>
</div>
<div class='Fcontrol'>
<textarea class='cMessage' id='cMessage' name='message' required='required'></textarea>
<span class='messageC'>Message</span>
<span class='valid' id='error_message'></span>
</div>
</div>
<div class='formB'>
<a class='whatsapp-send' onclick='sendToWhatsApp()'><svg viewbox='0 0 32 32'>
<path d='M16 2a13 13 0 0 0-8 23.23V29a1 1 0 0 0 .51.87A1 1 0 0 0 9 30a1 1 0 0 0 .51-.14l3.65-2.19A12.64 12.64 0 0 0 16 28a13 13 0 0 0 0-26Zm0 24a11.13 11.13 0 0 1-2.76-.36 1 1 0 0 0-.76.11L10 27.23v-2.5a1 1 0 0 0-.42-.81A11 11 0 1 1 16 26Z'></path><path d='M19.86 15.18a1.9 1.9 0 0 0-2.64 0l-.09.09-1.4-1.4.09-.09a1.86 1.86 0 0 0 0-2.64l-1.59-1.59a1.9 1.9 0 0 0-2.64 0l-.8.79a3.56 3.56 0 0 0-.5 3.76 10.64 10.64 0 0 0 2.62 4 8.7 8.7 0 0 0 5.65 2.9 2.92 2.92 0 0 0 2.1-.79l.79-.8a1.86 1.86 0 0 0 0-2.64Zm-.62 3.61c-.57.58-2.78 0-4.92-2.11a8.88 8.88 0 0 1-2.13-3.21c-.26-.79-.25-1.44 0-1.71l.7-.7 1.4 1.4-.7.7a1 1 0 0 0 0 1.41l2.82 2.82a1 1 0 0 0 1.41 0l.7-.7 1.4 1.4Z'></path></svg>Send WhatsApp</a>
</div>
</div>
</div>
<div class='whatsapp-float'>
<div class='whatsapp-icon'>
<svg viewbox='0 0 512 512'><path d='M414.73 97.1A222.14 222.14 0 0 0 256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0 0 29.78 111L32 480l118.25-30.87a223.63 223.63 0 0 0 106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 0 0 414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 0 1-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0 1 71.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 0 1 185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 0 0-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0 0 31.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z'></path></svg>
</div>
<span class="whatsapp-text">Talk to us?</span>
</div>
</div>Adjust the text elements in the select tag section according to the subject you provide to differentiate the purpose of the WhatsApp chat contact message.
Step 5: Then Click the SAVE button.
The next stage is to install CSS and scripts to activate the WhatsApp floating contact form function.
Step 6: On the Blogger Dashboard, open the menu Template > Edit HTML.
Step 7: Search for ]]></b:skin> or </style>, then copy and place the following CSS right above the code.
<style>
.nav-whatsapp{position:fixed;bottom:20px;right:20px;z-index:1000;padding:12px 0}
.nav-whatsapp.active .wrapperWA{opacity:1;visibility:visible;width:400px;height:auto;z-index:6;display:block}
.nav-whatsapp.active .whatsapp-float{opacity:0;visibility:hidden}
.wrapperWA{position:fixed;right:20px;bottom:20px;width:60px;padding:25px;border-radius:5px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;z-index:-1;opacity:0;visibility:hidden;transition:opacity .3s ease;height:60px;margin:12px 0;background:#fff;display:none}
.wrapperWA-header{display:flex;align-items:center;margin-bottom:20px;justify-content:center;position:relative}
.wrapperWA-header h2{text-align:center;text-transform:uppercase;letter-spacing:3px;color:#332902;font-size:1rem;flex:1 1 auto;margin:0}
.wrapperWA-header .closeWA svg{width:20px;height:20px;float:right}
.form-container .formC:nth-child(1){display:grid;grid-template-columns:repeat(auto-fit,minmax(45%,1fr));gap:1rem;--gap:1rem}
.form-container .formC:nth-child(2){display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}
.form-container .formC .Fcontrol{position:relative}
.form-container .formC .Fcontrol input:focus,.form-container .formC .Fcontrol textarea:focus{border-color:#4caf50}
.Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol .cSubject,.Fcontrol textarea{width:100%;height:calc(3.5rem + calc(1px * 2));padding:.375rem 2.25rem .375rem .75rem;padding-top:1.625rem;border-radius:5px;margin-bottom:15px;border:1px solid rgba(0,0,0,0.05);background:#fff}
.Fcontrol textarea{height:100px}
.Fcontrol input:focus ~ .nameC,.Fcontrol input:focus ~ .emailC,.Fcontrol textarea:focus ~ .messageC{top:-5px}
.Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol textarea{padding:.75rem;padding-top:1.625rem;}
.Fcontrol .nameC,.Fcontrol .emailC,.Fcontrol .subjectC,.Fcontrol .messageC{position:absolute;top:0;left:0;z-index:2;height:auto;padding:1rem .75rem;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem);transform-origin:0 0;overflow:hidden;text-overflow:ellipsis;pointer-events:none;white-space:nowrap;color:rgba(33,37,41,0.65);transition:0.1s ease}
.formC .Fcontrol .cSubject{display:block;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px;border:1px solid rgba(0,0,0,0.08);-webkit-appearance:none;-moz-appearance:none;appearance:none}
.valid[data-text]:before{position:absolute;bottom:100%;left:12px;content:"";border:8px solid;border-color:transparent transparent #ffd91a transparent;top:calc(100% - 21px)}
.valid[data-text]:after,.valid[data-text]:before{opacity:1;transition:opacity 0.2s ease;pointer-events:none;z-index:3}
.valid[data-text]:after{content:attr(data-text);position:absolute;background:#ffd91a;left:0;top:calc(100% - 5px);font-size:12px;padding:5px;box-shadow:0 5px 10px rgb(0 0 0 / 8%);border-radius:5px}
.show#cName ~ .valid:after,.show#cEmail ~ .valid:after,.show#cMessage ~ .valid:after,.show#cName ~ .valid[data-text]:before,.show#cEmail ~ .valid[data-text]:before,.show#cMessage ~ .valid[data-text]:before{opacity:0}
.none#cName ~ .valid:after,.none#cEmail ~ .valid:after,.none#cMessage ~ .valid:after,.none#cName ~ .valid[data-text]:before,.none#cEmail ~ .valid[data-text]:before,.none#cMessage ~ .valid[data-text]:before{opacity:1}
.whatsapp-send{display:inline-flex;align-items:center;gap:0.3rem;padding:10px 20px;background-color:#4caf50;color:#fff;text-decoration:none;font-weight:bold;font-size:12px;border-radius:4px;transition:background-color 0.3s;cursor:default;height:auto;width:auto}
.whatsapp-send svg{fill:#fff;width:22px;height:22px}
.whatsapp-send:hover{background-color:#45a049}
.whatsapp-float{display:flex;align-items:center;flex-direction:column;gap:.2rem}
.whatsapp-float .whatsapp-icon{width:60px;height:60px;border-radius:50%;background-color:#4CAF50;display:flex;justify-content:center;align-items:center;animation-name:waAnimation;animation-duration:1.5s;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes waAnimation{0%{box-shadow:0 0 0 0 rgba(74,175,80,0.5)}80%{box-shadow:0 0 0 14px rgba(74,175,80,0)}}
.whatsapp-float .whatsapp-icon svg{fill:#fff;width:30px;height:30px}
/* Remove IE arrow */
select:focus{outline:none}
select::-ms-expand{display:none}
@media screen and (max-width:620px){
.formC:nth-child(1){gap:0}
.nav-whatsapp.active .wrapperWA{width:auto;height:auto;right:0;left:0;bottom:0;top:auto;margin:0;transition:all .3s ease}
.form-container .formC:nth-child(1){grid-template-columns:auto;gap:0}
}
.drK .wrapperWA{background:#202426}
.drK .Fcontrol input[type="text"],.drK .Fcontrol input[type="email"],.drK .Fcontrol .cSubject,.drK .Fcontrol textarea{background:#272b2d}
.drK .wrapperWA-header h2,.drK .Fcontrol .nameC,.drK .Fcontrol .emailC,.drK .Fcontrol .subjectC,.drK .Fcontrol .messageC{color:#fff}
</style>Step 7: Finally, place the javascript below above the code </body> or </body>.
<script>//<![CDATA[
// whatsApp floating form by AbdullahCoded
/* Open Close Button */
var menuToggle = document.querySelector(".whatsapp-float"),
wrapperMenu = document.querySelector(".nav-whatsapp"),
closeWA = document.querySelector(".closeWA");
var inputs = document.querySelectorAll('.Fcontrol input[type=text], .Fcontrol input[type=email], .Fcontrol textarea');
menuToggle.onclick = function() {
wrapperMenu.classList.toggle('active');
}
closeWA.onclick = function() {
wrapperMenu.classList.remove('active');
};
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
var bg = this.value ? 'show' : 'none';
this.setAttribute('class', bg);
});
}
function sendToWhatsApp() {
/* Input Form */
var name = document.getElementById("cName").value;
var email = document.getElementById("cEmail").value;
var subject = document.getElementById("cSubject").value;
var massage = document.getElementById("cMessage").value;
var postLink = window.location.href;
/* Validation for Required Columns */
var error_name = document.getElementById("error_name"),
error_email = document.getElementById("error_email"),
error_message = document.getElementById("error_message");
var text;
if (name == "") {
text = 'Please enter your name';
error_name.setAttribute('data-text', text);
return false;
}
if (email.indexOf("@") == -1 || email.length < 6) {
text = 'Please enter valid email';
error_email.setAttribute('data-text', text);
return false;
}
if (massage == "") {
text = 'Please enter your Massage';
error_message.setAttribute('data-text', text);
return false;
}
/* URL Final Whatsapp */
var message = "New message from " + name + "\n\n"; // Opening Message
message += "*Name:* " + name + "\n";
message += "*Email:* " + email + "\n";
message += "*Subject:* " + subject + "\n";
message += "*Massage:* " + massage + "\n\n";
message += "=============================" + "\n";
message += "*Form:* " + postLink + "\n";
message += "=============================";
/* WhatsApp Settings */
var walink = 'https://api.whatsapp.com/send?',
phoneNumber = '+92321xxxxxxx'; // Your WhatsApp number
var encodedMessage = encodeURIComponent(message);
var whatsappUrl = walink + "?phone=" + phoneNumber + "&text=" + encodedMessage;
window.open(whatsappUrl, '_blank');
return true;
}
//]]></script>Change the WhatsApp number with your WhatsApp number.
Step 9: If everything has been done, now click SAVE template.
Now Refresh your website then you can see the WhatsApp floating button in your website.
Now you can open articles or pages that have been protected to see the results.
Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
.png)