Google-like form fields - no-expand, animated

click to expand form fields - with animation

by Danny Gibas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="container">
  <div class="row row-narrow">
    <div class="col-md-6">
      <form onSubmit="JavaScript:submitFunction()" id="contact-form" method="post">
        <div id="form">
          <div class="field-wrapper">
            <label>First name</label>
            <input tabindex="1" id="firstName" required type="text" name="first_name" class="form-control">
          </div>
          <div class="field-wrapper">
            <label>Last name</label>
            <input tabindex="2" id="lastName" required type="text" name="last_name" class="form-control">
          </div>
          <div class="field-wrapper">
            <label>Phone number</label>
            <input tabindex="3" id="phoneNumber" required type="tel" name="phone" class="form-control">
          </div>
          <div class="field-wrapper">
            <label>Email address</label>
            <input  tabindex="4" id="email" required type="email" name="email" class="form-control">
          </div>
          <div class="field-wrapper">
            <label>Zip code</label>
            <input tabindex="5" id="zip" type="text" name="zip" class="form-control" pattern="[0-9\-]{5,}">
          </div>
          <div class="field-wrapper">
            <select  tabindex="6" style="width: 100%" id="select2-drop-container" name="utility_type" class="form-control" required style="padding-bottom:15px !important">
              <option tabindex="6">Select an option...</option>
              <option value="op1">Option One</option>
              <option value="op2">Option Two</option>
              <option value="op3">Option Three</option>
            </select>
          </div>
          <div...

CSS

/* WebKit, Blink, Edge */
.form-control::-webkit-input-placeholder { color: black }  
/* Mozilla Firefox 4 to 18 */
.form-control:-moz-placeholder { color: black }  
/* Mozilla Firefox 19+ */
.form-control::-moz-placeholder { color: black }  
/* Internet Explorer 10-11 */
.form-control:-ms-input-placeholder { color: black }  
 /* Microsoft Edge */
.form-control::-ms-input-placeholder { color: black } 


*:focus{
  outline: none;
  outline-style: none
}

select.form-control.wide:not([multiple]), select.form-control:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: 95% 50%;
  background-repeat: no-repeat;
  padding: .5em 1em .5em .5em;
  padding-left:0;
  background-size:8px;
}

select.form-control:not([size]):not([multiple]) {
	height: calc(2.25rem + 15px);
	color:black;
  font-weight:400;
}

@media only screen and (max-width: 768px) {
    .form-control {
		  margin-bottom:10px;
	}
}

#form{
  margin-top:50px;
}

.field-wrapper{
  position:relative;
}

label{
  position:absolute;
  top:7px;
  margin-top:0;
  pointer-events: none;
   -webkit-transition:  all .2s ease-in-out;
  transition: all .2s ease-in-out;
  font-size:17px;
}

.form-control{
  padding-top:10px 0 0 0 !important;
  font-size:22px;
  border:none;
	border-bottom: 1px solid grey;
	background: white;
	height:auto;
	color:black;
	font-weight:400;
	border-radius: 0;
	box-shadow: none;
	margin-bottom:25px;
	padding-left:0;
}

.form-control:focus{
	border-bottom: 1px solid green;
  -webkit-box-shadow: none;
  box-shadow: none;
}


#select2-drop-container{
  font-size:17px;
}
.select2-container--default .select2-selection--single {
  border:none;
    -webkit-box-shadow: none;
  box-shadow: none;
}

.select2-container .select2-selection--single .select2-selection__rendered{
  padding:0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:black;
}

.select2-selection__rendered{
  font-size:17px;
}

.select2-container{
 ...

JavaScript

$('.form-control').focus( function(e) {
  $(this).parent().find('label').addClass('openup');
     //set all form field borders back to grey - prevents having to track the previously active field cause i'm lazy
  $('.form-control').css('borderBottom', '1px solid grey');  
    //now set the active fields border to active state   
  $(this).css('borderBottom', '1px solid rgb(111, 189, 68)');
  

	//remove this if/else block if you are not using select2.js55
  if(e.target.id === "select2-drop-container"){
    $('.select2-container').css('borderBottom', '1px solid rgb(111, 189, 68)');
  }else{
    $('.select2-container').css('borderBottom', '1px solid grey');
  }    
});

//init the select2 plugin for the select box
//Only needed if using the select2 plugin
$('#drop').select2({
  //hide the plugin search field
	minimumResultsForSearch: Infinity
});

//resize the option font to match other populated fields
//only needed if using the select2 plugin
$('select').on('change', function() {
  $(this).css('font-size', '22px')
})