signup form

In this example below you will see how to do a signup form with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JusticeVengeance, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JusticeVengeance ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>signup form</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form class="sml_subscribe" method="post"><p id="alert"></p><input class="sml_hiddenfield" name="sml_subscribe" value="1" type="hidden"><p class="sml_name"><label class="sml_namelabel" for="sml_name"></label><input class="name" placeholder="Name" name="sml_name" value="" type="text"></p><p class="sml_email"><label class="sml_emaillabel" for="sml_email"></label><input class="email" name="sml_email" placeholder="Email" value="" type="text"></p><p class="sml_submit"><input name="submit" class="join btn sml_submitbtn" value="Join" type="submit"></p></form>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/JusticeVengeance/signup-form-jEZqbK */
body {
  padding: 0;
  position: relative;
  text-align: center;
  margin: 160px 0 0 0;
  z-index: -1;
  background: url(https://subtlepatterns.com/patterns/debut_light.png);
}
header {
  background: rgb(44,48,52);
  margin: 0 auto;
  padding: 0;
  position: fixed;
  text-align: center;
  top: 0;
  height: 60px;
  width: 100%;
  z-index: 1;
}
.logo {
  width: 200px;
  margin: 0;
  padding: 0 4% 0 0;
  position: relative;
}
h1 {
  font-family: bebas neue;
  font-size: 50px;
  text-align: center;
  color: rgb(44,48,52);
  margin: 30px 0 0 0;
  padding: 0;
}
h2 {
  font-family: lato;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  color: rgb(44,48,52);
  margin: 0 0 40px 0;
  padding: 0;
}
h3 {
  font-family: lato;
  font-weight: normal;
  font-size: 14px;
  margin: 40px 0 40px 0;
  color: rgba(44,48,52,.5);
}
h4 {
  font-family: lato;
  text-transform: uppercase;
  font-size: 30px;
}
p {
  width: 60%;
  margin: 5px 0 0 0;
  padding: 0;
  font-family: lato;
  font-size: 15px;
}
.leftpara {
  text-align: left;
  float: left;
}
.rightpara {
  text-align: right;
  float: right;
}
.lefttitle {
  float: left;
  margin: 60px 0 0 0;
  padding: 0;
}
.righttitle {
  float: right;
  margin: 60px 0 0 0;
  padding: 0;
}
.name,
.email {
  padding: 10px;
  position: relative;
  font-family: lato;
  font-size: 16px;
  box-shadow: none;
  border: 3px solid rgb(44,48,52);
  border-radius: 13px;
  width: 30%;
  outline: none;
}
input {

  background-color : white; 

}
.name {
  margin: 0px 0 20px 0;
}
.email {
  margin: 0px 0 30px 0;
}
input:active,
input:focus {
  border: 3px solid rgb(245,37,62);
  box-shadow: none;
}
.join {
  color: white;
  background: rgb(245,37,62);
  border: 3px solid rgb(245,37,62);
  font-family: bebas neue;
  font-size: 30px;
  text-decoration: none;
  border-radius: 13px;
  outline: none;
  padding: 10px 30px 5px 30px;
  margin: 0;
}
.join:hover {
  border: 3px solid rgb(44,48,52);
}
.join:active {
  color: rgb(44,48,52);
}
.overview {
  border-top: 1px solid rgba(44,48,52,.2);
  width: 80%;
  margin: 0 auto;
}
.sectionwrapper {
  width: 80%;
  margin: 0px auto;
  padding: 0 0 230px 0;
}
.lefticon {
  float: left;
  margin-right: 30px;
  width: 30%;
}
.righticon {
  float: right;
  margin-left: 30px;
  width: 30%;
}
.disptitle {
  color: rgb(245,37,62);
}
.dealtitle {
  color: rgb(242,205,28);
}
.strntitle {
  color: rgb(54,199,70);
}
.newstitle {
  color: rgb(44,48,52);
}
footer {
  width: 100%;
  margin-top: 100px;
  padding: 15px;
  color: white;
  font-size: 16px;
  font-family: lato;
  font-weight: normal;
  text-align: center;
  background: rgb(44,48,52);
}
span {
  font-size: 13px;
  color: rgba(255,255,255,.3);
}
#alert {
  height: 1em;
  font-size: .9em;
  color: red;
}

/*Downloaded from https://www.codeseek.co/JusticeVengeance/signup-form-jEZqbK */
$(document).ready (function() {
  $(".join").prop('disabled', true);

  var toValidate = jQuery('.email'),
      valid = false;
  toValidate.focusout(function () {
      if (jQuery(this).val().length > 0) {
          jQuery(this).data('valid', true);
      } else {
          jQuery(this).data('valid', false);
      }
      toValidate.each(function () {
          if (jQuery(this).data('valid') == true) {
              valid = true;
          } else {
              valid = false;
          }
      });
      if (valid === true) {
          jQuery(".join").prop('disabled', false),
                jQuery("#alert").text(""),
          jQuery(".join").attr('value', 'Thanks!');
      } else {
        jQuery(".join").prop('disabled', true),
              jQuery("#alert").text("Please enter a valid input for all fields");
      }
    $('.join').click ( function() {
      jQuery(".join").css('value', 'Thanks!');
    });
  });
});

Comments