Step-by-Step Tutorial: Floating Labels in Elementor Forms
Learn how to create floating labels in Elementor forms using JavaScript and CSS customization. This tutorial will guide you through the steps to add required and acceptance fields, customize form elements, adjust layout, and optimize transition timing for a smoother user experience.
Achieve floating labels in Elementor form:
Add the form widget and the desired fields, then remove the placeholders for all the fields.
<script>
document.addEventListener("DOMContentLoaded", function() {
var inputs = document.querySelectorAll("input, textarea");
inputs.forEach(function(input) {
var closestFieldGroup = input.closest(".elementor-field-group");
var label = closestFieldGroup ? closestFieldGroup.querySelector("label") : null;
function updateLabelClass() {
if (label) {
if (input.value.trim() !== "") {
label.classList.add("focused", "normalizecolor");
} else {
label.classList.remove("focused", "normalizecolor");
}
}
}
var isFocused = (document.activeElement === input);
input.addEventListener("focus", function() {
if (label) label.classList.add("focused");
});
input.addEventListener("input", function() {
updateLabelClass();
});
input.addEventListener("blur", function() {
if (label) label.classList.remove("focused");
updateLabelClass();
});
updateLabelClass();
});
});
</script>
Right click on the form > Advanced > Custom CSS and add the following CSS:
/*Initial label positioning*/
label:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label):not(.elementor-field-type-select label) {
position:absolute;
left: 28px;
top:16px;
}
/*Floating Positioning*/
label.focused:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label):not(.elementor-field-type-select label) {
top:-10px;
font-size:85%;
color:#F3633A;
background: #fff;
padding: 3px;
}
/*Select default state*/
.elementor-field-type-select label{
position:absolute;
left: 28px;
top:-10px;
font-size:85%;
color:#F3633A;
background: #fff;
padding: 3px;
z-index: 1
}
/*Select default state margin*/
.elementor-field-type-select{
margin-top:10px;
}
/*Input border color on focus*/
input:focus, textarea:focus {
border-color: #F3633A!important;
}
/*Label color when the field is completed*/
.normalizecolor{
color:#949494!important;
}
/*Floating transition*/
.focused, label{
transition:all 0.4s;
}
Then change the CSS color codes to match your design.
Also you can also adjust the label initial positioning, or the floating positioning.
Lazy doing it on your own?
With this tutorial, you can easily implement floating labels in Elementor forms. Follow the steps to create visually appealing and user-friendly forms on your website. Experiment with customization options to match your design preferences and enhance the overall form experience. Enjoy building stunning forms with Elementor!