3
Contributors
2
Replies
16
Views
2 Years
Discussion Span
Last Post by chriswelborn
0

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

1

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.
</a>

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
helpful.
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.