How To Create Pop-up Contact Form Using JavaScript

Posted by

: Saturday 23 August 2014

Pop up contact forms are the smart way to present contact forms on your site. Similar to sliding contact forms, these contact form will be available on every page of your site. That means, your prospects can fill out your form from every page.

Here, popup button is just under visitor’s eye. When the user click on the popup button, form will pop up and appear on the screen.

LIVE DEMO

It will be easy for your prospects to access your contact form. In a way they can easily contact you from any page of your website. So, here are JavaScript codes to make Pop-up contact form :

HTML File – popupform.html

Includes HTML tags to design form.
Div id= “popupContact” includes all form elements.
It calls check(event) function that verifies target element for required parent node.


<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link href="css/elements.css" rel="stylesheet">
<script src="js/my_js.js"></script>
</head>
<!-- Body Starts Here -->
<body id="body" onclick="check(event)" style="overflow:hidden;">
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png">
<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>
<p><span>Note :</span> In this demo, we have stopped email sending functionality.</p>
</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<!-- Display Popup Button -->
<h1>Click Button To Popup Form Using Javascript</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body Ends Here -->
</html>

JavaScript File – my_js.js

Contains div_ show() function to display the contact form.
function check(), that checks the button click by user and after checking it, will display the form.
Function checkParent(). When form is displayed on the screen and user clicks on outside the form, form will hide. At this time checkParent() function works. The function checks the parent node of form, i.e popupContact. It this node exists, form will be visible on the screen. When user click outside the form, checkParent fuction will not find the form node parent (popupContact). So, form will get hide.


// Validating Empty 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...");
}
}
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function To Check Target Element
function check(e) {
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('abc');
var obj2 = document.getElementById('popup');
checkParent(target) ? obj.style.display = 'none' : null;
target == obj2 ? obj.style.display = 'block' : null;
}
//Function To Check Parent Node And Return Result Accordingly
function checkParent(t) {
while (t.parentNode) {
if (t == document.getElementById('abc')) {
return false
} else if (t == document.getElementById('close')) {
return true
}
t = t.parentNode
}
return true
}

CSS File – elements.css

Design form button and form.
Sets popup form to appear at exact center of screen.


@import "http://fonts.googleapis.com/css?family=Raleway";
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
#abc {
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:'Raleway',sans-serif
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff
}
p {
margin-top:30px
}
h2 {
background-color:#FEFFED;
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 #ccc;
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:#FFBC00;
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:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}

Conclusion:

Popup contact form are event triggered form. As the user click on the form button, it will appear on the screen. So, it will be comfortable for you to put these form buttons on every-page and users can easily access it.

{ 4 Comments... read them below or Comment }

marralina9 May 2017 at 05:24
thank you so much for this informations:
https://play.google.com/store/apps/details?id=dev.tibidabo.antivirus.security
ReplyDelete
Replies
Anonymous17 June 2017 at 14:09
How can i use this in blogger? please help me
ReplyDelete
Replies
Asusphones18 August 2017 at 06:52
thanks for How To Create Pop-up Contact Form Using JavaScript hope it will work on wp
ReplyDelete
Replies
Unknown17 March 2018 at 22:47
The phone runs on the aged Android 2.2 Froyo. The screen is a bit small at 2.8 inches and has a resolution of 240×320. This phone hasn't got killer features, but at this price it does give a bang-for-the-buck. latest mobile
ReplyDelete
Replies