[Resolved] Hi, I am a beginner and I’d like to make my custom phone field clickable

[Author]

Posts

[Jas]

In the past, I figured out that I can do this by adding 053-233-603 into the text editor. But now that I am using toolset to create a directory, I'm not sure how to do this as I don't see anywhere where I can add this href within the custom field selections for phone, and so I thought maybe I'd add a standard link to accomplish the same and looked for "link" under custom fields, I didn't see that either....I read in another support thread that this isn't a built in option, but it seems like nowadays, it should be? (as I would imagine anyone looking up a phone number on a directory via a mobile site would want the ability to click to call?)

Tell us what you are trying to do?

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

[Jas]

I see now that I can add that href right into field on backend and it will link and display properly on front end. however if I just want a staff member to enter data including phone number, I wouldn't want them to have to add that href each time if possible, just the phone number and have it automatically convert to a linking/callable/clickable number on the front end.

Also I tried adding a button module (Divi) and I can't seem to make the phone number a button following the documentation I've found on that. I added button module then added shortcode for phone into button text, (and tried adding it to URL) but then nothing shows on front end....

[Noman]

Hi Jocelyn,

Thank you for contacting Toolset support. Are you using custom post field or custom user field for phone number? Please provide screenshot where you have phone field in back-end.

- Please provide link to the front-end screen where you have displayed this field.

- If you are using custom post field for phone number, then use this shortcode:

<a href="tel:[wpv-post-field name="phone-field-name" output='raw']">[wpv-post-field name="phone-field-name" output='raw']</a>

- If you are using custom user field for phone number, then use this shortcode:

<a href="tel:[wpv-user field="wpcf-custom-user-field" output='raw']">[wpv-user field="wpcf-custom-user-field" output='raw']</a>

Thank you

[Jas]

I'm using a custom post field for the phone number. Currently I enter phone number right into the post field within the single service page on the back end as 053-233-603, and then it shows up correctly as a link on the front end, but that means my secretary or (anyone submitting via a front-end form in future) can't just enter a normal phone number without the href each time in order to produce a "clickable" phone number on a mobile.

[Noman]

Hello Jocelyn,

You need to add the following shortcode in your View or Content template or Page (wherever you are displaying this field) and do not add href in phone number field -- see attached screenshot.

<a href="tel:[wpv-post-field name="phone" output='raw']">[wpv-post-field name="phone" output='raw']</a>

- If still any issue, please provide temporary access (WP-Admin and FTP Login info) to your site (preferably staging site), so that I can look into your setup and check the issue.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please provide View/CT/Page Edit link and front-end link.

Thank you

[Noman]

Hello Jocelyn,

I have updated the Content template with this shortcode and now phone field is clickable:

<a href="tel:[types field='phone' output='raw'][/types]">[types field='phone' output='raw'][/types]</a>

Thank you

[Jas]

excellent, now is there a way to have the phone numbers spaced a bit? since i am listing multiples and they just kind of show up together in one long run-on. I'd like them separated perhaps with a phone icon for each new phone number and maybe on separate lines. Do I just add a phone icon directly into the field i guess for each phone number? do I have to just add <p> directly into field to put on new line. (again, if possibly I am trying to avoid anything that a front-end community user submitting a phone number wouldn't know how to do.)

[Noman]

I have added the icon for phone field, you can change the icon as you want -- see attached screenshot.

[Noman]

Also as I said earlier, please do not add href or any html in phone number field , html is added in Content temlpate-- see attached screenshot.

[Jas]

fantastic customer service. Thank you so much for your patience!!!