Support

Account

Home Forums Backend Issues (wp-admin) Phone field with href="tel:" link

Solving

Phone field with href="tel:" link

  • No problem @rmooreadrearubin-com. I will write it down here:

    First, I created a button and inserted acf in the text field:

    image 1

    Then applied css class for this button in the advanced section:

    image 2

    and at the end I added your script in the Elementor Custom Code:

    image 3

    Any ideas?

  • Hi @brevalo

    Ok, I see 2 problems. Edit your button again and both your Text and Link have to point to ACF link (just like how you have the text). The 2nd thing is in the Elementor Custom Code, change it to <body> – End. The page needs to load first before the script activates. Also, check your quote marks in your script. Quote marks change when you copy them from sites and can screw up your code.

    Let me know if that helps.

    Robert

  • @rmooreadrearubin-com why I have to change it to <body> – End? Button is in the middle of the page. <body> – End will apply in the footer

    And the second question: Are exclamation marks normal in Elementor Custom Code as they are in your screenshot?

    Thank you.

  • Good morning @brevalo,

    The reason why you want the script at the end is that the page needs to load first so that the script can find what to change. If you put the script on top, then the script will execute first before the page loads and won’t find anything to change.

    Exclamation marks? There are no exclamation marks in the script. You have to be careful with the quote marks ” “. Single and double quotation marks are common ‘ ‘ or ” “. Below is the script that I used for the ACF links.

    <script>
    (function($){
    $(“.phoneButton a”).attr(“href”, function ( index, currentvalue) {
    var url_format = currentvalue.replace(/(^\w+:|^)\/\//, “”);
    $(this).attr(“href”, “tel:” + url_format);
    });

    })(jQuery);
    </script>

  • Hi, @rmooreadrearubin-com

    Here are exclamation marks shown in the screenshot you uploaded.

    image1

  • That is Elementor giving you a tip about the code. If you mouse over it, it will say that you should use single quotes.

  • Hey ACF/Elementor Friends πŸ™‚

    Here are some snippets that are working on my client’s site:

    PHONE MAILTO

    // Convert Mobile to tel link
    add_filter('acf/format_value/name=ACF_MOBILE_FIELD_NAME', 'convert_phone_to_link', 20, 3);
    
    function convert_phone_to_link ($value, $post_id, $field) {
    	if (!$value) {
    		return $value;
    	}
    	$tel_link = preg_replace('/[^0-9]/', '', $value);
    	$value = '<a href="tel:'.$tel_link.'">'.$value.'</a>';
    	return $value;
    }

    EMAIL MAILTO

    // Convert Email to mailto link
    add_filter('acf/format_value/name=ACF_EMAIL_FIELD_NAME', 'convert_email_to_link', 20, 3);
    
    function convert_email_to_link ($value, $post_id, $field) {
    	if (!$value) {
    		return $value;
    	}
    	$email_link = $value;
    	$value = '<a href="mailto:'. $email_link .'">'. $value .'</a>';
    	return $value;
    }
  • $app_phone_number = get_field(‘xxx’);
    $code = ‘+48’

    <?php
    if ( (strpos($app_phone_number, $code) !== false) && strlen($app_phone_number) > 11 ) {
    $country_code = substr($app_phone_number, 3);
    } else {
    $country_code = $app_phone_number;
    }
    $tel_link = preg_replace('/[^0-9]/', '', $app_phone_number);
    ?>
    
    <a href="tel:+<?php echo $tel_link; ?>"><?php echo $country_code; ?></a>
Viewing 8 posts - 26 through 33 (of 33 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.