Floating Labels

gistfile1.txt

<style>
/* based on https://codepen.io/dannibla/pen/amgRNR */
.floating-label {position:relative}
.floating-input {display:block; width:300px; background-color:transparent}
.floating-label label {font-weight:normal;position:absolute;pointer-events:none;left:9px;top:8px;font-size:smaller;  transition: all .2s ease-in-out;}
.floating-input:focus {margin-top:12px}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {top:-2px;background-color:#fff;  transition: all .2s ease-out-in;}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {top:-18px}
/****  floating-Lable style end ****/
</style>
 <form method='post'>
    <p class='uppercase'>${response}</p>
    <input type='hidden' name='response' value="${response}"/>
    <p>Would you like us to follow up with you?<br/>
    If so, please provide your contact information here, then submit.</p>

    <div class='floating-label'>
        <textarea class='floating-input' name='message' placeholder='' id='Message'></textarea>
        <label for='Message'>Message</label>
    </div>

    <div class='floating-label'>
        <input class='floating-input' type='text' name='name' id='Name' placeholder='' />
        <label for='Name'>Name</label>
    </div>


    <div class='floating-label'>
        <input class='floating-input' type='text' name='email' id='Email' placeholder=''  />
        <label for='Email'>Email Address</label>
    </div>


    <div class='floating-label'>
        <input class='floating-input' type='text' name='company' id='Company' placeholder='' />
        <label for='Company'>Company Name</label>

    </div>

    <div class='floating-label'>
        <input class='floating-input' type='text' name='phone' id='Phone' maxLength='20' placeholder='' />
        <label for='Phone'>Phone Number</label>

    </div>

    <br class='cb'/>
    <input type='submit' class='buttonlink green' value='Submit'/>
    </form>