RENOTES

Данный пример будет полезен для последовательного заполнения данных пользователем без перезагрузки страницы. Удобно применять при пошаговом тестировании, либо при заполнении большого количества полей, разделив на несколько частей, дабы не спугнуть пользователя.

Реализация представлена в упрощенном виде.

В стилях:

.hide { display: none; }
.page { width: 300px; border: 1px solid; }

HTML:

<!-- Блок с формой 1 -->
<div id="page1" class="page">
    <form id="form1">
<label>Укажите email:</label><br>
<input type="text" placeholder="Email">
<a id="next" href="#">Далее</a>
    </form>
</div>
<!-- Блок с формой 2 -->
<div id="page2" class="page hide">
    <form id="form2">
<label>Укажите имя:</label><br>
<input type="text" placeholder="Имя">
<a href="#">Отправить</a>
    </form>
</div>

Подключаем jquery.min. Далее, собственно, обработчик события. При нажатии на #next, спрятать #page1 и показать #page2. Число в скобках (1000) - скорость смены блоков.

<script>
    $(function() {
            jQuery('#next').click(function() {
                    jQuery('#page1').slideUp(1000);
                    jQuery('#page2').slideDown(1000);
            });
    });
</script>

Исходники тут.