How To Create A Pop Up Screen In Html

How To Create Pop-up Contact Form Using JavaScript

Updated on July 1, 2020

by Neeraj Agarwal

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, the popup button is just under the visitor's eye. When the user clicks on the popup button, the form will pop up and appear on the screen using JavaScript on click event.

HTML Part :

                <button id="popup" onclick="div_show()">Popup</button>

JavaScript Part :

                //Function To Display Popup function div_show() { document.getElementById('abc').style.display = "block"; }

Below is our complete code with download and live demo option

popup-contact-form

-: See Also :-

Send an Email On Form Submission

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.

                                  <!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" 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" 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 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.
Contains div_ hide() function to hide the contact form.
Contains check_empty() function to validate the form fields.

                                  // 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 Hide Popup function div_hide(){ document.getElementById('abc').style.display = "none"; }

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 }

Pabbly Form Builder

Conclusion:

Popup contact form is event-triggered form. As the user clicks 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.

71 Replies to "How To Create Pop-up Contact Form Using JavaScript"

thanks for all the help with the form and it works while coded but one question where do the replies go to??? And how do I make the form go to a specific email once it's sent???

Reply
1. Reply
  1. How do I submit the form if I am using ASP.net?
    
    Reply
I had an issue on smaller screens. The form goes off the top of the browser and the browsers scroll bar doesn't let you scroll up to see the top of the form.

The example does this as well, was curious if that would be a simple fix?

Reply
1. Hello Will,
  We apologize for this inconvenience, Now we have fixed that bug and optimized our code.
  thanks.
  
  Reply
Hey it doesnt work on my website.I wrote the same code.
But here it is not showing it as a popup.It just displays a form on button click.
Please tell me.why it is so?

Reply
1. Hello pallavi birajdar!
  We apologize for this inconvenience, I think it's because, you may not using our CSS styles in your code.
  
  Reply
Codes work: html, js, css everything works fine, but the popup is not the top layer on my website. How can I get the popup to display over all of the other images?

Reply
1. I bump this because i cannot find out how to make it the top layer!
  
  Reply
2. just place the div () after all of your img src
  
  Reply
3. Here you can see that popup appears all over the other elements.
  
  You can share the code over here I will have a review into it.
  
  Reply
  1. Did we ever find a fix for this? I am having the same issue with the form popping up behind the other elements on the page. Thanks!!
    
    Reply
    1. You have to just add z-index value in css, if you form hide behind any other element on the page. This will get automatically fix with z index parameter.
      
      Reply
is it possible that when the pop up windows open, the text fields are filled with some values but the username can re-write those values? And then those values the user enters are saved on the Submit button?

Reply
I need to put Rating stars in the above form. How can do that ??

Reply
I need to place Rating starts in the above popup. How can I do that ?? Please share me some code.

Reply
i need code for when downlod the pdf file , first fill the enquiry form after that downlode the that file using javascript and html

Reply
1. What you can do it just change the text "PopUp" to "Click Here To Download File" and then in the form replace the text for "Send" button to "Get Code". Now place the link for your pdf file in the "Get Code" button, using
  
  <a href="path of the file">Get Code</a>
  
  Reply
Is it possible to show another pop up after submitting the first pop up form?

I want to use the first pop up as the form do determine which form will be shown as the second pop up. (after closing the first one).

Reply
1. Reply
Is it possible to make the form pop up for multiple buttons on the same page?

Reply
Thanx a lot for the help, so i have just a question, can i put the function "check(event)" in other place not in body?

Reply
This info is really help ful for beginners so thanks a lot sir..

Reply
1. Reply
i have placed this code on my website but after placing this code the pop up botton working well, the form is working well but the scrolling bar on the right of my existing webpage disappear. please help me to get back my scrolling bar.

regards

Reply
1. There might be some CSS issue , you can share your website link here ,
  
  I will have a look into it.
  
  Reply
  1. Once i'll finish uploading the website, i'll send you the link. Please help me to send to mail option with this script.
    
    Reply
Thank you for the post, everything works fine, except the js validation does not work…also the php version didn't work so I tried my own (php)form and put it inside the div, but that didn't work either…
What am I doing wrong?
Thanks!
Bye, Mary

Reply
i know that it must be some mistake i did, but it doesnt work at all. when i click the button nothing happens.where should the javascript code be placed? in the my_js.js file? or inside the script tags?

Reply
Hi – we have created a small number of eForms for the user to complete on our website and submit job requests to us. We have a mandatory field check box, which confirms the user has read our terms and conditions.

We want to create a pop box (probably with scroll bar) for the Terms & Conditions. At present, the link takes the user to a fresh window to view the T & C's. When they then return to their completed form, all the data has been cleared. We need this window to open over the document and then the user to be able to click "ok" and the continue to submit the form. The word count on our T & C's doc is approximately 1,080

Any help would be much appreciated !!

Reply
Thank you for your wonderful help. You do not know how much time i could have save if i had visit this page in my first search attempt. Thank you again.

Reply
1. Hello Mardon,
  
  That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
  
  Regards,
  FormGet Team
  
  Reply
How would you change the background color of the "popup" button? I tried altering the css for a

button { background-color: black; color: black; background: black} and none of those work! Is the orange a default color? Where is it specified? Thanks.

Reply
1. nevermind I see it at the bottom now. For some reason before when I searched the keywords it didn't show up.
  
  Reply
Hi ! how to make two form in the same popup? means have two tab one for log in form and another one for register form.

Reply
i click submit and no data is submited to my php page??

Reply
Hi there to all, because I am genuinely keen of reading this blog's
post to be updated daily. It includes good
material.

Reply
This is a really helpful article and content . TnX Buddy!!!

Reply
Dear sir ,
i have already create contact form, but i want to set contact form popup in my home page or all page on site please help me.

Gagan sharma
Thanks & Regards

Reply
Hi how would I go about making this load pageload instead of onclick, say after few seconds?

Reply
1. Hello Sean,
  
  Use this piece of code in your js file :
  
  //function to call div_show() function after 10 secs of page load
  setTimeout(function() { div_show(); }, 10000);
  
  Hope that will work for you.
  
  Thanks & Regards,
  Swapnil Gupta,
  FormGet.com
  
  Reply
your tutorial very good. it is very good for me. Thanks a lot!
Please message me, if you have example nice. Thank again.

Reply
i don't know where to include the java script file

Reply
1. Hi Mitchell,
  
  You an either include the contents of the JavaScript file inside the html (though it is not recommended)
  
  or create a js folder and save the contents of the JavaScript file inside it and then use this path to call
  
  the JavaScript file inside the html ()
  
  PA
  
  Reply
Hello,

I have created the pop up form, thank you very much! However, as per designer dee's message below I am confused as to how to get the form to actually send an email! I went to your https://www.formget.com/send-an-email-on-form-submission-using-php/ page, but am confused as to whether this relates to the coding I have used from this page???? I also read the reviews about SMTP being better to use re. emails?? I am totally confused!!! Please can you explain, thanks in advance!! Plus, your pop up contact form great 🙂

Reply
Thank for this, i was searching for so many pop up's, this is the only thing helped me.
i am calling this function automatically once the site is full loaded.

document.onreadystatechange = function(){

if (document.readyState === 'complete')
{
div_show();
}
};

Reply
hi thanks for this but i have a question how will I add recipient e-mail to this form?

Reply
Іf an email address was provided for the reϲipient, he/she
will receive an email notification for the money transfer.

Reply
testing form please ignore.

Reply
Thanks for this fantastic form code. But how can i add more input field. I want to add another input field (Phone Number) but is not displaying on the form. How can i add and remove input field on this form. Thank you.

Reply
1. if you need a number then copy the html & css for the name field and paste it but this time change the text Name in d html to phone number and add REGEX to make sure d user inputs only numbers
  eg:
  var number=document.getElementById("number")
  var regex=/^[0-9]{3,11}/$
  if(!number.match(regex))
  {alert("number please")}
  
  Reply
Hi everyone

I used the example to do my on popup, changing a little things, more exactly on the form, but the js code, to show the popup didn't work, but i realize exactly like in the example.

Can anyone help me? If is possible i can send the files to check.

Thanks, and sorry for my english, im from Colombia! 🙂

Reply
How do I submit the form if I am using ASP.net?

Reply
thanks for all the help….its working great!!!

Reply
Thanks, works very good. I have two questions for you though.
1) How to make the popup come up in the same tab, in my case it generates a new tab. I'm firing the script without any button submit.
2) The most important. I want to display the labels and inputs in table style. How to accomplish that ?
Regards
Finn Andersson

Reply
Excellent form.
I was wondering is there is any code I can add that will show an alert to visitors if their browser (i.e Chrome), blocked the popup. Chrome doesn't seem to want anyone to know that it is blocking popups. Thanks.

Reply
i have to say thanks for given me such a wonderful idea about create dynamic popup box page design!!!

Reply
Hi,

I think download code button is not doing the right function, you view instead of downloading sources code and view demo simply downloads- nice code by the way.

Reply
Thanks for the code!!

Reply
How can we work with wordpress custom page ? Is there any documents for wordpress ? thanks. It looks very good.

Reply
thanks for the code….

Reply
Thanks. But the dialog form is loading with the page by default, so how do i make it to only show when i click a button and how do i hide the button itself and to only make the button show on mouse over. Thank you so much.

Reply
All you need to do is simple in your div_show() just add this JS code:
document.getElementById("the div ID of your second popup form").style.display=block

Reply
how to make popup form on click

Reply
i got the pop up but i want to store the field value in database when user click on send and want to display the user name and message on the same button page how could i do it?
please can you help?

Reply
Hey thanks mate, I was finding this code in easy format … Thank you for providing this code …. This code will be really helpful for my project …. 🙂

Reply
hello

Reply
1. how can we add recaptcha in our form
  
  Reply
thanks for the code…. it's easy to use

Reply
What you said was very reasonable. However, what about this?
suppose you were to write a awesome post title? I ain't saying your information is
not good, however what if you added a title that makes people want more?
I mean How To Create Pop-up Contact Form Using JavaScript | FormGet is kinda vanilla.
You might peek at Yahoo's front page and watch how they write article headlines
to get people to open the links. You might try adding a video or a picture or two to get people
excited about everything've written. Just my opinion, it could make your posts a little livelier.

Reply
how can we add recaptcha in our form

Reply