Toggle Form Display With jQuery

Ever wanted your readers to have access to your contact form on the page, but putting forms everywhere looks messy and crowded?

This jQuery allows a form to be hidden, and then displayed once the "Contact Me" button is clicked. If the user fills out the form, it works as normal (just put your standard contact form or include or form id in the #contact div). The form can be closed without using it, by clicking the X that is provided.

Script uses fadeToggle to fade the form in and out of view. If javascript is not enabled, then the form displays below the article and is not hidden (and of course, there is no "Contact Me" button displayed either). However, if javascript can be used, then the form is hidden until required, and the jQuery functionality will execute.

Using the HTML5 article tag
I have started the page with <article> tags. This is simply to give a reference point for placing the button. See this part of the script....
I could have course used any element, but article is as good as any.

So go ahead and click the button, I know you want to! Form is fully functional... if you use it then I will get your email inquiry.

Questions about this article? Just fill out the contact form and I will get back to you with an answer. Thank you!

Please note that all fields followed by an asterisk must be filled in.

Please enter the word that you see below.


This goes into the head section.

This is what I used for my #contact div on the page, below the article.


Have your say about what you just read! Leave me a comment in the box below.