How to Create Prefilled Email Links in HTML

When it comes to sending emails in web applications, a common approach is to build a custom contact form that handles user input, validation, and the sending of messages. However, for simple use cases, there are easier solutions.

In this tutorial, we'll take a quick look at how you can use HTML anchors to trigger default email clients with prefilled inputs.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

How to Create Email Links#

To create email links in HTML, we need to use the <a> tag with the href attribute starting with the special mailto: syntax pointing to the recipient:

<a href="mailto:[email protected]">Get in touch</a>

Clicking on the above link will open the default email client with the recipient being set to [email protected]. You can give it a try using the following link: link with mailto.

The mailto syntax can also be used to prefill the subject line using the subject parameter attached after the email address:

<a href="mailto:[email protected]?subject=💌 This will be the subject">Get in touch</a>

The structure follows the conventional syntax of query parameters. You'll notice that we have spaces in the subject line. This will work fine for most modern email clients.

However, if you need to support old and outdated clients, you can replace spaces with %20 to ensure they're parsed correctly. To see how the above functionality will behave, you can click on this link.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.

Remove ads

---

How to Add Body#

In case you want senders to follow a basic structure when sending emails to you, you can also specify the body using the body parameter in the URL:

<a href="mailto:[email protected]
  ?subject=💌 This will be the subject
  &body=Please provide the following details..."
>
  Get in touch
</a>

Note that the mailto functionality has a limit of around 2000 characters, so keep the body as short as possible. Click on this link if you would like to test the above code.

In case you want to insert new lines, you can use %0D%0A, which is the URL-encoded version of a new line character.

Last but not least, the mailto syntax can also be used to add CC and BCC. Just like with the previous two attributes, this can be chained at the end of the URL using the cc and bcc parameters:

<a href="mailto:[email protected]&[email protected]">Get in touch</a>

In case you need to provide multiple recipients, you can provide a comma-separated list for both parameters. For example, [email protected], [email protected]. To test the cc and bcc parameters, you can use this link.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Create Email Links With JavaScript#

When setting multiple parameters, it can become difficult to read and maintain an email link. We can make it more configurable with the help of JavaScript. The following function can help you dynamically create email links without the use of any libraries:

const addEmailLink = config => {
    const links = document.querySelectorAll('[data-email-link]')
    const params = Object
        .keys(config)
        .filter(key => key !== 'to')
        .map(key => `${key}=${config[key]}`)
        .join('&')

    links.forEach(link => link.href = `mailto:${config.to}?${params}`)
}

// Call it with a configuration object in your application
addEmailLink({
    to: '[email protected]',
    subject: '💌 This will be the subject',
    body: 'Please provide the following details...'
})

To use the above code, call it with the configuration object. The to parameter is required, and the rest are optional. To define an <a> tag as an email link, you can attach a data-email-link attribute to the element:

<a data-email-link>Get in touch</a>

The function will traverse through all elements flagged with the data-email-link attribute and attach the proper href attribute to the DOM elements using the configuration. The parameters are converted into a URL using the following process:

// #1: return the keys of the object as an array
// -> ['to', 'cc', 'bcc', ...] 
Object.keys(config)

// #2: filter out the `to` property from the array
// -> ['cc', 'bcc', ...]
Object.keys(config).filter(key => key !== 'to')

// #3: map through the array and connect each key with its value
// -> ['[email protected]', '[email protected]']
Object.keys(config)
      .filter(key => key !== 'to')
      .map(key => `${key}=${config[key]}`)

// #4: Join the array elemnts into a string using `&`
// -> "[email protected]&[email protected]"
Object.keys(config)
      .filter(key => key !== 'to')
      .map(key => `${key}=${config[key]}`)
      .join('&')

In conclusion, the mailto syntax with anchors is a versatile way to create email links without implementing a custom contact form. However, there are some considerations you need to keep in mind when using the mailto attribute.

This will expose your email address and can potentially be picked up by spammers. If you need to keep the email address private, make sure you don't use the mailto attribute. Nonetheless, mailto provides a quick and easy way to accept emails through your website.