Navigating the delicate balance between web form aesthetics and accessibility, the choice between labels and placeholders is often a challenge. While using both may clutter the design, relying solely on placeholders leaves users without clear guidance, especially for accessibility compliance (WCAG 2.0).
This simple solution strikes a balance: presenting a clean form initially and discreetly displaying labels as users engage with each field. It ensures both a visually appealing design and adherence to accessibility standards.
Form Demo
Can't choose between a placeholder or a label? Click the fields to see. No plugins. Just simple coding.
The code I used
<style>
.elementor-field-label {
position: absolute;
left: 1.3em;
top: -0.8vw;
font-size: 0.7em;
background-color: #fff;
padding: 0 0.3vw;
}
.elementor-field::placeholder{
opacity: 1 !important;
}
.elementor-field:focus::placeholder {
color: #fff;
}
</style>
<script>
jQuery( document ).ready(function( $ ) {
//check if this is the homepage form
if ($('#ux_lables_form').length)
{
$('.elementor-field-label').hide();
$('.elementor-field').focus(function() {
$(this).parent().find('label').show("fast", "swing");
})
$('.elementor-field').focusout(function() {
if ( $(this).val().length && $(".elementor-field").val().length ) {
} else{
$(this).parent().find('label').hide("fast", "swing");
}
})
$('.form-item label').on('click', function() {
$(this).closest('.form-item').find('input').focus();
})
}
else {return}
});
</script>
