-3

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.

NetAdmin1
  • 23
  • 5
  • You have no code attempts ? You should try searching around some more and post with a specific problem. This is a pretty broad question for StackOverflow :{ – Fluidity Nov 30 '16 at 03:02
  • 1
    I appreciate your response but I was not sure of how to do this, I am able to write a simple form but have little to no experience with jquery. For me, the best way was not to show some basic attempt that looked nothing like I wanted but to show an example from a site that was able to do it. But thanks for your comment. – NetAdmin1 Nov 30 '16 at 13:11
  • I'm glad you got an answer, but as you can tell from your rating, this type of question is better suited for the Stack Overflow chat. Even if it doesn't make sense, the review team looks for "effort" from new users, so posting any code attempts is better than none. Given the high-volume of users that genuinely do no work or bother searching, it's an injustice to the dedicated new users--but it's the system we have now :[ ... And if you really can't find a starting off point codewise, you can try listing the relevant searches that weren't useful. (I was part of the review for your question) – Fluidity Nov 30 '16 at 13:24
  • I'm sorry your first post had so many downvotes, it doesn't reflect the communities disdain, it's just that we are self-moderated so there is sort of a checklist for new users / first posts. I'm glad you found your answer and hope that you will not be discouraged :) – Fluidity Nov 30 '16 at 13:25
  • 1
    I'll make sure to keep that in mind, thanks for the explanation. – NetAdmin1 Nov 30 '16 at 14:10

1 Answers1

1

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>
junkfoodjunkie
  • 3,168
  • 1
  • 19
  • 33
  • Wow, thank you! Our company hired a developer and one of the tasks was to add this type of function to our wordpress page. Needless to say he nor I (but I am a beginner) were able to do it. – NetAdmin1 Nov 30 '16 at 13:06
  • Note that the example is very basic, and you would still need to style it and create a function for the actual submission for the form (using ajax). – junkfoodjunkie Nov 30 '16 at 13:13