contactus-popup-javascript

Contact Us Popup Form Using JavaScript

Hello Friends,

In this blog post, I am going to explain you, how to make popup contact us form using javascript?

What is popup form?

popup forms are the same form that we usually see but the difference is only in their presentation.

popup forms are visible on any trigger event like a button click or link click.

It saves the space in the page as you can easily settle this button or link in your website or web page.

when user or customer click this link or button then they can use this popup form.

This popup form can be manual and automatic as per your requirement. Here we are explaining the functionality where popup form will be open at button click.

Generally, we can have registration, contact us, payment, subscription popup forms on our website.

Software used to develop this functionality:

NetBeans IDE
Xampp Server



What is the procedure to make this popup form using javascript?

This is a very simple process, you just need to follow the below step by step procedure.

Create a project as contact-popup though you can have any similar name.

Now create few files as shown in the image below.

formpopup


You will also need to download an image(cancel symbol 32X32 png) and keep that image in a images folder that you will create in your source file. You can see the image example in the demo form below at the right corner


Now copy and paste the code given below one by one as in the respective file.

formpopup.html:

<!DOCTYPE html>
<html>
<head>
<title>Popup contact us form</title>
<link href="formpopup.css" rel="stylesheet" type="text/css"/>
<script src="formpopup.js" type="text/javascript"></script>
</head>
<!-- Body start point -->
<body id="body" style="overflow:hidden;">
<div id="headerpop">
<!-- Popup Div Start point -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/cancel.png" onclick ="div_hide()">
<h2>Contact Us</h2>
<hr>
<input id="name" name="name" placeholder="Name" type="text">
<input id="email" name="email" placeholder="Email" type="text">
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
</div>
<!-- Popup Div End point -->
</div>
<!-- popup display button -->
<h1>Click this buttton below to see the popup form</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body End point -->
</html>

formpopup.js:

// Validating empty form field
function check_empty() {
if (document.getElementById('name').value == "" || document.getElementById('email').value == "" || document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//popup display function
function div_show() {
document.getElementById('headerpop').style.display = "block";
}
//popup hide function
function div_hide(){
document.getElementById('headerpop').style.display = "none";
}

formpopup.css:

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
#headerpop{
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family: 'Zilla Slab', serif;
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#8a6d6d;
}
p {
margin-top:30px
}
h2 {
background-color:#bcc0d6;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
width:82%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}
#name {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid lightslategray;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:skyblue;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}
span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:skyblue;
color:#fff;
font-family: 'Zilla Slab', serif;
font-size:18px;
cursor:pointer
}

Once you will paste these files into your project then run the html file and you will see the output as shown in the below image.

formpopup1

formpopup2


In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!