Hello Friends, In this blog post(How do you call a popup in JavaScript), I am going to explain to you, how to make a contact us popup form using javascript.
What is the Contact Us popup form? / How do I create a pop-up form?|How do you call a popup in JavaScript?
A Contact Us popup form is the same form that we usually see but the difference is only in their presentation|How do you call a popup in JavaScript|
popup forms are visible on any trigger event like a button click or link click|How do you call a popup in JavaScript|
It saves space on the page as you can easily settle this button or link on your website or web page|How do you call a popup in JavaScript|
when users or customers click this link or button then they can use this Contact Us popup form.
This popup form can be manual or automatic as per your requirement. Here we are explaining the functionality where the popup form will be open at a button click.
Generally, we can have a registration, contact us, payment, and subscription popup form on our website.
Within this blog, we are going to explore how you call a popup in JavaScript. How do I create a pop-up contact form in HTML? How do I make a pop-up button click?….
How do I create a pop-up form? What is the window open in JavaScript? How to make a pop-up registration form in HTML, jQuery popup form on click, JavaScript popup form…
Popup contact form jQuery, JavaScript modal popup, Popup login form, JavaScript popup window on click, etc.
Software used to develop this functionality:
NetBeans IDE
Xampp Server
What is the procedure to make this Contact Us popup form using JavaScript? / How to make a pop-up registration form in HTML using Javascript?
This is a very simple process, you just need to follow the below step-by-step procedure.
Create a project as a contact popup though you can have a similar name.
Now create a few files as shown in the image below.
You will also need to download an image(cancel symbol 32X32 png) and keep that image in an images folder that you will create in your source file. You can see the image example in the demo form below in the right corner
Now copy and paste the code given below one by one as in the respective file.
formpopup.html:
[code 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="header pop">
<!-- Popup Div Start point -->
<div id="popup contact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/cancel.png" on click ="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 button below to see the popup form</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body End point -->
</html>
[/code]
formpopup.js:
[code 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";
}
[/code]
formpopup.css:
[code 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: railway;
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: railway
}
#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 light slate gray;
padding-left:40px;
font-size:16px;
font-family: railway;
margin-bottom:30px
}
#submit {
text-decoration: none;
width:100%;
text-align: center;
display: block;
background-color: sky-blue;
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: sky-blue;
color:#fff;
font-family: 'Zilla Slab', serif;
font-size:18px;
cursor: pointer
}
[/code]
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.
Check out this amazing PHP login form at just $9…
you can also go through a few more amazing blog links below related to javascript/jQuery:
Difference Between jQuery and Angular JS In Hindi… Java Script vs Node JS In Hindi… Google Form Captcha Setup Using PHP and Jquery… How to Upload Images with PHP and Jquery Using Form… An Auto Submit Form Using JavaScript… How to limit login attempts in JavaScript… Dynamically Add Remove Form Fields Using JavaScript… Contact Us Popup Form Using JavaScript… How to make a sliding contact form using JavaScript… Contact Form Using JQuery… Progress Bar: How to Show Progress Bar On Form Submission Using JQuery… Difference Between JQuery and JavaScript In Hindi…
Conclusion:
We have learned lots of amazing codes regarding pop-up forms(How do you call a popup in JavaScript) like How do you call a popup in JavaScript? How do I create a pop-up contact form in HTML? How do I make a pop-up button click?….
How do I create a pop-up form? What is the window open in JavaScript? How to make a pop-up registration form in HTML, jQuery popup form on click, JavaScript popup form…|How do you call a popup in JavaScript|
Popup contact form jQuery, JavaScript modal popup, Popup login form, JavaScript popup window on click, etc |How do you call a popup in JavaScript|
In case of any queries, you can write to us at a5theorys@gmail.com we will get back to you ASAP.
Hope! you would have enjoyed this post How do you call a popup in JavaScript?
Please feel free to give your important feedback in the comment section below|How do you call a popup in JavaScript|
Have a great time! Sayonara!
