Skip to content

Instantly share code, notes, and snippets.

@sagive
Last active July 24, 2023 19:04
Show Gist options
  • Save sagive/524c0fba397ae8dd84851e942e589eec to your computer and use it in GitHub Desktop.
Save sagive/524c0fba397ae8dd84851e942e589eec to your computer and use it in GitHub Desktop.
Contact Form 7 (CF7) Floating Labels.
<div class="newsletterSignUpFooter">
<div class="form-group">[text* your-name class:form-control class:input-lg] <label for="your-name">First Name</label></div>
<div class="form-group">[text* text-777 class:form-control class:input-lg] <label for="your-name">Last Name</label></div>
<div class="form-group">[email* your-email class:form-control class:input-lg] <label for="your-name">Your Email</label></div>
<div class="">[submit class:btn class:btn-warning class:btn-lg class:w100 "Send"]</div>
</div>
/*********************************************
** FLOATING LABELS FOR CF7
*********************************************/
$(".wpcf7 .form-control").focus(function(){
$(this).parent().parent().addClass('active');
}).blur(function(){
var cval = $(this).val()
if(cval.length < 1) {$(this).parent().parent().removeClass('active');}
})
/*
1. convert field wrap bg to white
2. convert field bg to transparent
3. set labels z-index: 1; and field to z-index: 2; to make a click on label activate field
4. handle label transition / location change (animation addded)
*/
input[type="text"].form-control, input[type="email"].form-control {padding: 10px 15px 0px; font-size: 16px !important; background: transparent; z-index: 2; position: relative;}
.wpcf7-form-control-wrap {background: #fff; height: 100%; display: block;}
label {transform: translateY(-100%); z-index: 1; font-size: 16px; font-weight: normal; font-style: italic; color: #9b9b9b; line-height: 42px; position: absolute; padding: 0 17px;-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.form-group.active > label {transform: translateY(-125%); color: #9b9b9b; font-size: 12px; padding: 0 16px;}
@yaroslavthedev
Copy link

Very usefull. Thanks!

@shkasjon
Copy link

shkasjon commented Jul 1, 2023

var formControls = document.querySelectorAll('.wpcf7 .form-control');

for (var i = 0; i < formControls.length; i++) {
var input = formControls[i];
var label = input.parentNode.parentNode.querySelector('label');

input.addEventListener('focus', function() {
this.parentNode.parentNode.classList.add('active');
});

input.addEventListener('blur', function() {
var cval = this.value;
if (cval.length < 1) {
this.parentNode.parentNode.classList.remove('active');
}
});

if (label) {
label.addEventListener('click', function() {
var input = this.parentNode.querySelector('.form-control');
input.focus();
});
}
}

@sagive
Copy link
Author

sagive commented Jul 9, 2023

Thanks @shkasjon 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment