Iphone Form Dropdown problem

Developer Support APIs & Integrations
1

I’m having trouble with my Hubspot forms on iOS devices. They render form dropdowns on a different way, so that it cuts the text (attached image).
I’ve found a solution for this behaviour on stackoverflow, but cant make the script run on Hubspot forms.

hMaQO.png
hMaQO.png654×1190 191 KB

(stack overflow solution: adding ‘optgroup’ tag at the end of each ‘select’)
$(function() {
var selects = document.querySelectorAll(“select”);
    for (var i = 0; i < selects.length; i++ ){
       selects[i].appendChild(document.createElement(“optgroup”));
    }
});

*The form is configured to render as HTML, since this way it can be modified using scripts.
** I already tried customizing the embed code with 'onBeforeFormInit’ and ‘onFormReady’, but it doesn’t seem to work either.
What should I do?

2

Hi @eddieteixeira,

I hadn’t actually used this <optgroup> element before, but I was able to get it working just now. It sounds like you’ve got it set up correctly, but could you link me to a page where I can see what’s going on? So long as you’re using an unstyled form (what’s described here: https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-style-my-embedded-form#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only), then you’ll have access to the form HTML because the form won’t render inside an iframe. And then like you said, adding your function into the onFormReady callback will add the <optgroup> element. So here’s example using a test form from my own account:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({
 portalId: "437004",
 formId: "045832a4-de1d-4b8e-8751-d5171e12f17a",
 onFormReady: function() {
 var selects = document.querySelectorAll("select");
 for (var i = 0; i < selects.length; i++ ){
 selects[i].appendChild(document.createElement("optgroup"));
 }
 }
 });
</script>

So let me know if that helps. But also feel free to link me to your page and I’ll take a look at what’s going on.

3

Thanks a lot!! It worked. I’m still not sure why it wasn’t working before, maybe I’ve written something wrong.
I’s there any way to use this fix without having to customize every form embed code, like puting the script inside the domain?

4

Hey @eddieteixeira,

Yeah honestly I’m not sure what would have been different. Maybe just some conflict in terms of your syntax and the syntax of the callback. As for making this a bit more DRY, you could use a global form event instead of a callback, and then add a <script> inside of your domain’s footer HTML: https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of-my-pages#add-code-to-the-head-or-footer-html-of-all-pages-hosted-on-a-specific-domain.

Here’s our doc on global form events: Accounts Dashboard | HubSpot . I haven’t actually tested this, but I think this would do the trick for you:

<script>
 window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 var selects = document.querySelectorAll("select");
 for (var i = 0; i < selects.length; i++ ){
 selects[i].appendChild(document.createElement("optgroup"));
 }
 }
 }); 
</script>

I hope that helps. Let me know if you have any trouble with it and I can take a look.