[SOLVED] How to create fancy advanced 2 step email signup input box

How to create fancy advanced 2 step email signup input box

I am a novice web developer and trying to find out how to create an email signup form that allows a user to submit an email then in the same signup input box without changing the page allow the user to enter non required information; their first and last name, then after they submit display a thank you message. An example would be like the email signup form on this page www.cartercenter.org . I have never seen anything like it and cannot find any information on the web about it. I assuming some javascript and or jquery is at play here.

Solution

Here's a quick example, using 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>