← Snippets - Script - Form Customization

Slide-Up Form Labels

The label looks like a placeholder, but once you click in, it slides up to become more obviously a label.

Bootstrap 5

Scripts - forms.js

document.querySelectorAll('.form-group.js-slideup input').forEach((focusInput) => {
	focusInput.addEventListener('focus',function() {
		this.parentNode.classList.add('js-focusedInput');
	});
	focusInput.addEventListener('blur',function() {
		if (this.value.length < 1) {
			this.parentNode.classList.remove('js-focusedInput');
		}
	});
})
document.querySelectorAll('.form-group.js-slideup select').forEach((focusSelect) => {
    focusSelect.addEventListener('change',function() {
	if(focusSelect.value.length < 1) {
		this.parentNode.classList.remove('js-focusedInput');
	} else {
		this.parentNode.classList.add('js-focusedInput');
	}
    })
})
document.querySelectorAll('.form-group.js-slideup textarea').forEach((focusTextarea) => {
	focusTextarea.addEventListener('focus',function() {
		this.parentNode.classList.add('js-focusedInput');
	});
	focusTextarea.addEventListener('blur',function() {
		if (this.value.length < 1) {
			this.parentNode.classList.remove('js-focusedInput');
		}
	});
});

CSS

The CSS for the BS5 version of this is nearly the same. You can use the below code for most of the styling, but the class gets added to a different place.

.form-group.js-slideup {
  	position: relative;
  	margin-bottom: 26px;
  	padding-top: 32px;
  	label {
	    	pointer-events: none;
	    	position: absolute;
	    	margin-bottom: 0;
	    	top: calc(32px + 21px); // padding-top of form-group + the amount of space it needs to center in the field
	    	left: 18px;
	    	transform: translateY(-50%);
	    	transition: .3s ease;
	    	font-size: 15px;
	    	color: $gray-700;
	    	font-weight: $font-weight-light;
	    	font-style: italic;
  	}
	&.js-focusedInput label {
      		transform: translateY(0);
      		top: 0;
      		color: $white;
    	}
}

Example Sites

Bootstrap 2/3/4

Script - scripts.js

Place the script into your large function–putting it above/near the form submit function makes the most sense for organization.

// Position Absolute Form Labels
$( ".form-group.special input" ).focus(function() {
	$(this).prev().addClass('focusedInput');
});
$( ".form-group.special input" ).focusout(function() {
	if($(this).val().length < 1) {
			$(this).prev().removeClass('focusedInput');
	}
});
$( ".form-group.special select" ).change(function() {
	if($(this).val().length < 1) {
  		$(this).prev().removeClass('focusedInput');
	} else {
  		$(this).prev().addClass('focusedInput');
	}
});
$( ".form-group.special textarea" ).focus(function() {
	$(this).prev().addClass('focusedInput');
});
$( ".form-group.special textarea" ).focusout(function() {
	if($(this).val().length < 1) {
  		$(this).prev().removeClass('focusedInput');
	}
});

Styling - forms.scss

.form-group.special {
  	position: relative;
  	margin-bottom: 26px;
  	padding-top: 32px;
  	label {
    	pointer-events: none;
    	position: absolute;
    	margin-bottom: 0;
    	top: calc(32px + 21px); // padding-top of form-group + the amount of space it needs to center in the field
    	left: 18px;
    	transform: translateY(-50%);
    	transition: .3s ease;
    	font-size: 15px;
    	color: $gray-700;
    	font-weight: $font-weight-light;
    	font-style: italic;
    	&.focusedInput {
      		transform: translateY(0);
      		top: 0;
      		color: $white;
    	}
  	}
}

Example Sites

Tags: bs2, bs3, bs4, form, script, js, javascript, jquery, label, styling