Your Mobile Phone Number Display incorrectly

  • Resolved assertiveminds

    (@assertiveminds)


    8 years, 11 months ago

    Hi there,

    Thank you for the plugin. I installed it on my site, and using with the Contact Form 7 but it’s not working the way it should.

    Here is my site, please take a look on the contact form. http://428.027.myftpupload.com

    Problem:
    1. The “Your Mobile Number” box is not displaying in the same proportional in size as the other boxes.

    2. When I use the site on my mobile phone, the I would see the country code, but it does not allow me to enter the number. This may be because of the box display size. (please check this issue by going to my site on your mobile phone so that you can see the issue).

    3. When I take the mouse to the “You Mobile Number” box, it displays a gray border around, but I’m not seeing the same with other boxes. How can I make this consistent with the whole contact form 7?

    Your help and support is highly appreciated.

    Thank you so much.

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 11 months ago

    Please reply my questions by email. Thank you.

    Plugin Contributor damiarita

    (@damiarita)

    8 years, 11 months ago

    Hi @assertiveminds,

    I checked your site from my smartphone. I had no problem entering my cell phone.

    Issues 1 and 3 are related to CSS. The styles in your CSS are targeting text inputs, but not phone ones.

    Check: https://wordpress.org/support/topic/input-field-size-2/

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 8 months ago

    Hi Damiarita,

    Thank you so much for your reply to my earlier questions. I really appreciate your response. I didn’t know you had reply to my query until today. I kept looking under my email. I’m still working on the website.

    Here is my site, please take a look on the contact form. http://428.027.myftpupload.com

    Problems that I reported earlier:
    ———————————-

    Prob #1, The “Your Mobile Number” box is not displaying in the same proportional in size as the other boxes.

    2. When I use the site on my mobile phone, the I would see the country code, but it does not allow me to enter the number.

    Current Update:
    —————

    Prob #1 is slightly fixed, but still not all the fields (Your mobile, Your name) are totally proportional.

    I added the following CCS as you have it in the link you provided.

    .intl-tel-input {
    width: 100%;
    }

    .wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 input[type=”tel”], .wpcf7 textarea{
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }

    Prob #2 & the Update:

    I again verified the site and the Intl Contact Form on my iPhone, and seeing the list of the country code, but I can’t enter the number. (please check this issue again on your side on your mobile)

    Please let me know how I can resolve these problems.

    Your help and support is highly appreciated.

    Thank you so much.

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 8 months ago

    Hi Damiarita,

    Could you please review my last request/response and share your insights or a way to fix the problems? I would like to get the site up and launch once we fix these problems.

    Thank you so much of your support.

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 7 months ago

    Hi Damiartia,

    How do I make the listing of the country code display on a straight line? Right now, it doesn’t display in a straight vertical line to the left.

    Please help on this.

    Here is my site, please take a look on the contact form on the header area of the home page.

    http://428.027.myftpupload.com/

    Thank you so much for your support.

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 6 months ago

    Hi Damiarita,

    Are you still working on this plugin? It’s been a while since you have responded. I would really appreciate if you let me know if you can support us on our questions related to your plugin or not.

    So far, what’s holding us back are these problems with your plugin:

    1. On a PC (I’m using mac), the listing of the country flags are not displaying on a straight vertical line to the left.

    2. (This is happening only on the iPhones) – I can select the country, but it does not allow me to enter the number. I tried this on different iPhones and has the same problem. With Samsung mobile phones, this is not a problem.

    Could you please, please, help us with this two questions. I really need to get this working or have to change the layout for our header to add another field for the number.

    Thank you so much. Please get back to me A.S.A.P.

    Plugin Contributor damiarita

    (@damiarita)

    8 years, 6 months ago

    Hi,

    I am investigating the iPhone issue as other users have the same issue.

    Regarding the visual look of the field. You have to make your CSS work to unify the page.

    I suggest right-clicking on the field and selecting Inspect or Inspect Element (they work in Chrome and Mozilla at least) and seeing what CSS rules have effect.

    I tryed it and saw that your fields are affected by file http://428.027.myftpupload.com/wp-content/themes/bridge/css/style_dynamic.css?ver=1503615957 at line 372.

    I changed the selector so that it affects the telephone input from:
    .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date, .cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea, .cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-quiz
    to
    .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-intl-tel, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date, .cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea, .cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select, .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-quiz
    And now it looks the same

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 6 months ago

    Hi Damiarita,

    Thank you so much for your reply. I appreciate you.

    I don’t understand about the selector. I don’t know how to change them directly. You made changes from and to. Is this the CCS change that I should add to my CCS on my site? Will this align the country flag on the left for the field?

    Were you able to fix the iPhone issue?

    Thank you so much for your support. I look forward to your quick reply.

    Neal

    Plugin Contributor damiarita

    (@damiarita)

    8 years, 6 months ago

    Hi,

    The fix for the iPhone issue will come in a later release.

    You have to modify your CSS so that the styles your theme puts at the inputs goes to the telephone input. If you use jetpack, the best way to do it is at your Dashboard, under Appearance → Customize → Additional CSS (more details at https://jetpack.com/support/custom-css/)

    Otherwise, you can install this plugin to write your extra CSS: https://wordpress.org/plugins/custom-css-js/

    In both cases, you have to include this to your CSS:

    .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-intl-tel{
    background-color: #ffffff;
    border-color: #ffffff;
    border-width: 4px;
    border-style:solid;
    color: #000000;
    font-family: Open Sans;
    font-size: 13px;
    line-height: px;
    font-style: normal;
    font-weight: 400;
    padding-top: px;
    padding-right: px;
    padding-bottom: px;
    padding-left: px;
    margin-top: px;
    margin-bottom: px;
    }

    I hope it helps

    • This reply was modified 8 years, 6 months ago by damiarita.
    • This reply was modified 8 years, 6 months ago by damiarita.
    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 6 months ago

    Hi Damiarita,

    Thank you so much for you reply. I always appreciate you to taking the time to look at my issue and reply with a solution.

    So, I included the CCS as you indicated and changed the border width and padding area of the mobile number field. However, it looks fine on my MAC, but on my iPhone there seems to be a gray line over the top of the field. I’m not sure if need to change the broader width or padding from the top. Please advice and share new CCS if that can fix this.

    Also, how we do we get the country flags line up on the left both for iPhone and MAC?

    I’m able to input the number on my MAC, but not on iPhone. You said the fix is still coming in the next release. Do you know when you can expect this release? Is there a way you can provide the unofficial fix to me for my site that I can apply that speed up the process. I can’t go public with this site unless the iPhone issue is fixed.

    One last thing, I used a test to add number on the mobile field and submit with a name. Once I get an email from the contact form, I didn’t get number listed in the Message Body.

    Here is what I got on my email as an example: I used England flag to add number.

    From: test 1 <[your-email]>
    Subject: [your-subject]

    Message Body:
    [your-message]

    ————————

    Thank you as always for your help and support. I look forward to your reply soon.

    Neal

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 6 months ago

    Sorry, forgot to add my site for verification. Here…

    http://428.027.myftpupload.com

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 5 months ago

    Hi Damiarita,

    Resending my earlier reply. Please response as soon as you get this reply.

    Thank you so much for you reply. I always appreciate you to taking the time to look at my issue and reply with a solution.

    So, I included the CCS as you indicated and changed the border width and padding area of the mobile number field. However, it looks fine on my MAC, but on my iPhone there seems to be a gray line over the top of the field. I’m not sure if need to change the broader width or padding from the top. Please advice and share new CCS if that can fix this.

    Also, how we do we get the country flags line up on the left both for iPhone and MAC?

    I’m able to input the number on my MAC, but not on iPhone. You said the fix is still coming in the next release. Do you know when you can expect this release? Is there a way you can provide the unofficial fix to me for my site that I can apply that speed up the process. I can’t go public with this site unless the iPhone issue is fixed.

    One last thing, I used a test to add number on the mobile field and submit with a name. Once I get an email from the contact form, I didn’t get number listed in the Message Body.

    Here is what I got on my email as an example: I used England flag to add number.

    From: test 1 <[your-email]>
    Subject: [your-subject]

    Message Body:
    [your-message]

    ————————

    Thank you as always for your help and support. I look forward to your reply soon.

    Neal

    Plugin Contributor damiarita

    (@damiarita)

    8 years, 5 months ago

    Hi,

    Your issues are related to the CSS of your site.

    I gave you some advice, but you need to contact a web developer who can help you with your specific needs.

    Different CSS rules apply to different screen size. So, it is normal that mobile doesn’t work with my advice.

    I am sorry I can’t help you more, but I can’t go into the details of each user.

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 5 months ago

    Hi Damiarita.

    Thank you for getting back to me. I really appreciate your help and suggestion about resolving my issue. Let me see if I can find a developer who can hep with this issue.

    Thank you once again for all of your help.

    Thread Starter assertiveminds

    (@assertiveminds)

    8 years, 5 months ago

    Hi Damiarita,

    Thank you for the fix for the iPhone. I updated the new update and it works. I was able to now understand why I was not getting the Inter Phone number on my email during the contact form 7 sign up on my site. It was because I did not have the email settings done right. I did make some changes the now it works.

    After reviewing your comments on how to set this up on your plugin page. I used
    use this tag: [{your-phone}] as you indicated, and should print something like +12025550109, but it did not. But, when I changed it to mail-tag [intl_tel-818] based on my contact from 7 configuration. It worked.

    I tried using the [{your-phone}-cf7it-country-name], but it didn’t work, should print a country name. Then, like before, I tried changing the mail-tag to [intl_tel-818-cf7it-country-name], but didn’t work.

    I just wanted to point out the differences and also wanted to share the screen shot. Please let me know if you think if the setting should be corrected to make the mail-tag work like you posted on your plugin information.

    Thank you once again for your support. Appreciate it.

    Neal

    P.S. I can’t send you the screen shot. Hope you can test it on your side. Maybe you can tell how my email setting is from this example of my email message:

    ——–
    From: Sam
    Message:
    Sam
    +9112391389898193720

    [{intl_tel-818}-cf7it-country-name]
    ————

Viewing 15 replies - 1 through 15 (of 16 total)
1 2

The topic ‘Your Mobile Phone Number Display incorrectly’ is closed to new replies.