[Plugin: Contact Form 7] JQUERY DROPDOWN

this plug-in is fantastic for any beginner/intermediate and beginning to dip my toes in some advanced Jquery and CSS3 explorations. What I like to do is have a contact form drop-down/slide down from the header. The contact form would always be there just hidden from visibility.

I have the basic CSS and script written for a HTML file but I’m not sure what steps to take to make it function with the contact form 7. For example here is my current markup:

<script>

(function() {

$('html').addClass('js');

var contactForm = {

	container: $('#contact'),

	config: {
		effect: 'slideToggle',
		speed: 500
	},

	init: function(config) {
		$.extend(this.config, config);

		$('<button></button>', {
			text: 'Contact Me'
		})
			.insertAfter( 'article:first' )
			.on( 'click', this.show );
	},

	show: function() {
		var cf = contactForm,
			container = cf.container,
			config = cf.config;

		if ( container.is(':hidden') ) {
			contactForm.close.call(container);
			container[config.effect](config.speed);
		}
	},

	close: function() {
		var $this = $(this), // #contact
			config = contactForm.config;

		if ( $this.find('span.close').length ) return;

		$('<span class=close>X</span>')
			.prependTo(this)
			.on('click', function() {
				// this = span
				$this[config.effect](config.speed);
			})
	}
};

contactForm.init({
	// effect: 'fadeToggle',
	speed: 300
});

})();

</script>

<style>

	body {
		width: 600px;
		margin: auto;
		font-family: sans-serif;
	}

	#contact {
		background: #e3e3e3;
		padding: 1em 2em;
		position: relative;
		background:	#fafafa url(images/field_bkg.png) repeat-x;
	}

	.js #contact {
		position: absolute;
		top: 0;
		width: inherit;
		display: none;
	}	

	#contact h2 { margin-top: 0; }

	#contact ul { padding: 0; }

	#contact li {
		list-style: none;
		margin-bottom: 1em;
	}

	/* Close button on form */
	.close {
		position: absolute;
		right: 10px;
		top: 10px;
		font-weight: bold;
		font-family: sans-serif;
		cursor: pointer;
	}	

	/* Form inputs */
	input, textarea { width: 100%; line-height: 2em;}
	input[type=submit] { width: auto;  }
	label { display: block; text-align: left; }

	</style>

Any help or ways to integrate the script into the form is welcomed. Thank you in advance for anyone’s time.

http://wordpress.org/extend/plugins/contact-form-7/