Hello developers, today in this blog, you will learn to create a Responsive Popup Contact Form using HTML, CSS & JavaScript.
A contact form on a website allows visitors to contact the owner of the site or the company. To contact the person or the company, the visitor has to fill in their name, subject and message and resend it.
In this blog (Responsive Popup Contact Form) on the webpage, there is a button at the center of the webpage with the text 'open' and, when you click on the popup form will be visible. The popup box contains two input fields. Namely, the name and the phone number and, there is a button with the text 'send'. There is a cross above the box. By clicking the cross button, the popup box will close. The popup and the closing of the popup box are made by using JavaScript. CSS hover effect has been used for the 'Open' button.
The source code of this project is given below. If you want the source code of this program, you can copy it. You can use this Responsive Popup Contact Form code with your creativity and, can take this project to the next level.
Responsive Popup Contact Form [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html, and, remember, you have to make a file with a .html extension.
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
color: #fff;
background: #396afc;
background: -webkit-linear-gradient(to right, #2948ff, #396afc);
background: linear-gradient(to right, #2948ff, #396afc);
}
body.no-scroll {
overflow-y: hidden;
}
.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90vh;
}
button {
border: none;
outline: none;
background-color: #17222a;
padding: 24px 55px;
font-size: 18px;
color: white;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 10px;
border: 2px solid #396afc;
}
button:hover {
background-color: #121c2480;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(2, 2, 2, 0.685);
z-index: 9998;
opacity: 0;
pointer-events: none;
padding: 10px 20px;
transition: opacity 0.3s ease-in-out;
}
.popup-wrapper.active {
opacity: 1;
pointer-events: all;
}
.popup {
padding: 22px 25px;
max-width: 380px;
width: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #12192c;
border-radius: 15px;
}
.popup-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
padding: 0;
border: 0;
width: 30px;
height: 55px;
outline: none;
cursor: pointer;
display: inline-block;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition: transform 0.3s, opacity 0.3s;
-moz-transition: transform 0.3s, opacity 0.3s;
-ms-transition: transform 0.3s, opacity 0.3s;
-o-transition: transform 0.3s, opacity 0.3s;
}
.close-btn:before,
.close-btn:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 30px;
background-color: #fff;
border-radius: 1.5px;
transform: translateY(-50%);
}
.close-btn:before {
transform: translateY(-50%) rotate(45deg);
}
.close-btn:after {
transform: translateY(-50%) rotate(-45deg);
}
.close-btn:hover {
transform: scale(1.1);
}
.close-btn:active {
opacity: 0.8;
transform: scale(0.9);
}
.popup-form__input {
margin-bottom: 20px;
padding: 12px 20px;
width: 80%;
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#fff;
text-align: center;
}
let popup = document.querySelector(".popup-wrapper");
let popupForm = document.querySelector(".popup-form");
let popupBtn = document.querySelector(".popup-open");
let popupClose = document.querySelector(".close-btn");
popupBtn.addEventListener("click", (e) => {
e.preventDefault;
showPopup();
});
popupClose.addEventListener("click", (e) => {
e.preventDefault;
removePopup();
});
popupForm.addEventListener("submit", () => {
removePopup();
});
popup.addEventListener("click", (e) => {
let target = e.target;
if (target.classList.contains("popup-wrapper")) {
removePopup();
} else return;
});
function showPopup() {
popup.classList.add("active");
bodyScroll();
}
function removePopup() {
popup.classList.remove("active");
bodyScroll();
}
function bodyScroll() {
document.body.classList.toggle("no-scroll");
}
Thank you for reading our blog. If you face any problem in creating this Responsive Popup Contact Form using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team