Unhide input fields when a user starts filling.

[asha-wijekoon]

I am working on a HubSpot form where I want to unhide some input fields when a user starts filling.
Below is the current code,

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>

hbspt.forms.create({
portalId: '478594',
formId: '8ce1fe21-ea32-4626-82d1-1bcf5960438f',
target:'#sticky-form',
onFormReady($form, ctx){
$('.hs-input').focus(function(){
$('.hs-company').css("display", "block").fadeIn(0);
});
}
});
</script>

I want to do this without including "//js.hsforms.net/forms/v2.js" as it changes the styles of the other forms on the page.

If someone has an idea on how to do this, please let me know! Thanks!

[tjoyce · Accepted solution]

@asha-wijekoon - you're targeting all forms when you use "$('.hs-input')". You should only target the current form by using the $form variable that gets injected into the callback function.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>

hbspt.forms.create({
    portalId: '478594',
    ormId: '8ce1fe21-ea32-4626-82d1-1bcf5960438f',
    target:'#sticky-form',
    onFormReady($form, ctx){
        $('.hs-input').focus(function(){
            $('.hs-company').css("display", "block").fadeIn(0);
        });
        $form.on('focus', function(){
            $form.find('.hs-company').css("display", "block").fadeIn(0);
        });
    }
});
</script>

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.