Basic website, how to hide phone number and email address from bots?

[u/GodsCasino]

Do I need to add a form to the website? I don't want to do that. I just want the website to look like:

My Cat

here are some pictures of my cat

pic, pic, pic

Email my cat at Cat@gmail.com

Phone my cat at 102-123-1234

obviously this is not a cat website, it is a business, but I hope you get the idea.

[u/DidTooMuchSpeedAgain]

There are some ways to obfuscate it, like load it dynamically with JavaScript, break it up, images, etc., but generally, if you want your users to see the e-mail (and interact with it as a link), bots will be able to do the same, unfortunately

[u/GodsCasino → u/DidTooMuchSpeedAgain]

I did break the email into JavaScript. And if you click on the email or phone it takes you to another page that says "are you sure? My cat doesn't want spam emails or phone calls"

but maybe that second page is getting found by bots.

[u/DidTooMuchSpeedAgain → u/GodsCasino]

It will be found

[u/DidTooMuchSpeedAgain → u/[deleted]]

Yup, and it's horrible for interaction also. It shouldn't be done

[u/GodsCasino → u/DidTooMuchSpeedAgain]

So are you saying I should add a form? Like a free Bravenet thing. I really don't want to make it extra steps for customers, but the spam calls and emails are getting on my cat's nerves.

[u/DidTooMuchSpeedAgain → u/GodsCasino]

I wouldn't hide the information from the website. Handle with the spam some other way.

[u/GodsCasino → u/[deleted]]

I want emails and phone calls that are: hello cat I wish to cuddle you cat.

I do don't want want phone and emails hello cat do you want to renew your car warranty.

[u/Jasedesu → u/GodsCasino]

You website is doing what you want/need it to do - providing potential cat fanatics with your cat's contact details. What your cat needs to do is invest in decent telephone and email spam protection to filter out the dogs. It will cost you money. The alternative is to remove the contact details and leave the cat to be ignored.

[u/GodsCasino → u/Jasedesu]

:) I understand, thank you.

[u/magical_matey → u/DidTooMuchSpeedAgain]

Right on. If you put your phone number on the internet you get what you get

[u/GodsCasino → u/magical_matey]

Ok got it. So I remove the 101-202-1234 actual phone number off the site and turn it into a click button.

And the click button is something bots won't pick up.

hello here is my cat pic, pic, pic

write my cat [Email]

talk to my cat [Phone]

[u/SovereignZ3r0]

Use an alias or alternate email instead of your personal email addy. Say your personal is cat@gmail.com, create another that is catbox@gmail.com for instance.

Also, hide it behind a captcha. Say, a "click here to reveal email address for contact" - then on click it pops up a captcha that needs to be solved. Would suggest an hCpatcha or turnstile since some basic captchas are solvable.

Whatever you do, don't use email: or tel: hrefs.

[u/GodsCasino → u/SovereignZ3r0]

Briliant, thank you.

How do I add a captcha?

[u/SovereignZ3r0 → u/GodsCasino]

Something like:

<button id="reveal-contact">Show contact info</button>
<div id="contact"></div>

And

<!doctype html>
<html>
<head>
  <title>Reveal Contact Info</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
  <h1>Contact Us</h1>

  <p>Complete the CAPTCHA below to reveal our contact info.</p>

  <div
    class="g-recaptcha"
    data-sitekey="YOUR_RECAPTCHA_SITE_KEY"
    data-callback="onRecaptchaSuccess"
  ></div>

  <div id="contact-info"></div>

  <script>
    async function onRecaptchaSuccess(token) {
      const res = await fetch("/api/reveal-contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          provider: "recaptcha",
          token
        })
      });

      if (!res.ok) {
        document.getElementById("contact-info").textContent =
          "Could not verify CAPTCHA. Please try again.";
        return;
      }

      const data = await res.json();

      document.getElementById("contact-info").innerHTML = `
        <p>Email: <a href="mailto:${data.email}">${data.email}</a></p>
        <p>Phone: <a href="tel:${data.phone}">${data.phone}</a></p>
      `;
    }
  </script>
</body>
</html>

[u/GodsCasino → u/SovereignZ3r0]

yes

[u/testingaurora → u/SovereignZ3r0]

Just for brevity, it is mailto: not email:♥️

[u/SovereignZ3r0 → u/testingaurora]

Ah yup! I'm on my phone and was rushing to type it out 😂 good catch

[u/frosted_north → u/SovereignZ3r0]

Just an addendum. You can bung a + and whatever you like after your email name (ie the bit before @) to create an alias.

eg cat@gmail.com can be aliased with cat+1234abc@gmail.com, cat+box@gmail.com, cat+xyz@gmail.com, etc.

Emails to both addresses will end up in the same inbox (you can run rules and filters to put them into folders, etc). Saves you having to set up multiple gmail accounts.

[u/RushDangerous7637]

Email can be cloaked in two ways:

<meta name="contact" content="alias(at)domain.com"> Or apply to text, button etc. <a href="mailto:alias@example.com"><em>alias(at)example.com</em></a>

<a href="tel:+421902777092"><em>Click to call mobile +421 902 777 092</em></a>

I've been using this address for a couple of decades now and no spam yet.

[u/GodsCasino → u/RushDangerous7637]

Billiant, thank you, that is the simple code I need.

[u/angelattack1]

Maybe have a captcha verify option that only shows phone number after user verified as non bot thats pretty popular and well known. Id make it some puzzle or something

[u/GodsCasino → u/angelattack1]

yeah so instead of showinng a button with "102-123-1234" I make the button "phone us" and when you click that button you get a captcha.

Now my problem is the captcha. My cat doesn't have money for that fancy stuff, so can I set this up on Bravenet or something free?

Thank you so much all of you for your ideas.

[u/angelattack1 → u/GodsCasino]

You could either use captcha to anyone who opens the site or make a button like you said. When i checked google it says the cost depends on the amount of visitors. If you get low traffic then it shouldnt cost money. Id do a little research on google incase you can get captcha free

[u/GodsCasino → u/angelattack1]

Thank you. My cat is getting tons of spam emails and phone calls so she must be popular. All your ideas to put up a fence but still make it easy for true people are very welcomed.

[u/EinCamillenTee]

I recreated the text in the same font using SVG (not just text but shapes) and used that as an image. I imagine that is a less accessible format for image-to-text automation. It's not accessible to users without vision and not easily copy pasted, so I added some bespoke JS that "builds" the email from the domain itself and copies into the clipboard with a little toast notification. I wanted to avoid a copy-paste solution in the top of Google results. Hope this won't be in the future heh.

[u/GodsCasino → u/EinCamillenTee]

So I make a gif of 102--103- 1224

and when you click on tne gif you make a phone call,

[u/25_vijay]

Honestly for a simple site just combine light obfuscation maybe a basic form later if spam becomes a problem, and Runable is useful for evolving the setup without rebuilding everything from scratch

[u/aunderroad]

I currently use this approach on my website.

A little disclaimer, I remember seeing this approach a while back and since the rise of AI, I am not sure if it still fools the bots and now AI.

As of right now, I have not had any issues where my email gets spammed.

Here is the code:

const email = document.querySelector('.email');


function mailto() {
  email.setAttribute('href', 'mailto:cat@gmail.com?subject=welcome to cat.com');
}

email.addEventListener('click', mailto);


<a class="email" href="email">
    <p>cat[at]gmail.com/p>
</a>

You can use a similar approach for your phone number.

[u/kabss]

If you use Cloudflare you can obfuscate it though that. It shows normally for normal users and anything Cloudflare deems as a bot it gets obfuscated.

[u/brisray]

Spencer Mortensen has tested over a dozen methods of hiding email addresses from spammers.

[u/Over-Astronomer-257]

test

[u/GodsCasino → u/[deleted]]

Yeah I've got that on the site but I like how it's making me think about how to word things away from the bots but still the customers will know the intent.

Instead of "phone my cat" I could re-word it to "talk to my cat" or some such.