I'm trying to add some animations to my landing page's form fields when in focus. I wrote some code to add a class to the .hs-form-field div when the input is focused on, but it's not firing. I can't even print a message to the console when using either a focusin() or click() events. Now, targeting non-form elements works just fine. I just can't seem to get it to work on form fields.
Here is my very simple js that should be working, and works perfectly fine in our main site built in Wordpress.
/************************* Animation on Form Fields *************************/
/* Add class to .hs-form-field when input is in focus - Does not work */
$('.hs-form-field input:not([type="submit"])').focusin( function() {
$(this).parent().parent().addClass('has-value');
});
/* Testing simple click event on form field - Does not work */
$('.hs-form-field').click( function() {
console.log('form field clicked');
});
/* Testing click event on non form element (button in content above form) - works */ $('.button').click( function() { preventDefault();
console.log('button clicked');
});
Thank you for your reply. The reason I need to target the form fields on focus is so that can add a class to a parent container as I'm animating the input's label. The class I'm adding to the parent container will be then used to scope the animations on the label in css. So just adding css to the focus on the input will not allow me to animate the label.
To not get into too much, I'm absolutely positioning the form label in the input itself. When the input has focus, it adds a class to the parent, which then uses css to move/animate the position and font size of the label. You can see what I mean by going to the Wordpress dev site I'm building. Just go down to the bottom of the page and look at the form there. http://new.kiwicreative.net/
So unfortunately, I cannot use a css only solution. I'm normally a wordpress developer and do this type of stuff all the time. So what I'm trying to do is nothing out of the norm for me, I just can't figure out why targeting the form fields with JS in Hubspot is not working.
I removed my styles for the label animations until I get this issue figured out, but I still have my js loading, well the intitial onfucus(), I haven't added additional code until I know for sure I can target the form fields.
This is my current js, so you can see what should be printing to the console. I have a click event on a button that says "Get my free download" that prints "download button clicked" in the console. So you can see how that event fires, but not the focusin event on the form fields.
/* Animation on Form Fields */
$('.hs-form-field input:not([type="submit"])').focusin( function() {
$(this).parent().parent().addClass('has-value');
console.log('has value');
});
/* Test on "Get My Free Download" button above form */
$('.lp-cta-button .button').click( function() {
console.log('download button clicked');
});
Interesting. When i paste your code into the console I am getting messages logged back:
I also made a more verbose version just for testing:
$('.hs-form-field input:not([type="submit"])').focusin(function() {
$(this).parent().parent().addClass('has-value');
let clickedInput = $(this);
let inputWrapper = $(this).parent().parent();
console.log(`the field:
${clickedInput.prop('outerHTML')}
was clicked, and the parent:
${inputWrapper.prop('outerHTML')}
has the following classes: ${$(inputWrapper).attr("class").split(' ')}. `);
if (inputWrapper.hasClass('has-value')) {
console.log(`the class has-value has been added`)
} else {
console.log(`the class has not been added to the parent`)
}
});
And i'm seeing this log the correct info - curious, if you open the console and paste this after the page loads, do you see the info log?
I haven't looked at your JS file yet, but is it possible it needs to be wrapped in a document.ready ?
EDIT:
Yeah, can you try:
$( document ).ready(function() {
// begin code
$('.hs-form-field input:not([type="submit"])').focusin(function() {
$(this).parent().parent().addClass('has-value');
let clickedInput = $(this);
let inputWrapper = $(this).parent().parent();
console.log(`the field:
${clickedInput.prop('outerHTML')}
was clicked, and the parent:
${inputWrapper.prop('outerHTML')}
has the following classes: ${$(inputWrapper).attr("class").split(' ')}. `);
if (inputWrapper.hasClass('has-value')) {
console.log(`the class has-value has been added`)
} else {
console.log(`the class has not been added to the parent`)
}
});
// end custom code
});
I removed all my css that was positioning and adding transition animation until I get the js part figured out. So even if the js would fire, it wouldn't animate like the link I provided to the WordPress site. However, my js is still loading, and I'm printing out messages to the console.
So if you put focus on a form field, you will notice nothing prints to the console, but if you click on the button (anchor link) above that says "Get my free download", you will notice it prints "Download button clicked".
The js I currently have loading is:
/* Animation on Form Fields */
$('.hs-form-field .input input:not([type="submit"])').focusin( function() {
$(this).parent().parent().addClass('has-value');
console.log('has value');
});
/* Test on "Get My Free Download" button above form */
$('.lp-cta-button .button').click( function() {
console.log('download button clicked');
});