Pop up forms are the smart way to present your site. These forms are similar to other forms except, these forms appears abruptly on exact center of screen and requests user to take immediate action over them.
Here, In this example, we explained how to create popup form like Login and Contact form to fulfill below requirements:
- Login Popup form should appears at the center of screen after specific time interval by jQuery on load event .
- Contact form may appear on click event of a button or any link.
Here, we have covered above requirements in this example as given below:
- To popup login form after specific time interval on page load, we used following jQuery code.
setTimeout(popup, 3000); // Setting time 3s to popup login form
function popup() {
$("#logindiv").css("display", "block");
}
- To popup login form on click event of a button, we used following jQuery code.
$("#onclick").click(function() {
$("#contactdiv").css("display", "block");
});
Just watch our live demo or download zip file to use it.
To learn more about it, go through our complete jQuery and HTML codes given below.
HTML File – jquery_popup.html
Given below our complete HTML code to create Login and Contact form.
<html>
<head>
<title>jQuery Popup Login and Contact Form</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery_popup.css" />
<script src="js/jquery_popup.js"></script>
</head>
<body>
<div id="mainform">
<h2>jQuery Popup Form Example</h2>
<!-- Required div starts here -->
<div class="form" id="popup">
<b>1.Onload Popup Login Form</b><br/><hr/>
<span>Wait for 3 second.Login Popup form Will appears.</span><br/><br/><br/>
<b>2.Onclick Popup Contact Form</b><hr/>
<p id="onclick">Popup</p>
<br/>
</div>
<!-- Right side div -->
<div id="formget"><a href=https://www.formget.com/app><img src="images/formget.jpg" alt="Online Form Builder"/></a>
</div>
</div>
<!--Contact Form -->
<div id="contactdiv">
<form class="form" action="#" id="contact">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h3>Contact Form</h3>
<hr/><br/>
<label>Name: <span>*</span></label>
<br/>
<input type="text" id="name" placeholder="Name"/><br/>
<br/>
<label>Email: <span>*</span></label>
<br/>
<input type="text" id="email" placeholder="Email"/><br/>
<br/>
<label>Contact No: <span>*</span></label>
<br/>
<input type="text" id="contactno" placeholder="10 digit Mobile no."/><br/>
<br/>
<label>Message:</label>
<br/>
<textarea id="message" placeholder="Message......."></textarea><br/>
<br/>
<input type="button" id="send" value="Send"/>
<input type="button" id="cancel" value="Cancel"/>
<br/>
</form>
</div>
<!--Login Form -->
<div id="logindiv">
<form class="form" action="#" id="login">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h3>Login Form</h3>
<hr/><br/>
<label>Username : </label>
<br/>
<input type="text" id="username" placeholder="Ex -john123"/><br/>
<br/>
<label>password : </label>
<br/>
<input type="text" id="password" placeholder="************"/><br/>
<br/>
<input type="button" id="loginbtn" value="Login"/>
<input type="button" id="cancel" value="Cancel"/>
<br/>
</form>
</div>
</body>
</html>
JavaScript File – jquery_popup.js
- Wait for 3 seconds and jQuery on load event of page allows Login form to popup on exact center of screen.
- To popup Conact Formuser have to click on “Popup” button.
$(document).ready(function() {
setTimeout(popup, 3000);
function popup() {
$("#logindiv").css("display", "block");
}
$("#login #cancel").click(function() {
$(this).parent().parent().hide();
});
$("#onclick").click(function() {
$("#contactdiv").css("display", "block");
});
$("#contact #cancel").click(function() {
$(this).parent().parent().hide();
});
// Contact form popup send-button click event.
$("#send").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contactno").val();
var message = $("#message").val();
if (name == "" || email == "" || contactno == "" || message == ""){
alert("Please Fill All Fields");
}else{
if (validateEmail(email)) {
$("#contactdiv").css("display", "none");
}else {
alert('Invalid Email Address');
}
function validateEmail(email) {
var filter = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
if (filter.test(email)) {
return true;
}else {
return false;
}
}
}
});
// Login form popup login-button click event.
$("#loginbtn").click(function() {
var name = $("#username").val();
var password = $("#password").val();
if (username == "" || password == ""){
alert("Username or Password was Wrong");
}else{
$("#logindiv").css("display", "none");
}
});
});
CSS File – jquery_popup.css
- Design login and contact forms.
- Sets popup form to appear at exact center of screen.
@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
display:block;
}
h2{
margin-left: 65px;
text-shadow:1px 0px 3px gray;
}
h3{
font-size:18px;
text-align:center;
text-shadow:1px 0px 3px gray;
}
#onclick{
padding:3px;
color:green;
cursor:pointer;
padding:5px 5px 5px 15px;
width:70px;
color:white;
background-color:#123456;
box-shadow:1px 1px 5px grey;
border-radius:3px;
}
b{
font-size:18px;
text-shadow:1px 0px 3px gray;
}
#popup{
padding-top:80px;
}
.form{
border-radius:2px;
padding:20px 30px;
box-shadow:0 0 15px;
font-size:14px;
font-weight:bold;
width:350px;
margin:20px 250px 0 35px;
float:left;
}
input{
width:100%;
height:35px;
margin-top:5px;
border:1px solid #999;
border-radius:3px;
padding:5px;
}
input[type=button]{
background-color:#123456;
border:1px solid white;
font-family: 'Fauna One', serif;
font-Weight:bold;
font-size:18px;
color:white;
width:49%;
}
textarea{
width:100%;
height:80px;
margin-top:5px;
border-radius:3px;
padding:5px;
resize:none;
}
#contactdiv{
opacity:0.92;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
#logindiv{
opacity:0.92;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
#login,#contact{
width:350px;
margin:0px;
background-color:white;
font-family: 'Fauna One', serif;
position: relative;
border: 5px solid rgb(90, 158, 181);
}
.img{
float: right;
margin-top: -35px;
margin-right: -37px;
}
#contact{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-255px;
}
#login{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-158px;
}
Conclusion:
Popup forms are event triggered forms. here, we used jQuery’s onload and click events to popup login and contact forms respectively, it will appear on the screen. Keep following our other blogs.
28 Replies to “jQuery Popup Login and Contact Form”
hi,
Thanks for the post its very helpful and its working, but i have created a PHP file called contact.php and calling in jquery_popup.html & its not working. if u send me the solution it will be very helpful for me. please send the solution on my mail id.
thanks
You can post your code here so that I can let you know about the solution.
Or you can have a look into our php related posts in which you will find the exact method.
https://www.formget.com/category/php/
Thankyou so much your code help me alot
That sounds really awesome…!
Keep reading our other blog posts and explore your knowledge.
Regards,
FormGet Team.
Join Us On
Facebook : https://www.facebook.com/FormGet
Twitter : https://twitter.com/FormGetcom
Google Plus : https://plus.google.com/+Formget
I have the same problem but the difference is that my form is inside of the php file
and it is connected to the database in the php file.
this will work for html website too
Nice one….thnks for the help
hi,
Thanks for the post its very helpful and its working,
thanks
Thank you bro!
awesome!
Thank you so much..
Hi,
Thankyou for your post.
Please help me to mask the background without decreasing the opacity of the popup boxes.
for some reason it’s not working for me…. it wont popup at all
The only possible reason might be that on your website. The popup might be conflicting with any other JS. The best solution is to turn off all the other JS and see if the issue resolves automatically. If it does resolves, turn the JS on one by one and see which JS is conflicting. To turn off other JS simply comment them. Let me know, if it resolves the issue.
Thanks
Neeraj
$(document).ready(function(){
$(“#myPopup”).hide();
function popup() {
$(“#myPopup”).css(“display”, “block”);
}
});
Welcome To My Homepage
Show Popup
Welcome!
The “ui-content” class is especially useful when you have a popup with styled text, and want the edges and corners to look extra clean and sleek. Note: The text will wrap to multiple lines if needed.
Footer Text
// why this is not poped-up…plese help
Hi
My form is appearing just below my slider. I think it is not calling the css file.
Danish
hii
i am having page which contains 100 nos of post and each time when i click on post popup form is displaying with its details .my issue is each time popup form is displaying at center of page not next to element which i am clicking… so it become hetic to scroll everytime up at top of page .what is the solution ???
Thanks for the code it really helped me alot
thank u so much n my dout is clear
it’s amazing and great buddy.. May god bless you more and more
What’s with your non-indented code. It makes it hard as crap to read.
hi, i copy the same code given by you but not able to create a clickable button can u help me on that
Hello Shaun,
Thank you so much for reading the post.
Might be, in your system internet is not working. Now, we have updated our codes and it’s reference.
So now you can use the script without internet.
Let me know if any doubt persists.
Regards,
FormGet Team.
Still pop not working
I will like to hide the form so that even when the user views the source, cannot see the form codes except the user clicks for the pop up. Please hw can I do that?
thank you so much, it’s a pretty good code
this is very useful and easy …..
thanks’
When I activate the contact form the overlay only darkens the container that the button sits in. How do I get the overlay to fill the screen and ignore the container div?
HI,
I have included the following ‘Leave us a Message’ pop up in my website at agileconsulting.my
However, I intend to move the popup below (say by 100 pixels) as it is blocking the text. the codes are as follows;
Kindly assist;
(function(s) {var head = document.getElementsByTagName(‘HEAD’).item(0);var s= document.createElement(‘script’);s.type = ‘text/javascript’;s.src=’//www.formget.com/app/app_data/new-widget/popup.js’;head.appendChild(s); var options = {‘tabKey’: ‘QfwU-184173/t’,’tabtext’:’Leave a Message’,’height’: ‘420’,’width’: ‘350’,’tabPosition’:’left’,’textColor’: ‘fffcfc’,’tabBackground’: ‘DBC164′,’fontSize’: ’16’,’tabbed’:”};s.onload = s.onreadystatechange = function() {var rs = this.readyState;if (rs)if (rs != ‘complete’)if (rs != ‘loaded’)return;try {sideBar = new buildTabbed();sideBar.initializeOption(options);sideBar.loadContent();sideBar.buildHtml();} catch (e) {} };var scr = document.getElementsByTagName(s)[0];})(document, ‘script’);