Magical Sign-up Page with jQuery and CSS.
Wall Script
Follow Me:
Thursday, August 20, 2009

Magical Sign-up Page with jQuery and CSS.

Always simple registration page helps to increase more sign-ups. This post about magical and interesting registration page with jQuery and CSS. Use this and enrich your web project sign-up page.Take a look at live demo

Magical Sign-up Page with jQuery and CSS.

Download Script     Live Demo



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript">
$(function()
{
$(".buttons").click(function()
{
var id = $(this).attr("id");
if(id=='step1')
{
$("#step1").remove();
$("#box2").slideDown(300);
$("#step2").slideDown(300);
}
else if(id=='step2')
{
$("#step2").remove();
$("#box3").slideDown(300);
$("#step3").slideDown(300);
}
else
{
$("#main").slideUp('slow',function() {$("#main").remove();});
$("#thank").html("Thank You");
}

return false;
});
});
</script>


HTML Code
Contains Simple html code $(".buttons").click(function(){}- buttons is the class name of registration button. Using $(this).attr("id") calling registration button ID value.
<div id="main">

<form method="post" action="">

<div id="box1" >
step 1
</div>
<input type="submit" class="buttons" id="step1"
value=" Registration "/>

<div id="box2" >
step2
</div>
<input type="submit" class="buttons" id="step2"
value=" Registration "/>

<div id="box3" >
step 3
</div>
<input type="submit" class="buttons" id="step3"
value=" Registration Finished "/>

</form>
</div>

<div id="thank">
</div>


Note : Validation not applied.

More Information:
If you want to submit form values with out refreshing page take a look at following links.
Submit Form with out refreshing page with jQuery and Ajax
Comment system with jQuery, Ajax and PHP.

CSS Code
#box1
{
width:400px;
height:160px;
background-color:#80C8E5
}
#box2
{
display:none;
width:400px;
height:160px;
background-color:#dedede
}
#box3
{
display:none;
width:400px;
height:160px;
background-color:#F38BAD
}
#step2
{
display:none;
}
#step3
{
display:none;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


18 comments:

  1. I disagree that this is a simple, or even a good way for people to sign up. In general web forms should take one of two approaches:
    1. Show all the required fields in one place.
    2. If there are too many fields to do that, then break the process down into steps and make it very clear where in the process the user currently is.

    Both approaches let the user exactly how much work (s)he has left before the process completes. This "magical" form is akin to how Disney World makes people wait in line - you go into a room full of people, and you gets towards the front of the room, thinking you're almost done, then WHAM there's another room full of people. This form could have gone on forever. In a real world scenario I would have given up after the second slid out panel.

    -Chris
    http://blog.untrod.com
    http://www.oberonsocks.com

    ReplyDelete
  2. I completely agree with Chris C. I would also have given up after the second panel slid down due to the fact that the form is dishonest in its length. Every time a new panel slides down I would become more annoyed that the form isn't finished.

    It's better to simply show all of the required fields up front so that I can decide if I really want to take the time to complete it.

    ReplyDelete
  3. Not very user friendly.

    Agree with the above comments, I want to be able to register with minimal fields, not be surprised when I see TWO additional boxes that I have to fill in, with no warning (no greyed out breadcrumb or anything).

    ReplyDelete
  4. Agreed with above comments. Once I see additional fields I'll wonder, how many of these fields are left? Not good.

    ReplyDelete
  5. one more thing i would like to add :it is pain to click the button 2-3 times to complete registration.
    the improved version could be something similar to auto-scrolling down when one has completed filling previous one.
    nonetheless it is a new approach.i have seen a similar "register" unit done in adobe flex.it's just a cube on screen with each face of cube containing some information pertinent to registration.
    you can check it out here
    http://www.adobe.com/devnet/flex/tourdeflex/sample/remotesamples/AlexUhlmann/SimpleManualFlip.html#

    sreenidhi
    techtricks.co.in
    laptopshowroom.com

    ReplyDelete
  6. I can see this technique in search forms. If you do not press the button then you do a basic search, and if you press the button you receive advanced search options.

    ReplyDelete
  7. This is just plain evil, sorry.

    ReplyDelete
  8. I can see this being useful for a login/simple registration form. I may have to give it a try on those grounds. Thanks.

    ReplyDelete
  9. The button is misleading. Just when you think you are done, it asks for more information. The sliding feel is good though

    I think its a bad idea. Sorry

    ReplyDelete
  10. @Chris i am agree with your ultimate comment, this approach is complete wrong for a Registration form, should display how many to come as a Tab, or According, that will be a Idea solution, but in this form cant see the depth that is coming once press the next.

    should be an better one, if you add the Tabbing or According.

    ReplyDelete
  11. This technique could be useful, but not in a registration form. I used it in a search for at www.sabemotors.com

    ReplyDelete
  12. i TOTALLY disagree with majority of the people above. this sign up page is original and VERY unique. I love it, I think most people critize because they are jealous and angry they didn't come up with this HOT design first. This totally rocks, I mean its only 3 (VERY little) sign up pages, Those who think its long are either lazy bumbs or mentally chanlleged. Either way, I love it!!!

    ReplyDelete
  13. I like it too.
    This is a new way to come up with signup form.

    Thanks..

    ReplyDelete
  14. this is good,...
    any one can use it according to the position.because peoples like creativity this will be perfect with validation for each steps .....

    ReplyDelete
  15. As much as the concept is rather interesting, I would have to agree with the others here and say that a registration page is definitely not the place for this type. I would more expect that this 'effect' be seen in something like an online survey where there you would expect to see question after question. As a registration page it would definitely leave me a bit frustrated.

    ReplyDelete
  16. nice but it not appears correctly

    ReplyDelete
  17. this is nice! thanks a lot!

    @people above
    if you don't think it's good at least try to appreciate Tamada's hardwork and caring to share with us all, instead just b1tchin around! if you can make something better, why the hell are you here??? what ridiculous people

    ReplyDelete
  18. gooddddddddddd lession............

    ReplyDelete

Make in India