Creating a Form With Floating Labels

form#wpforms-form-1682 {

    position: relative;

}

form#wpforms-form-1682 .floating label:nth-of-type(2) {

    display: none;

}

.floating input {

    position: relative;

    min-height: 65px;

      padding: 15px 10px 10px 15px !important;

}

.floating textarea {

    position: relative;

    min-height: 200px;

    padding: 35px 15px 15px 15px !important;

}

.floating input + label {

    position: relative !important;

    top: -50px !important;

    padding: 15px 0 0 15px !important;

    opacity: .5;

    font-size: 12px !important;

    transition: all .5s ease-in-out 0s;

}

.floating textarea + label {

    position: relative !important;

    top: -200px !important;

    padding: 35px 15px 15px 15px !important;

    opacity: .5;

    font-size: 12px !important;

    transition: all .5s ease-in-out 0s;

}

.floating input:focus + label, .floating input:not(:placeholder-shown) + label {

    top: -70px !important;

    opacity: 1;

}

.floating textarea:focus + label, .floating textarea:not(:placeholder-shown) + label {

    top: -220px !important;

    opacity: 1;

}

.floating.wpforms-has-error em.wpforms-error {

    position: relative;

    top: -50px;

    left: 10px;

}

.wpforms-field-textarea.floating.wpforms-has-error em.wpforms-error {

    position: relative;

    top: -190px;

    left: 10px;

}

.floating.wpforms-has-error label {

    display: none;

}

.floating ::-webkit-input-placeholder { /* Chrome and Safari */

   color: transparent !important;

}

.floating :-moz-placeholder { /* Mozilla Firefox 4 to 18 */

   color: transparent !important;

}

.floating ::-moz-placeholder { /* Mozilla Firefox 19+ */

   color: transparent !important;

}

.floating :-ms-input-placeholder { /* Internet Explorer 10-11 */

   color: transparent !important;

}

.floating ::-ms-input-placeholder { /* Microsoft Edge */

   color: transparent !important;

}