*Note – I’ve noticed the dark theme on this website can make the onFocus effects harder to see. If that is the case, try viewing this blog post with the “light” theme.

Fluent Forms onFocus Examples

To be used with Text or TextArea type inputs in Fluent Form. Every example needsto add the class “animated_form_element” under the Advanced Options for each of the text/textarea’ “Element Class” field such as below:

For each set of animations, hit the reveal button to show the code that has to be added to your Fluent Form’s Custom CSS/JS sections. That section can be found under “Settings & Integrations tab -> Custom CSS/JS”

Underline

Drop In Underline Example:

Show Examples Code

Required CSS:

/* Design specific options. Bottom border used for examples */

.fluentform .ff-el-form-control {
	border-top: 0px!important;
	border-left: 0px!important;
	border-right: 0px!important;
	border-bottom: blue solid 1px!important;
}

.fluentform .ff-el-form-control {
	border-radius: 0px!important;
}


/* Need to remove the error message out of document flow. 
  For this design, we used a bottom:5px but could be top etc..
*/

.fluentform .ff-el-is-error .text-danger {
	position: absolute;
	bottom: 5px;
	z-index: 10;
}

/* Animation code below */
.dropin_underline{
	position: relative;
}

.dropin_underline::before {
	content: "";
	position: absolute;
	bottom: 10px;
	height: 2px;
	width: 100%;
	left: 0;
	opacity: 0;
	background-color: blue;
	z-index: 2;
	display: block;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	-webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
	-o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
	transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}

.dropin_underline_activate::before {
	bottom: 0;
	opacity: 1;
}

/* Design specific options. Bottom border used for examples */

.fluentform .ff-el-form-control {

border-top: 0px!important;

border-left: 0px!important;

border-right: 0px!important;

border-bottom: blue solid 1px!important;

}

.fluentform .ff-el-form-control {

border-radius: 0px!important;

}

/* Need to remove the error message out of document flow.

For this design, we used a bottom:5px but could be top etc..

.fluentform .ff-el-is-error .text-danger {

position: absolute;

bottom: 5px;

z-index: 10;

}

/* Animation code below */

.dropin_underline{

position: relative;

}

.dropin_underline::before {

content: "";

position: absolute;

bottom: 10px;

height: 2px;

width: 100%;

left: 0;

opacity: 0;

background-color: blue;

z-index: 2;

display: block;

-webkit-transition: .3s;

-o-transition: .3s;

transition: .3s;

-webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);

-o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);

transition-timing-function: cubic-bezier(.58, .3, .005, 1);

}

.dropin_underline_activate::before {

bottom: 0;

opacity: 1;

}

Required Javascript:

jQuery(".animated_form_element").parent().addClass("dropin_underline");
jQuery(".animated_form_element").each(function () {
	if (jQuery(this).val()) {
		jQuery(this).parent().addClass("activate");
	}
});
jQuery(".animated_form_element").focus(function () {
	jQuery(this).parent().addClass("dropin_underline_activate");
	jQuery(this).next('.text-danger').css("display", "none");
});
 
 
jQuery(".animated_form_element").blur(function () {
	if (!jQuery(this).val()) {
		jQuery(this).parent().removeClass("dropin_underline_activate");
	}
});
 
jQuery(".ff-el-input--content").click(function () {
	jQuery(this).children('.text-danger').css("display", "none");
	jQuery(this).children('.animated_form_element').focus();
});

jQuery(".animated_form_element").parent().addClass("dropin_underline");

jQuery(".animated_form_element").each(function () {

if (jQuery(this).val()) {

jQuery(this).parent().addClass("activate");

}

});

jQuery(".animated_form_element").focus(function () {

jQuery(this).parent().addClass("dropin_underline_activate");

jQuery(this).next('.text-danger').css("display", "none");

});

jQuery(".animated_form_element").blur(function () {

if (!jQuery(this).val()) {

jQuery(this).parent().removeClass("dropin_underline_activate");

}

});

jQuery(".ff-el-input--content").click(function () {

jQuery(this).children('.text-danger').css("display", "none");

jQuery(this).children('.animated_form_element').focus();

});

Online Journal

My online journal about design and development related topics and what I've learned.

Various onFocus animations using Fluent Forms

Fluent Forms onFocus Examples

Underline

Drop In Underline Example:

Left To Right