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

  • Profile Image
    Npedronan
    Asked on May 07, 2017 at 07:04 PM

    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.

     

  • Profile Image
    Chriistian
    Answered on May 07, 2017 at 08:52 PM

    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.

  • Profile Image
    Chriistian
    Answered on May 07, 2017 at 09:21 PM

    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.

  • Profile Image
    Npedronan
    Answered on May 07, 2017 at 09:43 PM
    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

    ...