Is it still bad to place my email address and phone # as text on my site?

Elements
1

I know this was bad in the past. Is it still true? How about placing a mailto: link?

2

Yes, ideally you used the built-in PHP form, or perhaps the @elementsbot has some easy ideas on how to hide your email address from spammers?

1 Like
3

Hi Bruce,

Great question! Displaying your email address as plain text on your website can indeed invite unwanted attention from spammers. Here are some better ways to protect your contact details:

  1. Use a Contact Form: The most effective method is to use a contact form which channels communications without revealing your email address. You can use the built-in PHP form that Elements offers, maximizing the Power of Elements™.

  2. Mailto Links: Though a mailto link is more convenient for users, it’s still susceptible to being scraped by spambots. If you need to use it, consider using JavaScript to generate the email address dynamically on the page, which can help obscure it from basic scrapers.

  3. Obfuscate with JavaScript: With Elements, you can easily add a small JavaScript snippet that assembles the email address dynamically. This way, web crawlers have a harder time picking it up.

  4. Use Online Services: Services like reCAPTCHA can also help protect forms against spam bots, ensuring messages come from real users.

If you need specific code examples for these methods, feel free to ask!

Hope this helps keep your inbox spam-free!

4

I have a problem with the Element Form and my current version of PHP as Ben pointed out in another post of mine. There may be a way for me to update the PHP which is shown in a video on my host’s site. Too bad their support doesn’t know that!

5

@elementsbot I’d like to see code examples for obscuring an email address.

6

Here are a few code examples for obscuring your email address on a webpage using JavaScript:

Method 1: Basic JavaScript Obfuscation

You can create the email address dynamically, which helps keep it hidden from basic web scrapers.

<span id="email"></span>
<script>
  // Obfuscated email parts
  const part1 = "yourname";
  const part2 = "example.com";
  const at = "@";
  document.getElementById("email").innerHTML = part1 + at + part2;
  document.getElementById("email").href = "mailto:" + part1 + at + part2;
</script>

Method 2: Advanced JavaScript Obfuscation

This approach adds an extra layer by encoding parts of the email address:

<span id="contact-email"></span>
<script>
  // Encode your email address
  const email = ["yourname", "example", "com"];
  const address = `${email[0]}@${email[1]}.${email[2]}`;
  const encoded = address.replace(/@/, "&#64;").replace(/\./g, "&#46;");
  document.getElementById("contact-email").innerHTML = `<a href='mailto:${encoded}'>${encoded}</a>`;
</script>

Method 3: Tailwind Integration

If you’re using Tailwind with Elements, you can add classes directly for styling.

<a id="email-link" class="text-blue-600 hover:underline"></a>
<script>
  const email = ["yourname", "example", "com"];
  const address = `${email[0]}@${email[1]}.${email[2]}`;
  const encoded = address.replace(/@/, "&#64;").replace(/\./g, "&#46;");
  document.getElementById("email-link").innerHTML = encoded;
  document.getElementById("email-link").href = `mailto:${address}`;
</script>

Feel free to further customize these examples to fit your needs! If you’re encountering specific issues when implementing these examples, let me know!

7

@elementsbot how would these code examples be deployed in an Elements text component?

8

To deploy these code examples in an Elements text component, follow these steps:

  1. Add a Text Component:

    • In Elements, select where you want to insert the email obfuscation code and add a Text Component.

  2. Insert the HTML and JavaScript:

    • Enter the edit mode for your Text Component.

    • Paste the HTML part of the code examples directly into the text editor. For instance, use:

      <span id="email"></span>

    • After the HTML, switch to the JavaScript editor (Elements allows you to include JS directly or use the advanced settings if needed) and insert the JavaScript snippet. Ensure it matches the provided example, as shown below:

      // Obfuscated email parts
const part1 = "yourname";
const part2 = "example.com";
const at = "@";
document.getElementById("email").innerHTML = part1 + at + part2;
document.getElementById("email").href = "mailto:" + part1 + at + part2;

  3. Preview & Test:

    • Use the Elements preview feature to ensure your email address appears correctly and the link functions as intended.
    • Check to ensure that your email is properly obfuscated and not displayed in the HTML source code.

  4. Styling with Tailwind (Optional):

    • If you’ve used the Tailwind approach, make sure your component includes the necessary Tailwind classes. Tailwind styles can be added directly in the Text Component if that’s your preferred styling method, for example:

      <a id="email-link" class="text-blue-600 hover:underline"></a>

By leveraging the powerful and intuitive Elements interface, incorporating JavaScript for email obfuscation becomes a seamless process, enhancing both the security and functionality of your website! Feel free to ask if you have any more questions.

9

@dan I thought it would be a good test of the bot, but I’m not sure what it is suggesting will work in a text component as you cannot paste HTML in one and have it work.

Will see if there is a way to make this work with a custom component.

10

It seems Bruce is experiencing an issue with implementing email obfuscation using Elements due to limitations in pasting HTML directly into a text component. Let’s clarify how you might achieve this with a Custom Component instead.

Here’s how you can take advantage of the flexibility offered by Elements:

  1. Create a Custom Component:

    • Instead of using a standard Text Component, create a Custom Component. This allows you to add more complex HTML and JavaScript code blocks.

  2. Insert HTML and JavaScript:

    • Open your Custom Component editor within Elements.
    • Add your HTML structure (like <span id="email"></span>) and JavaScript for obfuscation directly there.

  3. Save and Deploy:

    • After coding your Custom Component, save it and place it where needed on your webpage.

  4. Using Tailwind for Styling:

    • If desired, make use of Tailwind CSS classes for styling, directly in your component.

This approach should help in integrating JavaScript email obfuscation effectively within Elements. If you need to explore more details on creating Custom Components in Elements, the official documentation from Elements Docs can be a useful guide.

If you have any further questions or if anyone else wants to explore specific capabilities of Elements, feel free to ask! :raising_hands:

11

Yeah, I’m not sure @elementsbot quite has the knowledge yet, especially as the manual still isn’t finished. He’ll definitely get better over time.

I did a quick test, and you can set an ID on a text selection I(n a text component), so I highlighted the text I wanted as the email address and applied the ID ‘contact-email’. This seemed to work just fine. I added the required Javascript to a Custom Component.

https://share.cleanshot.com/pqnMwFlk

Although I’m honestly not sure how secure that really is, especially since AI can easily read and scrape web pages. A contact form is still the best way to go imho.

12

Here’s a summary of the discussion so far, and some guidance on how to handle email obfuscation using Elements:

Discussion Summary

  • Protection Concerns: Displaying an email address openly on a site can lead to spam. Various methods like contact forms and JavaScript obfuscation were suggested as protective measures.
  • Implementation Challenges: Bruce faced challenges using Elements’ text component due to limitations in pasting HTML.
  • Custom Component Solution: Creating a custom component within Elements allows more complex HTML and JavaScript, addressing those limitations.
  • Dan’s Experiment: Dan mentioned successfully using an ID on text within a text component and adding JavaScript in a custom component.

Recommendations

  1. Use a Contact Form: This is the most secure way to avoid exposing your email address while enabling user interaction.

  2. JavaScript Obfuscation: If you choose to display an email dynamically:

    • Use a Custom Component in Elements.
    • Add the HTML and JavaScript directly within this component.
    • Optionally, style using Tailwind CSS.

  3. Advanced Approach (Dan’s Input):

    • Assign an ID to a text selection within a text component.
    • Use a linked custom component for JavaScript.

  4. Refer to Elements Documentation: Elements Docs can be valuable for detailed steps on custom components.

  5. Regular Updates: Keep abreast of new Elements features via their YouTube Channel for the latest tips and best practices.

It’s clear that while Elements allows flexibility with Custom Components, always weigh the benefit of obfuscation methods against potential vulnerabilities. A contact form remains the superior solution for mitigating spam risks.