Yes this is possible and not very difficult. One way you can do it make a div
on the page and use css display: none
to hide the div
. Then use jQuery to show that div
when the 'Contacts' menu button is clicked.
Something like:
Html:
<body>
<p>Here is some content</p>
<div class="contact-form-container">
<form class="contact-form">
<!-- put your contact form here -->
</form>
</div>
</body>
CSS:
.contact-form-container {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.25);
z-index: 200;
}
JS (jquery):
$(document).ready(function() {
$('.contacts').click(function(e) { //or whatever the class/id of your menu button is
e.preventDefault();
$('.contact-form-container').toggle();
}
}
This will get you most of the way there. You will still have to handle the form of course.
Hope that helps.