如何创建花哨的高级两步电子邮件注册输入框

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>

如何创建花哨的高级两步电子邮件注册输入框

How to create fancy advanced 2 step email signup input box

jquery

html

forms

email

multi-step