window.addEventListener('load', function () { $(".hs-form .hs-form-field .hs-input").focus(function () { $(this).parent().parent().removeClass("blured"); $(this).parent().parent().addClass("focused"); }).blur(function () { $(this).parent().parent().removeClass("focused"); $(this).parent().parent().addClass("blured"); }); $('.hs-form .hs-form-field .hs-input').on('keyup keydown', function () { if ($(this).val() !== "") { $(this).parent().parent().removeClass("blank"); $(this).parent().parent().addClass("filled"); } else { $(this).parent().parent().removeClass("focused"); $(this).parent().parent().addClass("blank"); } }); $('.hs-form .hs-form-field .hs-input').blur(function () { if ($(this).val() == "") { $(this).parent().parent().removeClass("filled"); $(this).parent().parent().addClass("blank"); } }); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter