Customize Form - Show message based on select option

[illufox]

In our contact us form, the user can select if they want to just chat or if they need support. If they need support we don't want them to fill out the form, but direct them to the support email, wheter in form of a message that says "please contact support" or that they are taken to the support page. I was hoping to simply solve that via the form dependencies option, but there's no such thing as "display message" or "redirect to page". So I tried to write my own script, but Hubspot is totally ignoring it. Here is what I have tried for displaying a message:

jQuery in header ( via "Edit Head"):

<script type="text/javascript">
    $(document).ready(function(){
        $("#hidden_div").hide();
        $("#how_can_we_help_you_-b1d1c066-a4d6-4a47-975f-52fa601f4ed5_338").change(function(){
          if($(this).val() == "I have a support request (I'm a client)"){ 
            $("#hidden_div").show();
          }
        });
    }
</script>

HTML via "Custom HTML" widget:

<div id="hidden_div">
   <p>Please contact support@ourfirm.com</p>
</div>

I would assume that redirecting them to another page would be very similar.

Anyone know if this should work? If so, what am I doing wrong?

[jknapp]

Come on HubSpot! This should really be an easy fix through dependent field options in the forms tool.

[Jsum]

@illufox,

Have you checked your console for errors? can you share the page?

Hubspot forms load after everything else. I'm not sure if because they are heavy in dependency or just by design. Either way You script is running before the form exists. Because of this the value you are checking is not the value. You should either fire this once the field loses focus, or after some other trigger. make this function depended on the .ready of the form buuuut that still wouldn't cause your problem, you want this function to either fire when the user makes the choice, or you wanted it to always check until the result returns true. 

[illufox]

Thanks for replying, here is the page: http://go.cosential.com/contact-us

[Jsum]

There are 2 errors in your console, the first is definitely related to the script for this function

contact-us:123 Uncaught SyntaxError: missing ) after argument list

Your missing a parenthasis after the ending curly brace to your function. the semicolon too. You should get your syntax correct and check. you can also use console.log(); to check if a function is firing.

The second is probably not related but it is still an error you should fix:

contact-us:792 Uncaught SyntaxError: Unexpected token <

on line 792 you have an open script tag but the script before this tag doesn't close so it's open script tag is using the extra open script tag's closing script tag rendering the extra open script tag.... extra. You should either remove this tag or close the script above it. 

[illufox]

Thanks for catching that. I fixed it, but it doesn't make any difference, unfortunately.

I'll have to keep digging....

[Jsum]

It matters because we can't figure out how to get your code right if your syntax is off to begin with. 

With that issue fixed I moved on to checking the element you script is monitoring the change for:

how_can_we_help_you_-b1d1c066-a4d6-4a47-975f-52fa601f4ed5_338

This ID only exists in your code, nowhere else in the document. When I first started developing in Hubspot I would try to target id's on Hubspot generated elements and my experience was that that the ID is dynamic and would change on me. I think that is the case here. That is the case here as well. use your element inspector to check the id of the select field, refresh and check it again. It will be different. 

Right now your script is checking for a change on an element that doesn't exist. You will want to find a different way to target the select field, maybe by it's name, placeholder, or some other attribute.

Give that a try and let us know what happens.

[illufox]

Thank for the tip, I was totally unaware of the fact the the ID's are dynamic. I adjusted my code to refer to the selector name instead, and I made a few other adjustments, but I still can't get it to work.

[Jsum]

cool, so now that you syntax is right, and your target is solid, you should check and see if and how the function is firing. Add Console.log('fired!'); inside and at the top of your change function. This should print "fired!" to the console on change. If that works then the issue is with the contents of your function. If it it doesn't then the issue is with how you trying to trigger the function.

[illufox]

Added that, nothing prints to console.

[Jsum]

try this:

 $(".hs-form").load(function(){
        $(".hidden_div").hide(); // hide message 
        $(".hs-form select[name='how_can_we_help_you_']").change(function(){
          Console.log('fired!'); 
          if($(this).val() == "I have a support request (I'm a client)"){ 
            $(".hs-form input").hide();  // hide all other fields and button
            $(".hidden_div").show(); // show message
          }
        });
    });

take the document.ready out and replace it with a check to see the the form has loaded. You have no custom classes around the form so I used hubspot's default class. 

I still feel like your script is trying to recognize the select field before it loads.

[illufox]

If I use this script, the message shows, but it shows by default, and it doesn't go away if I select any other options, so I had to revert back to my script. 😞

[Jsum]

right.. You need an else statement to toggle the div.

$(".hs-form select[name='how_can_we_help_you_'").change(function() { 
    if($(this).val() == "I have a support request (I'm a client)"){ 
        $(".hs-form input").hide(); 
        $(".hidden_div").show(); 
    }  else {
        $(".hs-form input").show(); 
        $(".hidden_div").hide(); 
    }
});

[illufox]

So after all the trial and error, I'm left with this script:

<script type="text/javascript">
$(document).ready(function(){
$(".hidden_div").hide(); 
    $(".hs-form").load(function(){
        $(".hs-form select[name='how_can_we_help_you_'").change(function() { 
            if($(this).val() == "I have a support request (I'm a client)"){ 
                $(".hs-form input").hide(); 
                $(".hidden_div").show(); 
            }  else {
                $(".hs-form input").show(); 
                $(".hidden_div").hide(); 
            }
        });
    });
});
</script>

At least the message is now hidden by default (it isn't if we don't hide it at first), and it includes all the script you suggested within, but it still doesn't work.... 😞

[Jsum]

This part works:

$(".hs-form select[name='how_can_we_help_you_'").change(function() { 
            if($(this).val() == "I have a support request (I'm a client)"){ 
                $(".hs-form input").hide(); 
                $(".hidden_div").show(); 
            }  else {
                $(".hs-form input").show(); 
                $(".hidden_div").hide(); 
            }
        });

try putting console.log('loaded'); inside and at the top of .load. refresh the page check the console for "loaded". You might need to remove the .load wrapper from the function.

[illufox · Accepted solution]

ok, tried that... console didn't log anything.... and removing load wrapper didn't change anything...

Ok, did a lot of research and found this: https://developers.hubspot.com/manipulating-forms-with-jquery

So I changed:

$(".hs-form").load(function(){

to:

$(window).load(function(){

and it worked!!!!!! 😄

UPDATE: It does NOT work in Safari!!! 😞

[Jsum]

@illufox,

This works:

$(".hs-form select[name='how_can_we_help_you_'").change(function() { 
    if($(this).val() == "I have a support request (I'm a client)"){ 
        $(".hs-form input").hide(); 
        $(".hidden_div").show(); 
    } 
});

I wrote it into the console and when I changed the select field to support your div showed.

Because I used the console it means the page was already loaded so I didn't have to worry about dependencies loading.

It does work though, you can c&p this into your console, hit enter, and change the select field to check:

$(".hs-form select[name='how_can_we_help_you_'").change(function() { if($(this).val() == "I have a support request (I'm a client)"){ $(".hs-form input").hide(); $(".hidden_div").show(); } });

[illufox]

Yes, it works in Console, but not in real time, unfortunately.