How to make phone number clickable?

Hi @golemsonbi ,

Built it Phone number field in um form isn’t clickable. You need to create a textarea field & enable “Does this textarea accept HTML?” button so that you can write html code inside it. Make sure to use a phone icon and “Phone Number” as field label so that it looks identical to built in phone number field. Here is an example html code for clickable phone number

<a href="tel:5551234567">Call (555)123-4567</a>

Thank you.

Thank you so much bro @mansurahamed!
btw, could you please tell me more detail about this?
I created textarea field & enable “Does this textarea accept HTML?” (in register form), but where to write html code? (in profile form) and could you please guide me how to write that html code?
Please help me!

Hi @golemsonbi,

Please ignore my previous reply & use the built in Phone Number field in um forms and add following php code in the bottom of your child theme’s functions.php file.

add_action('wp_head', 'custom_phone_link', 10);
function custom_phone_link(){
?>
<script>
jQuery( document ).ready(function() {
	var phone = jQuery("div.um-field-phone_number div.um-field-value").text();
   jQuery("div.um-field-phone_number div.um-field-value").html('<a href="tel:'+phone+'">'+phone+'</a>');
});
</script>
<?php
}

It work perfectly!
many thanks bro!
have a nice day!

Hi @mansurahamed!

Great help this post is. I’m glad I searched and found it. I tried it and it worked for me as well. I just wanted to know if you can also let us know how to get this to work for the Mobile Number field as well?

Thanks!

Hi @solernet,

Just replace the class .um-field-phone_number with .um-field-mobile_number. This should work for both phone and mobile

add_action('wp_head', 'custom_phone_link', 10);
function custom_phone_link(){
?>
<script>
jQuery( document ).ready(function() {
	var phone = jQuery("div.um-field-phone_number div.um-field-value").text();
   jQuery("div.um-field-phone_number div.um-field-value").html('<a href="tel:'+phone+'">'+phone+'</a>');
var mobile = jQuery("div.um-field-mobile_number div.um-field-value").text();
   jQuery("div.um-field-mobile_number div.um-field-value").html('<a href="tel:'+mobile+'">'+mobile+'</a>');
});
</script>
<?php
}

This code not working witch User Meta. I have phone number there and nothing going on. How to fix this ?

Hi @mansurahamed!

Both phone and mobile are working for me now!

Thanks!

How to make clickable phone number in um-profile-meta under the name and surname?

Hello mansurahamed,

For whatever reason I cannot get this to work and I really need this. I have followed the above info as exact as possible but my phone numbers are still not clickable. I believe I have added it to the function.php file correctly but wonder if this is where my issue might be. I added to the end but not totally sure if syntax is correct as far as where } should be. Your help would be appreciated.

Thank you.

Hi, I added php code and mobile numbers work fine on Android mobile but land line numbers try to open we page and on iPhone iOS mobile or land line numbers does not work at all?

Any help would be most appreciated.

*web