How To Create Pop-up Contact Form Using JavaScript

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 clicks on the popup button, the form will pop up and appear on the screen using JavaScript onClick 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”; }
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>
<title>Popup contact form</title>
<link href=css/elements.css rel=stylesheet>
<script src=js/my_js.js></script>
<!– 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>
<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>
<!– Popup Div Ends Here –>
<!– Display Popup Button –>
<h1>Click Button To Popup Form Using Javascript</h1>
<button id=popup onclick=div_show()>Popup</button>
<!– Body Ends Here –>

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
    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 “”;
    /*———————————————- 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 }


    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.


Please enter your comment!
Please enter your name here