I have an embedded hubspot form on my arabic website. Hubspot handles the Arabic (Right-to-left) fields brilliantly. The phone number with country code field works perfectly in Google Chrome and Firefox.
In Safari for iOS and Mac, the number displayed for the country code is on the wrong side of the input field.
I’m not just being picky about display, this bug will cause users to enter duplicate country codes, because the bug makes it look like the country code is missing at the beginning of the phone number. (I’ll attach screenshots.)
I could turn off the country code feature, but we turned it on because allowing free-form country codes was generating really messy user input. The country code selector is particularly useful in a multi-national, multi-lingual environment, hence the need for it on an Arabic website.
I’m willing to blame Apple for this bug, but I’m wondering if you have a workaround or bug fix for it, since this bug may affect all iPhone users on Arabic sites using HubSpot.
This photo shows shows Chrome and firefox on the right and left, displaying the number correctly. Safari is in the middle is displaying the country code incorrectly at the end of the phone number. In Arabic, phone numbers are treated as left to right.
Thank you for posting in our Community and sharing about this matter.
I would recommend checking the CSS styles applied to the form on your Arabic website specifically for Safari. Safari may interpret the styles differently than Chrome and Firefox.
You can try adding specific CSS rules for Safari to ensure a proper display of the country code in the phone number field.
Pam,
Thank you for your prompt reply. I’m thankful to not be alone in this!
The hubspot form embed uses an iFrame. I think my external CSS can’t modify the contents of the iframe because of cross origin security policy.
Maybe @TomM2, @Anton, @Ben_M will know of a way to fix the hubspot form display in Safari, or help me report the bug.
Thanks!
George
as @PamCotton mentioned - this looks like a CSS thing.
If you have something like an .rtl(right-to-left) class which will be added to to your arabic languages you can overwrite the “phone input field” like this
Thank you for being kind enough to provide a code sample for the CSS.
I think I’m blocked from using the CSS code you gave me because of cross origin security protocols, meaning that when I embed an iframe on a page, the parent page can’t use CSS to modify the contents of the iframe. I hope I’m wrong! You can check me on this by adding code in the CSS box of the code pen to try to modify the elements of the embedded iframe form.
I put my plain vanilla hubspot form into a codepen, so that you or anyone else can replicate the bug by viewing the codepen in safari for mac: https://codepen.io/cijmighk-the-bold/pen/oNVWZjY
This is the element that I would like to make LTR in safari:
<input id=“phone-e9508ada-c93f-4d7f-9dec-8d39dc95f4d2” name=“” placeholder=“” type=“tel” class=“hs-input” inputmode=“tel” autocomplete=“tel” value="+1 ">
Thanks for your help.
Hey @Georgeinmexico if you’re using a HubSpot form theme it will render inside an iframe so it cannot be styled. However, you can set your form as a raw html form to add css styling yourself.
@Tom Thank you so much for suggesting the Raw HTML option, and for understanding what I meant when I explained to the others why I couldn’t use the external CSS they suggested. I agree with you that raw HTML would allow me to add CSS styling to my form. Since this browser display bug affects the plain vanilla hubspot form, could you help me get this reported as a bug? I would love for it to be fixed for all hubspot users instead of just me. Viewing this codepen in safari should allow you to replicate the bug by confirming that a pristine, unmodified hubspot form displays incorrectly.
I’m new to this forum and don’t know how to submit a bug. Plus, it’s sometimes better for a bug to be submitted by a trusted community member who has replicated the initial conditions.
Thanks for any help you can give!
-George
Hello @Georgeinmexico, I would recommend connecting with HubSpot Technical Support, as Support is included in your subscription, and they will be able to provide real-time assistance for this matter, including hopping on a screen share if necessary.
I would prefer not to have to write custom code to compensate for a bug in the way the default hubspot form displays in Safari. My question is still unresolved.
Hi @Georgeinmexico,
I’m sorry to hear about your experience regarding this.
I would like to apologize for the frustration this has caused.
Also, I’d like to thank you for sharing your valuable feedback! This means a lot to us. And thank you so much @Anton and @TomM2 for the workarounds and suggestions!
I have shared your feedback internally @Georgeinmexico, to bring more visibility to it and to check if there is a bug within the HubSpot form or not.
I’d like to share this article for information: “Supporting Right-to-Left Languages” that might be of interest.
I’ll get back to you as soon as possible, thanks for your patience.
Have a good day.
Best,
Bérangère
Thank you for sharing it with your internal team. This bug is replicable. Share this link with your team.
I put my plain vanilla hubspot form into a codepen, to illustrate this bug. You can replicate the bug by viewing the codepen in safari for mac: https://codepen.io/cijmighk-the-bold/pen/oNVWZjY
