高度な2ステップ電子メールのサインイン入力ボックスの作成方法

Question

私は初心者のWeb開発者で、ユーザーが同じサインアップ入力ボックスに電子メールを送信することができる電子メールサインフォームを作成する方法を見つけようとしています。ユーザーが必要としない情報を入力できるようにします。彼らの姓と名が表示された後、ありがとうメッセージを表示します。例はこのページの電子メールサインアップフォームのようなものですwww.cartercenter.org。私はそれのような何かを見たことがないし、それについてのWeb上の情報を見つけることができません。私はいくつかの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>