Hello Everyone! Welcome back to FreemiumTech Website. How are you all? I Hope you all are well. Today our Article is all about How to Add or Create a Floating WhatsApp Chat or Contact Form? You can add it Down corner on your blogger website. So let's start today's article.
There are many ways to communicate between visitors and blog owners, one of which is by facilitating a contact page on the blog.
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: Open the Blogger > Layout > Add Gadgets.
Step 2: Select Widgets HTML/Javascript.
Step 3: Then copy and enter the following HTML code bellow.
<!--[ Contact Form Floating WhatsApp by FreemiumTech.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 4: Then Click the SAVE button.
The next stage is to install CSS and scripts to activate the WhatsApp floating contact form function.
Step 5: On the Blogger Dashboard, open the menu Template > Edit HTML.
Step 6: 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 FreemiumTech
/* 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 = '+8801625498944'; // 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 8: If everything has been done, now click SAVE template.
Now Refresh your website then you can see the whatsapp floating button in your website.
CONCLUSION
In this post I have made a tutorial about How to Create a Floating WhatsApp Chat or Contact Form. Which gives a beautiful look of your website. I hope you have liked it and please share with your friends and follow our blog for more.If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.