Views 182
Free Popup Form with Simple Animation (HTML, CSS, and JS).
Free popup form with html css js- Are you looking to enhance your website with a stylish and functional pop-up form? I’ve created a simple yet effective popup form with smooth animations using HTML, CSS, and JavaScript. The best part? It’s available for free on GitHub! In this post, I’ll share the benefits of using this popup form, how you can download it, and how to integrate it into your website.
Why use this pop-up form?
Popup forms are a powerful tool for capturing leads, gathering feedback, and promoting special offers. Here’s what makes this pop-up form stand out:
- Simple Animation: Smooth, subtle animations make the popup form more engaging and visually appealing.
- Responsive Design: The form is fully responsive, ensuring it looks great on all devices.
- Easy to Customize: You can easily modify the HTML, CSS, and JavaScript to fit your specific needs and branding.
Benefits of Using Popup Forms
Increased Conversions: Popup forms can significantly boost your conversion rates by capturing visitors’ attention.
Improved User Engagement: Engage your visitors with relevant offers or requests at the right moment.
Lead Generation: Collect valuable information from your users, such as email addresses, which can be used for marketing purposes.
How to Download and Use the Free Popup Form
Step 1: Download the Popup Form from GitHub
Click the link at the end of this post to go to GitHub and download the free popup form files.
Step 2: Extract the Files
Once you’ve downloaded the repository, extract the contents to your desired location on your computer.
Step 3: Integrate the Popup Form into Your Website
- Include the Files:
- Add the HTML, CSS, and JavaScript files to your project directory.
- Link the Files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title>
<!--Google Fonts and Icons-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="center">
<button type="button" class="custom-main-btn animate flip" style="--color1: rgb(209, 235, 239); --color2: rgb(17, 148, 170)" onclick="openPop()">
<label
for="item4"
>
<span class="material-icons-outlined"> person </span>
Book Appointment
</label>
</button>
<div class="popup">
<div class="popup-content animate-pop-in">
<div class="close" onclick="closePop()">
<span class="material-icons-round">cancel</span>
</div>
<form id="leadForm">
<label for="Name" class="label" >Name:</label>
<input class="input" placeholder="Name" type="text" id="Name" name="Name" value="" required />
<label for="email" class="label" >Email:</label>
<input class="input" placeholder="Email" type="email" id="email" name="email" value="" required />
<label for="phoneNumbers" class="label">Mobile: </label>
<input class="input" placeholder="Mobile No." type="tel" id="mobile" name="phoneNumbers" value="" required />
<input id="utm_source" type="hidden" name="utm_source" value="">
<input id="utm_medium" type="hidden" name="utm_medium" value="">
<input id="utm_campaign" type="hidden" name="utm_campaign" value="">
<input id="utm_content" type="hidden" name="utm_content" value="">
<input id="utm_term" type="hidden" name="utm_term" value="">
<div id="mobileError" style="display: none; color: red;">Please enter a valid 10-digit mobile number.</div>
<div id="kylaserror" style="display:none; color: red;" >Number Existed</div>
<button type="submit" class="submit-button"> Submit</button>
</form>
<div id="successMessage" style="display: none; color: green;">Successfully submitted!</div>
</div>
</div>
</div>Link the CSS file in the <head> section of your HTML document:
<style>
.center {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.custom-main-btn {
width: fit-content;
height: fit-content;
font-family: poppins;
font-size: 18px;
color: white;
background: rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 8mm;
border:1px solid ;
cursor: pointer;
}
.custom-main-btn label {
display: flex;
gap:10px;
align-items: center;
justify-content: left;
font-size: 15px;
font-weight: 500;
overflow: hidden;
transition: 0.35s ease-out;
}
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
display: none;
align-items: center;
justify-content: center;
animation: fadein 0.25s ease-out;
}
.popup-content {
width: 300px;
height: fit-content;
background: white;
box-sizing: border-box;
padding: 30px 25px;
border-radius: 3mm;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
font-family: poppins;
position: relative;
animation: scalein 0.25s ease-out;
z-index:999;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.close:hover {
color: rgb(221, 44, 44);
}
.head {
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
}
.text {
font-size: 14px;
color: rgb(100, 100, 100);
}
.input {
flex-grow: 1;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.input input[type="checkbox"] {
width: 15px;
height: 15px;
cursor: pointer;
}
.btns {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.btn {
flex-grow: 1;
margin: 0 5px;
padding: 7px 0;
font-family: poppins;
outline: none;
border: none;
border-radius: 1mm;
cursor: pointer;
}
.btn:nth-child(1) {
background: rgb(238, 241, 247);
color: rgb(60, 60, 60);
}
.btn:nth-child(2) {
background: rgb(8, 95, 225);
color: white;
}
.btn:nth-child(1):hover {
background: rgb(232, 234, 240);
}
.btn:nth-child(2):hover {
background: rgb(7, 85, 202);
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scalein {
0% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.animate.flip {
animation-name: animate-flip;
transform-style: preserve-3d;
perspective: 1000px;
}
@keyframes animate-flip {
0% {
opacity: 0;
transform: rotateX(-120deg) scale(0.9, 0.9);
}
100% {
opacity: 1;
transform: rotateX(0deg) scale(1, 1);
}
}
.animate {
animation-duration: 0.75s;
animation-duration: 1s;
animation-delay: 0.5s;
animation-name: animate-fade;
animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
animation-fill-mode: backwards;
}
/* Pop In */
.animate-pop-in {
animation-name: animate-pop-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes animate-pop-in {
0% {
opacity: 0;
transform: scale(0.5, 0.5);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
/* Pop Out */
.animate-pop-out {
animation-name: animate-pop-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes animate-pop-out {
0% {
opacity: 1;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform: scale(0.5, 0.5);
}
}
.custom-main-btn {
position: relative;
padding: 10px 20px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
background-color: #915097;
transition: background-color 0.3s;
}
.custom-main-btn:hover {
background-color: ;
}
form {
background-color: #ffffff;
width: 100%;
height:100%;
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
border-radius: 8px;
}
form h3{
color: #020202;
}
.submit-button {
width: 100%;
margin-top: 2px;
height: 55px;
background: #915097;
border-radius: 191px;
border: 0;
outline: none;
color: #ffffff;
font-size: 18px;
font-weight: 500;
line-height: 1.765em;
letter-spacing: 0.3px;
font-family: 'DM Sans', Sans-Serif;
box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000;
transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
cursor: pointer;
}
.submit-button:hover {
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a;
}
.label {
top: 5px;
left: 5px;
font-family: 'DM Sans', Sans-Serif;
font-size: 14px;
font-weight: 600;
line-height: 1.765em;
letter-spacing: 0.3px;
color: #020202;
}
input {
font-family: 'DM Sans', Sans-Serif;
min-height: 44px;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-color: black black #b1b1b1;
color: #020202;
background-color: rgba(0, 0, 0, 0);
margin-bottom: 15px;
margin-top: 0;
padding: 0 0 0;
font-size: 18px;
line-height: 2.111em;
transition: border-color .3s, color .3s;
}
input:focus {
border: 1.5px solid #2d79f3;
}
input::placeholder, form {
font-size: 18px;
letter-spacing: 0.3px;
font-family: 'DM Sans', Sans-Serif;
color: #6b6b6b !important;
}
@media screen and (max-width: 400px) {
form {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
input{
margin-bottom: 20px;
font-size: 19px !important;
}
label{
margin-bottom:10px;
}
.this-body {
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
Link the JavaScript file just before the closing </body> tag
<script>
function toggleText(button) {
button.classList.toggle('clicked');
}
function closePop() {
const popup = document.querySelector(".popup");
const popupContent = document.querySelector(".popup-content");
// Add the pop-out animation class
popupContent.classList.remove("animate-pop-in");
popupContent.classList.add("animate-pop-out");
// Set a timeout to hide the popup after the animation duration
setTimeout(() => {
popup.style.display = "none";
popupContent.classList.remove("animate-pop-out");
}, 500); // Match the animation duration
}
function openPop() {
const popup = document.querySelector(".popup");
const popupContent = document.querySelector(".popup-content");
// Remove the pop-out animation class if it exists
popupContent.classList.remove("animate-pop-out");
// Add the pop-in animation class and display the popup
popup.style.display = "flex";
popupContent.classList.add("animate-pop-in");
}
document
.getElementById("leadForm")
.addEventListener("submit", (event) => {
const mobileInput = document.getElementById("mobile");
const mobileError = document.getElementById("mobileError");
const successMessage = document.getElementById("successMessage");
const errorMessage = document.getElementById("kylaserror");
const utmCampaign = document.getElementById("utm_campaign");
const utmMedium = document.getElementById("utm_medium");
const utmTerm = document.getElementById("utm_term");
const utmContent = document.getElementById("utm_content");
const utmSource = document.getElementById("utm_source");
//these code for grab the utm parameters
function getUTMParameters() {
const urlParams = new URLSearchParams(window.location.search);
const utmSource = urlParams.get('utm_source');
if (utmSource) {
document.getElementById('utm_source').value = utmSource;
}
const utmMedium = urlParams.get('utm_medium');
if (utmMedium) {
document.getElementById('utm_medium').value = utmMedium;
}
const utmCampaign = urlParams.get('utm_campaign');
if (utmCampaign) {
document.getElementById('utm_campaign').value = utmCampaign;
}
const utmContent = urlParams.get('utm_content');
if (utmContent) {
document.getElementById('utm_content').value = utmContent;
}
const utmTerm = urlParams.get('utm_term');
if (utmTerm) {
document.getElementById('utm_term').value = utmTerm;
}
}
// Call the function when the page loads or when the URL changes
window.onload = getUTMParameters;
window.onpopstate = getUTMParameters;
// Grab the UTM parameters
getUTMParameters();
// Send your payload...
if (mobileInput.value.trim() === "" || mobileInput.value.trim().length !== 10 || isNaN(mobileInput.value.trim())) {
mobileError.style.display = "block";
successMessage.style.display = "none";
event.preventDefault();
} else {
mobileError.style.display = "none";
successMessage.style.display = "none";
event.preventDefault();
const apiUrl = "";
const apiKey = "";
const leadData = {
firstName: document.getElementById("Name").value,
utmCampaign: document.getElementById("utm_campaign").value,
utmMedium: document.getElementById("utm_medium").value,
utmTerm: document.getElementById("utm_term").value,
utmContent: document.getElementById("utm_content").value,
utmSource: document.getElementById("utm_source").value,
emails: [
{
type: "OFFICE",
value: document.getElementById("email").value,
primary: true,
},
],
phoneNumbers: [
{
"type": "MOBILE",
"code": "IN",
"value": document.getElementById("mobile").value,
"dialCode": "+91",
"primary": true
}
],
};
fetch(apiUrl, {
method: "POST",
headers: { "Content-Type": "application/json", "api-key": apiKey },
body: JSON.stringify(leadData),
})
.then((response) => {
if (response.ok) {
// If response is not ok, throw an error to be caught in the catch block
return response.json().then((errorData) => {
throw new Error(errorData.message || 'An error occurred');
});
}
return response.json();
})
.then((data) => {
console.log(data);
successMessage.style.display = "block";
setTimeout(() => {
window.location.href = "#"; // Replace with the URL you want to redirect to
}, 3000); // Redirect after 3 seconds (3000 milliseconds)
})
.catch((error) => {
console.error("Error:", error);
errorMessage.style.display = 'block';
errorMessage.textContent = error.message; // Display the error message from the response
});
}
function sendFormDataToZapier(formData) {
const url = '';
const urlSearchParams = new URLSearchParams(formData);
const requestBody = urlSearchParams.toString();
const request = new XMLHttpRequest();
request.open("POST", url, true);
request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
request.onreadystatechange = function () {
if (request.readyState === XMLHttpRequest.DONE) {
if (request.status === 200) {
console.log("Form data sent to Zapier webhook successfully");
} else {
console.error("Error sending form data to Zapier webhook");
}
}
};
request.send(requestBody);
}
const formData = {
"name": document.getElementById("Name").value,
"email": document.getElementById("email").value,
"phoneNumber": document.getElementById("mobile").value,
};
sendFormDataToZapier(formData);
});
</script>- Customize as Needed:
- Modify the HTML, CSS, and JavaScript files to match your website’s design and functionality needs.
- Test the pop-up Form:
- Ensure the pop-up form appears and functions correctly across different devices and browsers.
Experience the Benefits of a Stylish pop-up Form
Don’t miss out on this opportunity to add a professional and engaging pop-up form to your website. Download the free popup form from GitHub today and start capturing more leads and engaging your visitors effectively.
[Download Free Popup Form on GitHub]
Happy coding!
