Why does the "phone" field show up separated on 2 different lines/levels?

When I view my form on mobile (iOS) the "phone number field" shows up in 2 different lines. 

 

Viewed from desktop it looks fine, but viewed on my iPhone the area code and phone number are on 2 different levels which is very confusing for customers.

 

I was able to replicate the issue on phone fields when viewing it on an iPhone emulator.

 

 

Please allow me some time to further investigate. I'll get back once I've found results.
Regards.

Thank you for your patience.

Can you please try adding this custom CSS on your form and see if this helps to solve the issue on phone fiels?

@media screen and (max-width: 600px){

  [data-type="control_phone"] 

  .form-sub-label-container + .form-sub-label-container {

    width: 50% !important;

}

}

 

Here's the guide on How to Inject Custom CSS Codes.

And here's how it should look like on your form after injecting the code:

Please note also that since you are using the source code of your form when embedding the form on your site, you need to get the fresh code so that the changes will take effect on your site. How to get the Full Source Code of your Form.

Hope this helps.
Regards.

In lieu of using the "phone number" field option i'm using "short answer"
text field to solve this problem
Thanks,
*Nate Pedronan*
*Operations Manager | Senior Consultant*
*Inside Recruiter, LLC*
nate@insiderecruiter.com
424-258-0991
www.InsideRecruiter.com
Find us on Yelp
| Company
Website | Nate's LinkedIn

...