A better contact form thanks to jQuery slideUp

Posted in Web Design on Sunday, 22nd November 2009 at 11:40AM

It was an article in smashing magazine entitled  45 Incredibly Useful Web Design Checklists and Questionnaires that started me thinking about this.  Whilst I think it is a great idea to keep website contact forms as simple as possible for users, I also wanted to offer the ability for potential clients to provide more in-depth information about themselves and the projects they represent.

I had noticed an effect on other websites where contact forms or additional information slide out from discreet tabs to reveal hidden content and whilst I am generally not a big fan of hiding content that the majority of users will want to see, I decided that this might be an occasion where it’s use was warranted.

For the most part the contact form remains pretty basic but users are given the option of clicking a ‘Reveal extended form’ link to reveal a short questionnaire that should not only help me to get a better idea of what they require but also help them to consider their needs more thoroughly from the outset.  The added benefit I have found from having this type of contact form is that it is easy to identify the people who are really serious about the possibility of working with me as they are the ones who take a bit of extra time to fill in the answers.

The code is really simple and basically just uses jQuery slideUp and slideDown to slide the div holding the contact form in and out of view whilst using hide and show to make sure that the correct link is showing.

$(document).ready(function() {

//make the extended form link visible and clickable
$("#extend_form_link").show(); $("#extend_form_link").click(function() {

//when extended form link is clicked, hide 'Reveal extended form' link & show the 'Hide extended form' link
$("#extend_form_link").hide(); $("#retract_form_link").show();

//use the slidedown effect to reveal the div with id 'extended form'
if ($("#extended_form").is(":hidden")) {
$("#extended_form").slideDown("slow"); }
}

//use the slideup effect to hide extended form
); $("#retract_form_link").click(function() {
$("#retract_form_link").hide(); $("#extend_form_link").show(); $("#extended_form").slideUp("slow"); }
); }
);