Как создать фантастическое продвинутое 2-ступенчатое окно ввода электронной почты для входа

Question

Я начинающий веб-разработчик и пытаюсь выяснить, как создать форму регистрации электронной почты, которая позволяет пользователю отправлять электронную почту, затем в том же поле ввода регистра, не меняя страница позволяет пользователю вводить необязательную информацию; их имя и фамилию, затем после того, как они представили сообщение с благодарностью. Пример будет похож на форму регистрации электронной почты на этой странице www.cartercenter.org. Я никогда не видел ничего подобного и не могу найти в Интернете никакой информации об этом. Я предполагаю, что некоторые javascript и jquery играют здесь.

Answer 1

Вот краткий пример, с помощью JQuery

$('button').click(function() { 
 
    if ($('input[type=email]').val().length > 0) { 
 
    $('input[type=email]').addClass('hidden'); 
 
    $('input[type=text]').removeClass('hidden'); 
 
    } 
 
    if ($('input[type=text]').val().length > 0) { 
 
    $('input[type=text]').addClass('hidden'); 
 
    $('#finish').css({'display':'block'}); 
 
    $('button').addClass('hidden'); 
 
    } 
 
})

.hidden,#finish { 
 
    display: none; 
 
    } 
 
form { 
 
    border: 3px solid gray; 
 
    display: inline-block; 
 
    min-width: 10em; 
 
    padding: 1em; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="post"> 
 
    <input type="email" name="email" placeholder="Email"> 
 
    <input type="text" class="hidden" name="firstname" placeholder="First name"> 
 
    <input type="text" class="hidden" name="lastname" placeholder="Last name"> 
 
    <p id="finish">Now you get involved</p> 
 
    <button>></button> 
 
</form>