jquery - ファンシーで高度な 2 ステップのメール サインアップ入力ボックスの作成方法

Question

私は初心者の Web 開発者であり、ユーザーが電子メールを送信できるようにする電子メール登録フォームを作成する方法を見つけようとしています。ページを変更せずに同じ登録入力ボックスで、ユーザーが不要な情報を入力できるようにします。彼らの名前と姓、そして彼らが提出した後に感謝のメッセージを表示します。例として、このページ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>