Add a Sticky Floating Contact Form in Blogger Website
In this video, you’ll learn how to add a floating contact button in Blogger that opens a popup window when clicked. The contact button stays fixed on the screen, so visitors can easily reach you from any page without scrolling or opening a separate contact page.
I’ll show you how to create the floating button, display the contact form in a popup, and customize the design to match your Blogger theme. Copy the code Provided below and use it just above the closing body tag.
<style>
@keyframes pulse-ring {
0% {
transform: scale(1);
opacity: 0.6;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
.custom-floating-btn {
position: fixed;
bottom: 20px;
left: 20px;
width: 60px;
height: 60px;
background-color: #4caf50;
color: #fff;
border-radius: 50%;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
cursor: pointer;
z-index: 998;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, background-color 0.3s;
overflow: visible;
}
.custom-floating-btn::before,
.custom-floating-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(76, 175, 80, 0.6);
border-radius: 50%;
z-index: -1;
animation: pulse-ring 2s infinite ease-out;
}
.custom-floating-btn::after {
animation-delay: 1s;
}
.custom-floating-btn:hover {
background-color: #45a049;
transform: scale(1.05);
}
.custom-floating-btn:hover::before,
.custom-floating-btn:hover::after {
animation: none;
}
.custom-floating-btn svg {
width: 28px;
height: 28px;
fill: white;
z-index: 2;
pointer-events: none;
}
.custom-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
backdrop-filter: blur(2px);
}
.custom-contact-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 40px;
border-radius: 12px;
width: 500px;
max-width: 90%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.custom-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-family: sans-serif;
}
.custom-input,
.custom-textarea {
width: 100%;
padding: 12px;
margin-bottom: 20px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
font-family: sans-serif;
transition: border-color 0.3s;
}
.custom-input:focus,
.custom-textarea:focus {
border-color: #4caf50;
outline: none;
}
.custom-submit-btn {
background-color: #4caf50;
color: #fff;
padding: 15px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
width: 100%;
transition: background-color 0.3s;
}
.custom-submit-btn:hover {
background-color: #45a049;
}
.custom-close-button {
position: absolute;
top: 15px;
right: 20px;
cursor: pointer;
font-size: 28px;
color: #999;
line-height: 1;
transition: color 0.3s;
}
.custom-close-button:hover {
color: #333;
}
@media only screen and (max-width: 600px) {
.custom-contact-popup {
width: 90%;
padding: 25px;
}
.custom-floating-btn {
bottom: 15px;
left: 15px;
width: 50px;
height: 50px;
}
}
</style>
<button aria-label='Contact Us' class='custom-floating-btn' onclick='openCustomContactForm()'>
<svg viewBox='0 0 24 24'>
<path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/>
</svg>
</button>
<div class='custom-overlay' onclick='closeCustomContactForm()'/>
<div class='custom-contact-popup'>
<span class='custom-close-button' onclick='closeCustomContactForm()'>×</span>
<form action='https://formsubmit.co/Your_Email_Address' method='POST'>
<input name='_honey' style='display:none' type='text'/>
<input name='_captcha' type='hidden' value='false'/>
<label class='custom-label' for='name'>Name</label>
<input class='custom-input' id='name' name='name' placeholder='John Doe' required='' type='text'/>
<label class='custom-label' for='email'>Email</label>
<input class='custom-input' id='email' name='email' placeholder='[email protected]' required='' type='email'/>
<label class='custom-label' for='message'>Message</label>
<textarea class='custom-textarea' id='message' name='message' placeholder='How can we help?' required='' rows='4'/>
<button class='custom-submit-btn' type='submit'>Send Message</button>
</form>
</div>
<script>
function openCustomContactForm() {
const modal = document.querySelector(".custom-contact-popup");
const overlay = document.querySelector(".custom-overlay");
const btn = document.querySelector(".custom-floating-btn");
modal.style.display = "block";
overlay.style.display = "block";
btn.style.opacity = "0";
btn.style.pointerEvents = "none";
}
function closeCustomContactForm() {
const modal = document.querySelector(".custom-contact-popup");
const overlay = document.querySelector(".custom-overlay");
const btn = document.querySelector(".custom-floating-btn");
modal.style.display = "none";
overlay.style.display = "none";
btn.style.opacity = "1";
btn.style.pointerEvents = "auto";
}
</script>If you want a clean, modern way to collect messages and improve user engagement on your Blogger website, this popup contact form is a simple and effective solution.