3 Years
Discussion Span
Last Post by chriswelborn

It's a tutorial with step by step explanation how to create that and you can download the demo files. What don't you get?

Edited by gentlemedia


Put the form on your page with an id (let's say 'contactForm') and css set to 'display: none', so it's easily accessible with javascript but initially hidden. Make your "show form" button/link/whatever with an onclick event (there are multiple ways to do this):

<a href='#contactForm' onclick='javascript: show_form();'>
    E-mail me.

Here is one way to implement show_form(). There are lots though. If you are already using some framework, they probably have a cross-browser way of doing this (such as jQuery's $('#contactForm').toggle() and $('#contactForm').css({'display': 'block'})):

function show_form() {
    var frm = document.getElementById('contactForm');
    frm.style.display = 'block';

Your cancel button will also need to be handled, so that clicking the button hides the form.

var cancelbtn = document.getElementById('cancel');
cancelbtn.onclick = function () {
    var frm = document.getElementById('contactForm');
    frm.style.display = 'none';

Here is an ugly jsfiddle displaying the behavior. I would suggest studying up on JavaScript if you're not already in the process.

Edited by chriswelborn: more

Votes + Comments
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.