Email Us Button Widget
Turn your email address into a proper button that opens the visitor's own mail program with everything ready: your address in To, a subject that tells you where the message came from, and a short template in the body so you get the details you need the first time.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
Fill in the required fields above - until then this code shows nothing on your site.
<div data-a2z-kit="email-us-button"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
RFC 6068 defines mailto: links with optional header fields, and the two every mail client honours are subject and body. The button writes mailto:[email protected]?subject=...&body=..., percent-encoding both values so that an ampersand in a subject cannot start a new field, a question mark cannot end the address, and line breaks in the body template survive as %0A. A template such as 'Name:', 'Preferred day:' on separate lines therefore appears as a small form inside the email. The address must be a plain mailbox - letters, digits, dots, plus, dash and underscore before the @, and a real domain after it - so pasted text with hidden extra recipients (?cc=) or quotes is refused. Turn on 'show address' to print the address under the button: visitors on a shared or work computer without a mail program can copy it from there. Brand style uses the A2Z indigo with white text; outline and soft tints suit quieter pages.
Method
- address valid when it matches local@domain with local part [A-Za-z0-9._+-]{1,64} and a dotted domain (A2ZNetworks.isEmail)
- href = mailto:<address>?subject=<enc(subject)>&body=<enc(body)>; empty fields omitted
- enc = encodeURIComponent plus ! ' ( ) *; CR/LF -> %0A
Worked examples
Appointment request with a template
Inputs: email [email protected]; subject Appointment request; body Name: / Preferred day: (two lines)
Result: mailto:[email protected]?subject=Appointment%20request&body=Name%3A%0APreferred%20day%3A
The colon is encoded as %3A and the line break as %0A, so the template arrives on two lines.
A subject with an ampersand
Inputs: email [email protected]; subject Booking & "party" #12?
Result: mailto:[email protected]?subject=Booking%20%26%20%22party%22%20%2312%3F
Unencoded, the & would start a new field and the # would end the link.
Hidden recipients refused
Inputs: email [email protected][email protected]
Result: No button on the live page
Only a plain address is accepted; extra header fields cannot be smuggled in.
Limitations
- Needs a mail program on the visitor's device.
- cc, bcc and attachments are not supported.
- Addresses with quoted or unusual local parts are refused.
Where publishers use it
- A dental practice asking for name, date of birth and preferred day in every appointment email
- A wholesale page whose subject line 'Trade account enquiry' sorts messages into the right folder
- A press page offering journalists a one-click email to the media contact
- A school office giving parents a button for absence notes with the child's name and class prompted in the body
Questions
Why does nothing happen for some visitors?
A mailto: link needs a mail program set up on the device. Phones nearly always have one; some work or library computers do not. Turn on 'show address' so those visitors can copy the address, or pair the button with the Copy Contact Details widget.
Will spammers harvest my address from the button?
The address is in your page's code, exactly as with any mailto link, so a determined scraper can read it. If spam is a concern use a dedicated address for the website and filter it.
Can I prefill the body with a template?
Yes. Write each line in the body box; line breaks are kept. Keep it short - very long mailto links are cut off by some mail apps.
Can it send the email for the visitor?
No - and that is a privacy feature. The visitor sees the message in their own mail app and decides whether to send it.
Sources
- RFC 6068: The 'mailto' URI Scheme - IETF . subject and body header fields; percent-encoding of reserved characters and line breaks
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Email Us Button https://a2z.tools/embed/email-us-button
<a href="https://a2z.tools/embed/email-us-button">A2Z Tools Email Us Button</a>
[A2Z Tools Email Us Button](https://a2z.tools/embed/email-us-button)
Email Us Button by A2Z Tools - https://a2z.tools/embed/email-us-button
Related widgets
-
Your phone, email, address and reference numbers in a tidy list, each with a one-tap Copy button.
-
One large click-to-call button, optionally showing the number, your opening hours and a text link.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
A round corner button that unfolds into labelled Call, WhatsApp, Email, Directions and booking actions.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
