However, I have often noticed that many people (unless they genuinely needed help), either back away from submitting their comments (when they are confronted by a large textarea on the contact page), or simply move away from the site as the contact page loads.

Today, let’s spice things up a bit by using jQuery to load a lightweight inline contact form. So, instead of loading a separate contact form page when the “contact us” link is clicked, we will just have a small textarea opens up dynamically right next to the link – so that the user can type his feedback and it can be submitted rightaway using AJAX. Our main aim here is to encourage more users to provide feedback and although I don’t have actual data to prove whether an inline form will be any more helpful, I have used it in a couple of places, and it did appear to bring in more casual feedback about the site, features etc. Ok, let’s get started. Here is the demo of how it will all look in the end.

Okay, first let’s have a hypothetical page in which we want to make use of the inline contact form. The call of action, is obviously the “We would love to hear your feedback” link, which has the id “a_inline_form”. Initially, this hyperlink will simply point to the default contact form page. We will have the inline form in a DIV with id “inline_form”, which will be hidden initially.

#inline_form {
		/* keep the inline form hidden initially */
		display: none;

		position: relative;
		padding: 10px;
		width: 260px;
	}

We will now use jQuery to “hijack” this link and fire our inline contact form into action:

 // toggle visibility of inline form when link is clicked
$("#a_inline_form").click( function() {

	$("#inline_form").toggle(200);

	$("#inline_form").css( "left", $("#a_inline_form").position().left +
                                                $("#a_inline_form").width() );

	$("#inline_form").css("top", "-40px");

	// get cursor to texarea, ready to receive keystrokes!
	$("#inlinecmt").focus();

	// return false to prevent default link behaviour
	return false;
});

The above code is fairly self explanatory – I just want to describe how we are positioning the inline form. jQuery allows us to very easily retrieve the left offset position of an element (even when it’s not absolutely or relatively positioned!) using “$(elem).position().left” property.

In this example, I wanted to place the inline form right next to the comment link. To do that, we can simply set the “left” CSS property of the inline form to a value that’s the sum of the left offset of the feedback link and the width of the comment link – this will of course place the inline form right next to the feedback link. In addition, we also set the cursor focus to the inline form so that the textarea is ready to receive input right away.

We have a simple “ok” button underneath the textarea which will be used to submit the form. We will once again “hijack” the form submit event using jQuery and perform the form submission using AJAX. I have omitted the actual form submission and processing here.

$("#inline_form").submit( function() {

	// make your ajax POST call here...

	$("#a_inline_form").after('<span class="msg">Thanks for the comment!' +
                               '</span>');
	$("#inline_form").hide(200);

	setTimeout( '$(".msg").hide()', 2000);

	// return false to prevent default form submission behavior
	return false;
});

Now, once the AJAX call is successful, we need to notify that to the user and thank him for the feedback. I have chosen to do that by inserting a message right after the feedback link and hiding it (using setTimeout() ) after 2 seconds. Don’t forget to hide the inline form too. With that, our inline form is up and ready to go!

This is by no means a replacement for the traditional contact form, but it will be handy in places where one requires casual feedback from users. And as you would have already noticed, we have used JavaScript here unobtrusively – so in case the user has JavaScript disabled, the feedback link merely loads the default contact page.