I would like to know how to create a custom link on any of my website page to launch directly this modal contact form.
thanks in advance.
Click Here

Recommended Answers

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' …
Jump to Post

All 2 Replies

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?

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.

commented: helpful. +3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.