Can't get JS to fire when targeting form fields

Regular Contributor

Hello,

 

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'); });

 

Reply
0 Upvotes
8 Replies 8
Regular Contributor

Hi @RyanPatterson

Are you trying to modify the input fields from the forms?

Have you modified

a) the construction (output) of the form output?

b) your JS part?

 

Also - is there a specific reason why you want to animate "focus"-state via js?

 

a very simple way would be to animate it via CSS.

 

Just add

-webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;

to the input in the (HubSpot) CSS where your input types are "set"(most likely the main css file).

 

It should look like this:

input[type="text"], input[type="email"], textarea{
background-color:#ffffff;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
background-color:#ff0000;
}

It works according to the following principle:

- You add the transition information to the "normal"-state

- You add the things you want to be changed to the :hover, :focus state 

 

 

 

regards, 

Anton

 

Did my post help answer your query? Help the Community by marking it as a solution
Regular Advisor | Platinum Partner

@RyanPatterson, i think anton's solution is the best/ simplest way to go.

When using js in hubspot forms, it is wise to add to the formOnReady callback in the form itself.  See example here

dennis
Regular Contributor

Anton,

 

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. 

 

Thanks, 

 

Ryan

Reply
0 Upvotes
Occasional Contributor

I tried this on my own site and this code did work:

 

$('.hs-form-field input:not([type="submit"])').focusin( function() {
  $(this).parent().parent().addClass('has-value');
});

Can you link to the page you're not seeing this work?

Reply
0 Upvotes
Regular Contributor

Hi @jlamb2

 

Thanks for the reply! I don't have any actual pages published using the template I am building, but you should be able to see the preview https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

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');
});

But you can also see this by viewing the js file directly at https://cdn2.hubspot.net/hub/2512599/hub_generated/template_assets/1545322145151/KiwiCreative_Novemb...

 

Any insight you can provide would be greatly appreciated!

 

Thanks,

Ryan

Reply
0 Upvotes
Highlighted
Regular Contributor

Hi @jlamb2,

 

Thank for the repy!

 

I haven't published any pages using any of the templates I'm building, but you should be able to see a preview https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

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');
});

Or you can see this by directly viewing the js file at https://cdn2.hubspot.net/hub/2512599/hub_generated/template_assets/1545322740305/KiwiCreative_Novemb...

 

Any insight you can provide would be greatly appreciated. 

 

Thanks, 

 

Ryan

Reply
0 Upvotes
Regular Contributor

Interesting. When i paste your code into the console I am getting messages logged back:

Screen Shot 2018-12-20 at 4.51.49 PM.png

 

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
});

replacing your current kiwi-form.min.js ?

Regular Advisor | Platinum Partner

Again, throw any hubpsot form related js in the onFormReady call back. Document ready won't suffice

dennis
Reply
0 Upvotes