Support

Account

Home Forums Feature Requests Phone Number Field

Solving

Phone Number Field

  • I tried searching the forums for this but couldn’t find anything. One of the most common fields I use on all the sites I build (Senior Developer at a small Agency) is a phone number field. Originally I just used a text field but that’s prone to user entry errors. Eventually I ended up writing my own custom code that takes a straight number field, and formats it using PHP with regular expressions for the front end display. This is alright but I end up needing to use a combinations of checkboxes to add extensions, and more custom fields to allow users to select the format () vs – or | etc…

    So what I’m imagining would be an ideal solution/feature would be a phone number field with the following:

    1. Ten digits can be entered, with an extra box for extensions.
    2. Javascript to validate entry.
    3. A select box with a few common formats (888) 123-1234, 888-123-4567, etc.
    4. I imagine it could be stored as an array like this:
    array(
    ‘areacode’ => ‘888’,
    ‘prefix’ => ‘123’,
    ‘linenumber’ => ‘4567’,
    ‘extension’ => ‘300’,
    );
    // This would hopefully allow developers to easily access each section for custom formatting.

    I know this would take some time to actually test, develop, and release but I really believe it would be a widely used and appreciated feature. I know I would use it on the next 20+ sites that I’ll end up building in 2016.

    Thanks for taking the time to read this, ACF is my favorite plugin of all time. Keep up the great work Elliot, you’re making the world a better place!

    • James

    • April 13, 2016 at 9:31 pm

    Hi @dsthedev,

    Thanks for the post.

    I have passed on this info to Elliot and hopefully this feature will see its way into the plugin sometime soon.

  • HUGE +1 for this feature.

    • arbeca

    • November 23, 2016 at 10:42 pm

    +1

    At least a format like international prefix + number would be great.

  • +1
    It would be very helpful to have this!

  • Just speaking in general as I’m not the developer and do not know his thinking on this.

    
    array(
    ‘areacode’ => ‘888’,
    ‘prefix’ => ‘123’,
    ‘linenumber’ => ‘4567’,
    ‘extension’ => ‘300’,
    );
    

    is great in the US, but is not consistent the world over. I know from experience attempting to validate phone numbers that people enter that it pretty much impossible to account for every way that phone numbers are used in the world. Unlike many things, there isn’t an international standard for phone numbers. Any validation of a phone number would have to be done based on need. Even the html element <input type="tel" /> does not validation numbers unless you provide the pattern to validate against https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/%3Cinput_type=_tel_%3E. My guess is that this is a part of the reason there is no telephone field in ACF.

  • Hi John.

    I would tend to agree with what you are saying in general. But nearly all of the popular forms plugins (Gravity, Formidable, Ninja) have phone number fields that validate against US, international, and (I believe) even a custom definable pattern.

    They all make it work. Something similar in ACF is all that we are looking for.

  • Above James said he passed it on to the developer. I can’t say what the status of it is. Like I said, I’m not the dev for ACF, I was just offering my opinion. For me it’s just as easy to create a text field for the phone and validate that against what I want and I would probably never try to parse it into separate parts, but then I’ve never found a use for doing so.

  • @hube2 There are some libraries to easily valid a phone number : https://github.com/giggsey/libphonenumber-for-php

    But you’re right : outside US, the phone parts don’t make sense. Even in US, the parts work for a cell number ?

    @webendev Apparently Gravity Forms valid only US format. The International option valids… nothing

    Code snippet from the plugin :

    $phone_formats = array(
    			'standard'      => array(
    				'label'       => '(###) ###-####',
    				'mask'        => '(999) 999-9999',
    				'regex'       => '/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$/',
    				'instruction' => '(###) ###-####',
    			),
    			'international' => array(
    				'label'       => __( 'International', 'gravityforms' ),
    				'mask'        => false,
    				'regex'       => false,
    				'instruction' => false,
    			),
    		);
  • You should send these feature requests and ideas to the developer by opening a new support ticket https://support.advancedcustomfields.com/new-ticket/.

    There really is nothing that I can actually do put this into ACF except to suggest ways that it can be done using what ACF already offers. Like I said, I’m not involved in development of ACF or making decisions about what goes into it. The people that are don’t really read all the topics here, they depend on other users like us. The dev staff is small and if they read all the topics here they’d never get anything done.

  • I want the keyboard input to change on smart devices. +1 for input type tel. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

  • I’m not sure if you guys are still interested in a phone input, but I’ve put together a little plugin based on International Telephone Input by jackocnr.

    The validation is done simply by Javascript “onblur” event. If the phone is not valid it will be just erased.

    This is the first “release” of the plugin and it’s working quite nice on a personal project. There is no documentation (so far) – sorry.

    If anybody has any ideas or want to help out, just let me know 🙂

    Plugin link: https://github.com/jonyhayama/acf-intl-tel-input

  • @jonyhayama – NICE!

  • @jonyhayama I have started fixing some bugs and making some new features here:
    https://github.com/squarecandy/acf-intl-tel-input

    Let me know if you want to join forces!

  • @squarecandy sure thing! I’ve been quite busy the past few months and didn’t give this little project the proper attention, it weill be nice to have an extra pair of hands 🙂

    • dansarn

    • April 22, 2019 at 10:06 pm

    @squarecandy and @jonyhayama
    This looks neat! I got one question though:
    How can i display the number with the correct language-formatting at the front-end?
    When getting the value with get_field it only show the “+4XYYYYYY”-format, but not with the correct spacing and dashes! What am i doing wrong?

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.