jQuery
$('form input, form textarea, form select').focusin(function(){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
});
$('form input, form textarea, form select').focusout(function(){
var input = $(this);
if( input.val().length === 0 ){
input.parent().siblings('label').removeClass('focused');
input.parent().siblings('legend').removeClass('focused');
}
});
//on ajax submission
$('#gform_ajax_frame_1, #gform_ajax_frame_2, #gform_ajax_frame_3, #gform_ajax_frame_4').on( 'load', function(){
$('form input, form textarea, form select').focusin(function(){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
});
$('form input, form textarea, form select').focusout(function(){
var input = $(this);
if( input.val().length === 0 ){
input.parent().siblings('label').removeClass('focused');
input.parent().siblings('legend').removeClass('focused');
}
});
$('form input, form textarea, form select').each(function(){
if( $(this).val().length != 0 ){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
}
});
});
jQuery(document).ready(function(){
$('form input, form textarea, form select').each(function(){
if( $(this).val().length != 0 ){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
}
});
$('form input, form textarea, form select').focusin(function(){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
});
jQuery(document).on('gform_page_loaded', function(){
$('form input, form textarea, form select').focusin(function(){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
});
$('form input, form textarea, form select').focusout(function(){
var input = $(this);
if( input.val().length === 0 ){
input.parent().siblings('label').removeClass('focused');
input.parent().siblings('legend').removeClass('focused');
}
});
$('form input, form textarea, form select').each(function(){
if( $(this).val().length != 0 ){
$(this).parent().siblings('label').addClass('focused');
$(this).parent().siblings('legend').addClass('focused');
}
});
});
});
CSS
.gform_wrapper {
.gfield {
position: relative;
&.gfield--type-address {
.address_line_1 > label {
display: none;
}
.address_zip, .address_city {
position: relative;
}
legend {
font-weight:600!important;
color:$gray;
position:absolute;
font-size:10px!important;
top:5px!important;
left:10px;
transition:all 0.3s ease;
}
label {
font-weight:600!important;
color:$gray;
position:absolute;
font-size:10px!important;
top:5px!important;
left:10px;
transition:all 0.3s ease;
&.gform-field-label--type-sub {
left: 22px;
}
}
input {
width:100%;
height: 60px;
border-radius:5px;
border:1px solid $gray-200;
padding:25px 10px 10px 10px!important;
transition:all 0.2s ease;
font-size:17px;
line-height: 1.3em;
color:$dark;
&:focus{
outline:none;
border-color:$primary;
}
}
}
&.gfield--type-number, &.gfield--type-textarea, &.gfield--type-text, &.gfield--type-email, &.gfield--type-tel, &.gfield--type-phone, &.gfield--type-website {
label, legend {
font-size:14px;
font-weight:600!important;
color:$gray;
position:absolute;
top:20px;
left:10px;
transition:all 0.3s ease;
&.focused{
font-size:10px!important;
top:5px!important;
color:$gray;
}
}
input:not(.button), textarea {
width:100%;
height: 60px;
border-radius:5px;
border:1px solid $gray-200;
padding:25px 10px 10px 10px!important;
transition:all 0.2s ease;
font-size:17px;
line-height: 1.3em;
color:$dark;
&:focus{
outline:none;
border-color:$primary;
}
}
}
}
.gpfup__droparea {
background: $white;
border:1px solid $gray-200;
& span {
color: $gray;
font-size:17px!important;
font-weight:600!important;
}
}
.gfield_error{
input, textarea {
border: 1px solid $danger!important;
}
.ts-control {
border: 1px solid $danger!important;
input {
border: 1px solid transparent!important;
}
}
.gfield_description{
font-size:14px;
margin-top:5px;
color:$danger;
}
}
}
.gform_fileupload_rules, .instruction {
display: none!important;
}
.chosen-choices {
border-color:$danger!important;
border-radius: 5px!important;
}
.ts-control {
border-color:$gray-200!important;
border-radius: 5px!important;
& > input {
font-size:14px!important;
font-weight:600!important;
color:$gray!important;
font-family: Inter!important;
}
}
input, textarea {
font-size:14px!important;
font-weight:600!important;
color:$gray;
border: 1px solid $gray-200!important;
}
label, legend {
color:$gray;
}
// checkbox and radio styles
.gform_wrapper input[type="checkbox"] { display: none!important; }
.gform_wrapper input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 25px!important;
margin-bottom: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.gform_wrapper input[type="checkbox"] + label:last-child { margin-bottom: 0; }
.gform_wrapper input[type="checkbox"] + label:before {
content: '';
display: block;
width: 16px;
height: 16px;
border: 1px solid $primary;
position: absolute;
left: 0;
top: 2px;
opacity: .8;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
.gform_wrapper input[type="checkbox"]:checked + label:before {
width: 10px;
top: -3px;
left: 5px;
border-radius: 0;
border-color: $primary;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.gform_wrapper input[type="radio"] { display: none!important; }
.gform_wrapper input[type="radio"] + label {
display: block;
position: relative;
padding-left: 25px!important;
margin-bottom: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.gform_wrapper input[type="radio"] + label:last-child { margin-bottom: 0; }
.gform_wrapper input[type="radio"] + label:before {
content: '';
display: block;
width: 16px;
height: 16px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
opacity: .8;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
.gform_wrapper input[type="radio"]:checked + label:before {
width: 10px;
top: -3px;
left: 5px;
border-radius: 0;
border-color: $primary;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#css #Forms #gforms #gfroms #Gravity #material design #sass #style