How do i make a HTML contact form popup?

Hi everyone i need this HTML to pop up when pressed on:
<li><a href="categories.html">Contact</a></li> <–When this is pressed

<div class="col-sm-offset-3 col-md-6 conformwrap">
<h3>Contact Form</h3>
<!--begin HTML Form-->
<form class="form-horizontal" role="form" method="post" action=" ">

<div class="form-group">
<label for="name" class="conc col-sm-3 control-label"><span class="required">*</span> Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last">
</div>
</div>

<div class="form-group">
<label for="email" class="conc col-sm-3 control-label"><span class="required">*</span> Email: </label>
<div class="col-sm-9">
<input type="email" class="conc form-control" id="email" name="email" placeholder="you@domain.com">
</div>
</div>

<div class="form-group">
<label for="phone" class="conc col-sm-3 control-label">Phone: </label>
<div class="col-sm-9">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
</div>

<div class="form-group">
<label for="message" class="conc col-sm-3 control-label"><span class="required">*</span> Message:</label>
<div class="col-sm-9">
<textarea class="form-control" row="4" name="message" placeholder="Tell us your story?"></textarea>
</div>
</div>

<div class="form-group">
<label for="human" class="conc col-sm-3 control-label"><span class="required">*</span> Human Test:</label>
<div class="col-sm-4">
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-3 col-sm-6 col-sm-offset-3">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
<!--end Form--></form>
<!--end col block--></div>

How can i do this? :smile:

I dont want anything fancy, i just want it to popup as it is and staying responsive as it is ? how to do this? :smile:

Well I don’t know how responsive your popup is… but here’s how to show it when clicking that link:

<style>
    #popup-form {
        display: none;
        position: absolute;
    }
</style>

<a id="popup-clickie" href="fallback-link-to-form-page">Contact</a>

<div id="popup-form">
    <!-- form HTML goes here -->
</div>

<script>
    var showPopup = function(event) {
        event.preventDefault();
        document
            .getElementById('popup-form')
            .style.display = 'block';
    };

    document
        .getElementById('popup-clickie')
        .addEventListener('click', showPopup);
</script>
1 Like

Megapop’s answer is pretty much right. However I’d advice to use position FIXED rather than ABSOLUTE ( unless you want your popup to be able to scroll off the viewport).

2 Likes

For a small confirm- or info-popup I’d agree, but since the OP has an entire form (which is supposed to be responsive and thus labels and inputs might get stacked beneath each other on mobile devices) this deemed me the most general solution w/o further media-queries, max-height, overflow-y: scroll etc…

Edit: Having a closer look, this form should easily fit within the viewport anyway… so yes, you’re probably right! :~)

1 Like

What does this mean? i have done pretty much what you guided here but with no result :confused: ?

Hey applytobecome, I used the script on a sample page and it worked fine. The fallback-link-to-form-page is just a way to reset the form page. It basically just refreshes the page to show just the contact link without the form. What is the problem you are having with making the page work?

What type of website are you using it for?

If it’s a standard website you are building from scratch, you can check 123contactform, you create the form and you get the lightbox code.

If you plan on using it on Wordpress you should try our plugin which is CaptainForm :smiley:

Certain elements of a website are just not worth going through the trouble of coding them from scratch when there’s builders out there that will do it for you, forms are one of them :stuck_out_tongue:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.