I want a 'Contact us' button that opens a new email with a ready subject. How do I write the mailto link correctly?

The shape of a mailto link

The link starts with mailto, a colon and the email address. Then comes a ? followed by the values, each with its name, separated by &:

mailto:sales@example.com?subject=...&body=...

The usual two values are subject and body. Since & separates values, any & inside the text itself must be encoded, or the text is cut off there.

Example: a subject with a colon and a number

We wanted the subject 'طلب عرض سعر: 20 كرتون' (quotation request: 20 cartons). Encoded in 'Component' mode it came out as:

%D8%B7%D9%84%D8%A8%20%D8%B9%D8%B1%D8%B6%20%D8%B3%D8%B9%D8%B1%3A%2020%20%D9%83%D8%B1%D8%AA%D9%88%D9%86

Note the %3A after the word for price: that is the encoded colon, followed by %20 for the space and then 20 as it is. By comparison, in 'Full URL' mode the colon stayed as :, because that mode counts it as a URL structure character. That may work in one email app and fail in another, so 'Component' mode is the safer choice for values.

The message body too

We encoded a body text containing an Arabic comma and an &: 'السلام عليكم، أرغب في عرض سعر & موعد التوصيل' (hello, I would like a quote & a delivery date). In the output the Arabic comma became %D8%8C and the & became %26. Had the & stayed as it was, the email app would have taken the delivery-date part as the start of a new value, and the message would arrive cut short.

Steps

1. Open the URL encoder/decoder, choose 'Encode', then 'Component'.
2. Paste the subject text alone and copy the output.
3. Repeat for the body text if you want a ready message.
4. Assemble the link: mailto:your-address?subject=encoded-subject&body=encoded-body.
5. Put the link behind the 'Contact us' button on your site and test it with a click.

What not to encode

• Do not encode the whole link in one go: the : after mailto and the ?, = and & that build the link would be encoded too, and it would stop working.
• Do not encode the email address itself if it uses ordinary Latin characters.
• Do not encode a value twice: if you see %25 in the output, you encoded text that was already encoded.

Note too that the URL parts table does not appear for mailto links, since it is meant for links starting with something like https://. To check your values, paste each encoded value into 'Decode' and confirm it returns your original text.

If you are setting up your store's contact points, a tidy signature from the Email signature builder rounds off the contact button.