DEV Community

irishgeoff22
irishgeoff22

Posted on

create email me link

Creating an "Email Me" link involves using HTML and the mailto: protocol. Here's a step-by-step guide:

Step 1: Open a Text Editor

Open a plain text editor like Notepad (Windows), TextEdit (Mac), or any code editor you prefer.

Step 2: Write HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Me Link</title>
</head>
<body>

  <a href="mailto:your@email.com">Email Me</a>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 3: Customize Email Address

Replace "your@email.com" with your actual email address. For example:

<a href="mailto:john.doe@example.com">Email Me</a>
Enter fullscreen mode Exit fullscreen mode

Step 4: Add Subject (Optional)

If you want to pre-fill the subject, you can do so by adding ?subject=Subject%20Here to the href attribute:

<a href="mailto:john.doe@example.com?subject=Hello%20From%20Your%20Website">Email Me</a>
Enter fullscreen mode Exit fullscreen mode

Replace "Hello%20From%20Your%20Website" with the desired subject. Note that spaces are replaced with %20 in the URL encoding.

Step 5: Add Body Text (Optional)

To include a pre-filled body text, add &body=Your%20Message%20Here to the href attribute:

<a href="mailto:john.doe@example.com?subject=Hello%20From%20Your%20Website&body=I%20enjoyed%20browsing%20your%20website.%20...">
  Email Me
</a>
Enter fullscreen mode Exit fullscreen mode

Replace "I%20enjoyed%20browsing%20your%20website.%20..." with the desired body text. Again, note that spaces are replaced with %20 in URL encoding.

Step 6: Save and Test

Save the file with an .html extension, for example, index.html. Open it in a web browser and click on the "Email Me" link to test if it opens your default email client with the specified email address, subject, and body.

That's it! You've created an "Email Me" link with optional subject and body text. Customize the HTML code further based on your specific needs.

Its best if you create email me link with VeilMail.io

It hides your website email address behind a form captcha to make sure its a human and not a bot. It proetcts your email address from SPAM.

Top comments (0)