# Iphone Form Dropdown problem

**URL:** <https://community.hubspot.com/t/iphone-form-dropdown-problem/15757>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [August 14, 2019, 8:07pm UTC](https://community.hubspot.com/t/iphone-form-dropdown-problem/15757 "2019-08-14T20:07:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eddieteixeira](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/eddieteixeira/32/29368_2.png) [@eddieteixeira](https://community.hubspot.com/u/eddieteixeira)\
**Post date:** [August 14, 2019, 8:07pm UTC](https://community.hubspot.com/t/iphone-form-dropdown-problem/15757/1 "2019-08-14T20:07:45Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/7/2704711ef434467cc330616faa200f07322bd0d4.png)

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

\*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?_

---

<div class="post-metadata">

**Author:** ![lscanlan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lscanlan/32/66262_2.png) [@lscanlan](https://community.hubspot.com/u/lscanlan)\
**Post date:** [August 15, 2019, 10:37pm UTC](https://community.hubspot.com/t/iphone-form-dropdown-problem/15757/2 "2019-08-15T22:37:15Z")

</div>

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](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:

```auto
<!--[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.

---

<div class="post-metadata">

**Author:** ![eddieteixeira](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/eddieteixeira/32/29368_2.png) [@eddieteixeira](https://community.hubspot.com/u/eddieteixeira)\
**Post date:** [August 19, 2019, 1:35pm UTC](https://community.hubspot.com/t/iphone-form-dropdown-problem/15757/3 "2019-08-19T13:35:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![lscanlan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lscanlan/32/66262_2.png) [@lscanlan](https://community.hubspot.com/u/lscanlan)\
**Post date:** [August 19, 2019, 6:22pm UTC](https://community.hubspot.com/t/iphone-form-dropdown-problem/15757/4 "2019-08-19T18:22:45Z")

</div>

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](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](https://developers.hubspot.com/global-form-events) . I haven’t actually tested this, but I think this would do the trick for you:

```auto
<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.