Adding "mailto:" into CMS for user written email addresses

Ask the community
,
1

Hi,

I’m struggling to find a way to add “mailto:” into CMS automatically whenever users of my site give their email-addresses with a form to the CMS.

I can add this manually to the CMS, but I want this to be done automatically.

The “mailto:” can probably be coded also in the button, but this is where my knowledge ends.

The reason I need this function is that I will be having a button on a READ repeater that connects the user email address from the CMS. The button should open the email client with the right email address from the CMS.

If anyone has ideas how I can have the “mailto:” to the correct place, whether directly in the button on the repeater or to the CMS field that is connected to the button, I would be more than happy to hear from you.

image
image388×394 36.6 KB

2

You can link the button via code based on the email in a database

$w(“#repeater”).onItemReady(($item, itemData, index) => {

//in case the mail field is text
$item(“#button”).link = “mailto:”+itemData.mymail

//in case the mail field is url make it a string
$item(“#button”).link = “mailto:”+(itemData.mymail.toString())
});

3

You’re thinking about this wrong, since all mails, when linked, should contain “mailto:” it is not somehting that should be saved along with the data, rather added to it

So let’s say you have a dataset #dataset and you want #button’s link to be mailto: and the email field

You can do this:

$w('#dataset').onReady(() => {
    const item = $w('#dataset').getCurrentItem()
    $w('#button').link = 'mailto:' + item.email
})
4

While the other answers are possible approaches, they have a small flaw that can be fixed by adding a few extra lines of code. Because if there is no email address in the email field, then the button will seem like it’s “broken”. Broken links hurt SEO.

To add on to my favorite approach (if this was a button on a dynamic page):

this is what that would look like slightly modified:

$w('#dataset').onReady(() => {
    let current = $w('#dataset').getCurrentItem()

if(current.email){
    $w('#button').link = 'mailto:' + item.email;
} else {
    $w('#button').hide();
}

And now that I reread your question, it seems your button will be on a repeater which means the code will need to be on Repeater item onReady like the first answer suggests. But again,

Modified like:

$w(“#repeater”).onItemReady(($item, itemData, index) => {

if(itemData.email({
$item(“#button”).link = “mailto:”+itemData.email;
} else {
$item(“#button”).hide();
}

});

But to answer your original question, how do you modify the value before it is saved into the database collection:

(Assuming you have custom coded a form and you are not using Wix Forms)

You create some code for onBeforeSave to setFieldValue. Something like:

let theirAnswer = $w('#emailElement').value
let newValue = “mail:to” + theirAnswer;


$w("#myDataset").setFieldValues({
  emailField: theirAnswer,
  emailForURL: newValue,
});

https://dev.wix.com/docs/velo/api-reference/$w/dataset/on-before-save

https://dev.wix.com/docs/velo/api-reference/$w/dataset/set-field-values

1 Like