CodePen

HTML

            
              <div class="esu-form-div  esu-from-shortcode"><form id="esun1BZIiVMQgrjLQiUW6WG" name="esun1BZIiVMQgrjLQiUW6WG">
<input type="hidden" id="esun1BZIiVMQgrjLQiUW6WG_lama" name="esun1BZIiVMQgrjLQiUW6WG_lama" value="302f9c8d5f"><input type="hidden" name="_wp_http_referer" value="/new/custom-css/">
<input type="hidden" name="esu_formID" value="esun1BZIiVMQgrjLQiUW6WG">
<input type="hidden" name="esu_label" value="Easy Sign Up">
<input type="hidden" name="esu_permalink" value="http://localhost:8888/new/custom-css/">

<ul>
<li class="esu-form-title">Easy Sign Up Form</li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_fname" class="esu-default">First Name</label><input id="esun1BZIiVMQgrjLQiUW6WG_fname" class=" esu-text esu-required-input esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_fname" type="text" placeholder="First Name"><br class="esu-default"></li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_lname" class="esu-default">Last Name</label><input id="esun1BZIiVMQgrjLQiUW6WG_lname" class=" esu-text esu-required-input esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_lname" type="text" placeholder="Last Name"><br class="esu-default"></li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_email" class="esu-default">Email</label><input id="esun1BZIiVMQgrjLQiUW6WG_email" class=" esu-text esu-required-email esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_email" type="text" placeholder="Email"><br class="esu-default"></li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_phone" class="esu-default">Phone</label><input id="esun1BZIiVMQgrjLQiUW6WG_phone" class=" esu-text esu-required-phone esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_phone" type="text" placeholder="Phone"><br class="esu-default"></li>
<li><input id="esun1BZIiVMQgrjLQiUW6WG_send" class=" esu-submit esu-button" name="esu_send_bnt" type="submit" value="Send "></li>
</ul>
</form></div>
            
          
!

CSS

            
              /* Default styles */
.esu-form-title{
  font-size:1.5rem;
}
.esu-form-div input  {
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
background-color: rgba(64, 64, 64, 0.1);
font-size:1em;
padding:4px;
color:#000000;
}

/*Easy sign up short code form div */
div.esu-form-div label.esu-left{float:left;width:120px;font-weight:700}
        div.esu-form-div input.esu-left,div.esu-form-div textarea.esu-left{width:180px}
        div.esu-form-div label.esu-top{display:block;width:120px;font-weight:700}
        div.esu-form-div input.esu-top,div.esu-form-div textarea.esu-top{width:180px}

/*
Styles from the Easy Sign Up Styles Extra Plugin 
ID's have underscores "_"
Classes have dashes "-"
*/
/* New with version 3 */
/*Easy sign up short code form div */
div.esu-form-div{ display: table; }
div.esu-form-div ul{ list-style: none; margin:0;}
div.esu-form-div ul li { margin: auto; padding:4px;display:block;}
div.esu-form-div input[type=image]{ border: none;background: transparent;box-shadow:none; }
div.esu-form-div input[type=image],div.esu-form-div input[type=submit]{ cursor: pointer;  }
#esu_err {
  list-style: none; padding: 10px;
  line-height: normal;  z-index: 100000;  margin: 0px;
}
#esu_err ul { margin: auto; display: table; list-style: none; }
#esu_err ul li { padding-bottom: 2px; }
div.esu-form-div label.esu-default, .esu-hide{position:absolute!important;top:-9999px!important;left:-9999px!important} br.esu-left{clear:left;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('li:last').prepend('<p>*we promise never to sell your email, spam you, etc.</p>');
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................