Dynamic Content > Email And Phone Fields Should Create The Link Automatically
Chris
Hi,
I notice when using Dynamic Content and the fields for Email and Phone, that no link is created for these fields.
When viewing the fields on a PageBuilder page, it just shows the wording of the email or phone - they are not links that can be clicked (e.g. the mailto: and tel: URL elements are not added).
If we create a Dynamic Content Link field, we can put the full e.g. mailto:[email protected] in - however, to website visitors, this link is seen in full, so they see the mailto: portion.
Not ideal.
The feature request is that a Dynamic Content Field of either Email or Phone should either force, or allow a selection to be made as to whether the email or phone number entered is automatically turned into the correct link.
And also, for a Link field, we can add the link text and the link URL - so e.g. a Link can be shown to users as Click Here and when clicked the URL loads (in a new tab etc. as also chosen).
I've been trying to create a Staff list page, and the email being a link is essential - however at the moment, this isn't possible without us showing the mailto: words within the email text being shown to visitors.
Chris
Mehtaz Afsana Borsha
Accepted AnswerHi Chris,
Thanks for contacting us and for your suggestions. I will add it to our feature request list so that our team can take care of it.
-Regards.
Chris
Accepted AnswerIt would be amazingly useful, I've just been talking to another user who thought this was already possible, then realised it wasn't :)
Paul Srch
Accepted AnswerI would make this option - if created - something that can be opted out of in the settings; I would probably have it disabled by default so that you manually have to enable it.
The reason I suggest this is, I don't want bots to come and scrape by phone number and especially my email address. I get enough spam as it is.
Robert Stelle
Accepted AnswerHi Chris here's a simple solution, as long as it's not released with an update:
- Open the page in the page builder where you created the "Collection" and select the main section where the "Collection" is located.
- In the "Section Settings," go to "Section ID" and assign a name.
- Select "Phone" in the "Collection" and go to "Link" in the settings. Select URL and enter tel:
- Then select "Email" in the "Collection" and go to "Link" in the settings. Select URL and enter mailto:
- Safe your page and go to your template -> "System" -> "Site Template" and select your template.
- In the folder structure, go to the "js" folder and open the custom.js file (if it doesn't exist, create a new one).
- Insert the following code:
document.addEventListener('DOMContentLoaded', () => {
const mainContainer = document.getElementById('yoursectionname'); // IMPORTANT: dont forget to set your sectionname here
if (!mainContainer) return;
const links = mainContainer.querySelectorAll('.sppb-dynamic-content-text__link');
links.forEach(link => {
const href = link.getAttribute('href');
const textElement = link.querySelector('.sppb-dynamic-content-text');
if (!textElement || !href) return;
let clone = textElement.cloneNode(true);
clone.querySelectorAll('i').forEach(i => i.remove());
let content = clone.textContent.trim();
if (href.startsWith('tel:')) {
let phone = content.replace(/\s+/g, '').replace(/\//g, '');
if (phone.length > 0) {
link.href = 'tel:' + phone;
}
} else if (href.startsWith('mailto:')) {
let email = content;
if (email.length > 0) {
link.href = 'mailto:' + email;
}
}
});
});- Safe the changes. Each element that is now loaded will have a clickable phone number and email address.