treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Responsive Contact Form

  • I'm looking to reproduce something like the responsive contact form on this site with the trigger to open and close the form being the ribbon below, and was hoping someone could give me some tips on how it is done with jquery. I'm not really sure where to begin in terms of positioning the open/close button, and getting the form to work.

    Would I be right in saying this is an accordion with form elements inside?
  • That can be done using jQuery's slideToggle function. Demo

    HTML
    <h2>Contact Me (click here)</h2>
    <div id="contact">
    <br>
    <label>Name</label> <input type="text">
    <br><br>
    <label>Email</lable> <input type="email">

    </div>​
    Script
    $('#contact').hide();

    $('h2').click(function(){
    $('#contact').slideToggle('slow');
    });​
  • Great. Many thanks, Mottie.