Dynamic Lists linking to individual email addresses

Hi,

I’ve created a dynamic list to show Team/Staff Photos, Their Names, Job Titles and email addresses - All this displays perfectly (visually), but the problem I’ve encountered is ‘Individual Email Links’.
It links to the dynamic field content and displays fine, but I can’t have the actual email link to - Mailto - the individual addresses (only seem to be a one that can be created and made generic for all).

Please tell me I must be doing something wrong…

Many thanks
Ben

Please share your public link so folks can take a look at it.

Hey @ThinKingCr8tion - try using a URL link instead of an email link. Create a new URL field in the dynamic collection for the “mailto” URL of their email address (like “mailto:info@metaflare.com”). Then, create a link block that displays their email address, but set the link to be equal to the dynamic URL email field, like this:

Hope this helps! :sunny:

Zack at MetaFlare Media & Design

Hi,

Please take a look at the ‘share link’:
https://preview.webflow.com/preview/the-box-factory?preview=ef66d92ede4a19a46db549f9c89db750

I have tried the email link, and the URL to code a mailto<etc. And a I’ve tried adding a dynamic embed with the following code: [email address goes here]

But no joy.
I’d really appreciate anyones help on this.

Many thanks
Ben

Sorry Zack, I’ve just re-read your suggestion and implemented it.
It’s seems to work fine - So a huge thanks for that.

One last thing though - This method opens a blank web page when/after the email addresses are clicked - Can this be stopped?

Thanks again
Ben

@ThinKingCr8tion - I noticed the same thing. I believe this is a problem with the browser settings though, apparently not the method we are using. I wasn’t sure so I tried with a normal Webflow email link and it does the same thing.

I’ll keep looking into this or maybe some smart person will drop by and clear this up for us.

EDIT: Well, maybe this is a Webflow issue afterall? Check this link:

If you follow their example link, the problem does not occur. But if you embed that code into webflow, you get that extra tab created. That’s curious…

Apparently this is a bug, but last they tried, they could not reproduce it? Here’s another thread regarding the same problem: email-mailto-link-property-opens-new-tab

  1. Try using a plain text field for the email address.
  2. Then use a Dynamic Embed in place of the link
  3. then put in this code:
    <a href="mailto:[replace me]">[replace me]</a>

Then in your dynamic embed, replace the replace me with that dynamic field

@PixelGeek - I tried the dynamic embed option, but the problem of a new tab opening when you click on the email link still occurs. However, after you publish the site, if you click on the mailto link, it works correctly and does not open a blank tab.

@ThinKingCr8tion - Try publishing your site, visit the published URL, and then try the email link. The problem does not seem to occur on a published site.

Thank you PixelGeek,

Your suggestion sounds great, but I’ve got to be honest… I don’t fully understand it - I’d really like to try and implement it, so could I ask you to try and explain it to me (as an idiot) in a little more detail please?

Cheers
Ben

@ThinKingCr8tion - After you published the site, did you still get the problem of a new tab popping up when you follow the email link?

Regarding the dynamic embed, here is a nifty video that explains how it’s done

Basically what you need to do is add an Embed component (this allows you to inject a bid of custom code into a section of your site).

Place the embed component inside of your CMS wrapper:

Once you drop the embed component in, an editor will pop up which will allow you to type or paste in some code. Paste in the following code:

<a href="mailto:example@gmail.com">This is the text for this link.</a>

Highlight sections of the code you want to replace with dynamic content. Then click the + Add Field button in the top right. This allows you to dynamically insert a field into the code you just pasted in. Replace the email address in the code above with the Text Field email address from your dynamic collection. You can also replace the link text with the email address if you want to.

Try to publish the site after you add this functionality - I was getting that extra tab pop-up from the preview version of the site, but the published version works fine.

Hope this helps!
Zack @ MetaFlare

After publishing the site, there was no blank web page opening up : ) - should of checked that first I guess…

Thank you for all your help - Problem Solved.

This works great, but we should absolutely get an email, phone number and map field on collections.

oh the wishes :slight_smile:

+1 on this feature request :slight_smile: