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>
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>
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>
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>
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)