Building Contact Links for Websites

Contact links are a simple way to help website visitors start a conversation without manually copying an email address or entering contact information. The most common option is a mailto: link, which opens the user's configured email application with a recipient address already filled in.

A well-designed contact link can do more than specify a recipient. A mailto: URI can also include a subject and message body, while QR codes can provide a convenient alternative for visitors using mobile devices. The right approach depends on the type of website, the user's device, and how much information should be prefilled.

What Is a Contact Link?

A contact link is a clickable element that helps a visitor initiate communication with a person, business, or service. On websites, email contact links are commonly implemented with the mailto: URI scheme.

<a href="mailto:hello@example.com">Email us</a>

When the visitor activates the link, the browser typically passes the mailto: URI to the operating system, which can open the user's configured email client. The exact behavior depends on the device and installed applications.

Basic mailto: Links

The simplest mailto: link contains only an email address. This is usually the best choice when you want to keep the link short and let the visitor write the message themselves.

<a href="mailto:support@example.com">Contact support</a>

The visible link text does not have to be the same as the email address. Descriptive text such as "Contact support" or "Email our team" can provide a clearer call to action.

Adding a Subject

A mailto: URI can include a subject parameter. This is useful when a website has a specific contact purpose and you want the resulting email to be easier to categorize.

<a href="mailto:support@example.com?subject=Website%20Question">Ask a question</a>

Spaces and other special characters should be URL-encoded when they appear inside a URI. In the example above, %20 represents a space.

Prefilling the Email Body

You can also provide an initial message body. This can help users understand what information should be included in their message or provide a useful template.

<a href="mailto:support@example.com?subject=Support%20Request&body=Please%20describe%20your%20issue.">Request support</a>

The body should be encoded correctly so that spaces, line breaks, ampersands, and other reserved characters do not interfere with the URI. For longer or more complex messages, generating the link programmatically is generally safer than manually constructing it.

Using Multiple mailto: Parameters

Multiple parameters can be combined in the same mailto: URI. Common fields include subject, body, cc, and bcc.

mailto:support@example.com?subject=Support%20Request&cc=team@example.com&body=Please%20describe%20your%20issue.

Parameters are separated using an ampersand. Because the complete value is a URI, characters that have special meaning in URLs may need encoding.

Encoding Contact Links Correctly

URL encoding is important when constructing contact links dynamically. Characters such as spaces, ampersands, question marks, and line breaks can have special meanings in a URI.

const email = "support@example.com";
const subject = encodeURIComponent("Website Question");
const body = encodeURIComponent("Hello, I have a question about your service.");

const href = `mailto:${email}?subject=${subject}&body=${body}`;

Using encodeURIComponent() for parameter values helps prevent user-provided text from accidentally changing the structure of the mailto: URI.

Choosing Good Link Text

The visible text of a contact link should clearly describe what happens when the visitor activates it. Avoid vague labels such as "Click here" when a more descriptive action is possible.

• Email support
• Contact our team
• Send us a message
• Email sales
• Request technical support

Clear link text is also helpful for accessibility because screen-reader users may navigate through links without reading the surrounding paragraph.

Email Links vs Contact Forms

A mailto: link and a contact form solve slightly different problems. A mailto: link is quick to implement and gives the visitor direct control over the email. A contact form keeps the interaction inside the website and allows the server to process the submission.

For a simple personal website, a mailto: link may be enough. For support systems, lead forms, applications, or workflows requiring validation and storage, a contact form is often more flexible.

Using QR Codes for Email Contact

QR codes can provide another way to start an email conversation, particularly on websites viewed from another device. A QR code can encode a mailto: URI containing a recipient, subject, or message body.

mailto:hello@example.com?subject=Hello

A visitor can scan the QR code with a phone and open the corresponding email action. This can be especially useful on desktop websites, posters, presentations, printed materials, and business cards.

Using QR vCard Links

If the goal is to share complete contact information rather than simply start an email, a vCard QR code can be more appropriate. A vCard can contain information such as a person's name, organization, phone number, email address, website, and other contact fields.

This makes QR vCards useful for business cards, event profiles, conference booths, professional websites, and other situations where visitors may want to save contact information rather than immediately send an email.

Validating Email Addresses

When contact links are generated from user-provided addresses, validating the email address before constructing the link can prevent malformed output. Validation can check whether the input follows the expected email syntax.

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

Contact Links on Mobile Devices

Mobile visitors may have different email applications and system configurations from desktop users. A mailto: link normally relies on the operating system and browser to determine which application handles the URI.

For this reason, avoid assuming that every visitor will see exactly the same behavior. A useful website can provide an alternative contact method when email is particularly important.

Contact Links and Accessibility

Contact links should be usable with keyboards, screen readers, and other assistive technologies. Use semantic anchor elements for links and provide descriptive text that explains their purpose.

<a href="mailto:support@example.com" aria-label="Email technical support">
  Email technical support
</a>

Avoid relying only on icons to communicate that an element opens an email application. If an icon is used, accompanying accessible text or an appropriate accessible name should make the action clear.

Protecting Public Email Addresses

A contact link containing a real email address also exposes that address in the page source. This can make it available to automated crawlers and spam harvesting systems.

If spam harvesting is a concern, consider whether the address needs to be publicly exposed at all. Depending on the website, possible alternatives include a contact form, email obfuscation, a dedicated public mailbox, or a separate contact workflow.

Common Contact Link Mistakes

• Forgetting the mailto: scheme and using an invalid URL.
• Leaving spaces and reserved characters unencoded in parameters.
• Using excessively long prefilled message bodies.
• Exposing private email addresses unnecessarily.
• Using vague link text such as "Click here".
• Assuming every device has the same email application configured.
• Relying on client-side validation for security-sensitive workflows.

When to Use a Mailto: Link

A mailto: link is a good choice when the primary goal is to let visitors quickly start an email conversation. It requires little code and works well for simple contact addresses such as support, sales, or general inquiries.

• Personal websites
• Simple business contact pages
• Support email shortcuts
• Sales contact links
• Email links inside documentation
• Email actions in web applications

When to Use a Contact Form

A contact form is usually preferable when you need structured information, server-side validation, spam protection, file uploads, message storage, or workflow automation.

Forms also allow the destination email address to remain on the server instead of being exposed directly in the page. However, they require additional engineering and should be protected against automated submissions and abuse.

Best Practices for Website Contact Links

• Use a standard mailto: URI for simple email actions.
• URL-encode subject and body values.
• Keep prefilled content concise and useful.
• Use descriptive link text.
• Validate user-provided email addresses.
• Consider QR codes for desktop-to-mobile contact workflows.
• Use vCard QR codes when sharing complete contact details is more useful.
• Avoid exposing private addresses unnecessarily.
• Provide an alternative contact method when appropriate.
• Test contact links on both desktop and mobile devices.

Testing a Contact Link

Before publishing a contact link, test the complete interaction rather than checking only whether the HTML is syntactically correct. Verify that the correct recipient is used, the subject appears as expected, and special characters in the message body are handled correctly.

It is also useful to test the link in different browsers and on different device types. The resulting email application can vary depending on the user's operating system and configuration.

A Practical Contact Link Strategy

For most websites, the simplest approach is to start with a clear mailto: link and add only the parameters that genuinely help the user. If the website has more complex requirements, move to a contact form rather than building an increasingly complicated mailto: URI.

QR codes can complement either approach when users need to transfer contact information from a desktop screen or printed material to a mobile device. A QR email code is appropriate for starting a message, while a QR vCard is better when the goal is to save a person's complete contact details.

Conclusion

Building contact links for websites is straightforward, but a few details make a significant difference. mailto: links provide a lightweight way to start email conversations, while URL encoding allows subjects and message bodies to be included safely.

For more advanced workflows, contact forms provide greater control over validation and spam protection. QR email and vCard codes are useful alternatives when contact information needs to move easily between screens and mobile devices. The best solution is the one that keeps communication simple while respecting accessibility, privacy, and usability.