Link generator for mailto is a Vue.js applet for creating custom mail to links with a specific email address, subject, CC, BCC, or message body.
gmail link generator, mailto link generator with subject, mailto link shortener, mailto link generator multiple recipients, mailto link format
Designed this applet to build links for mailto with an interface to:
- Subject
- CC
- BCC
- Body
Enter Multiple Emails Using One Input Field | multi-emails
How to make use of it:
Install & Download:
<template> <div id="app"> <h1> Create your <code>mailto</code> link quickly! </h1> <code class="outputBox"> {{ outputUrl }} </code> <form> <label for="target-email-id">Target Email ID</label> <input name="target-email-id" placeholder="Target Email ID" type="email" v-model="emailId" v-on:keyup="updateOutputUrl" /> <label for="subject">Subject</label> <input name="subject" placeholder="Subject" type="text" v-model="email.subject" v-on:keyup="updateOutputUrl" /> <label for="cc">CC</label> <input name="cc" placeholder="CC" type="text" v-model="email.cc" v-on:keyup="updateOutputUrl" /> <label for="bcc">BCC</label> <input name="bcc" placeholder="BCC" type="text" v-model="email.bcc" v-on:keyup="updateOutputUrl" /> <label for="body">Body</label> <textarea name="body" placeholder="Body" type="text" v-model="email.body" v-on:keyup="updateOutputUrl" ></textarea> <input type="hidden" id="final-link-to-copy" :value="outputUrl" /> </form> <a class="btn" @click.stop.prevent="copyToClipboard">Copy to Clipboard</a> <a class="btn" v-bind:href="outputUrl">Test it!</a> </div> </template>
export default { created() { this.updateOutputUrl(); }, data() { return { outputUrl: "Type something", emailId: "[email protected]", email: { subject: "Hey there", cc: "[email protected]", bcc: "[email protected]", body: "Hey there, how have you been?" } }; }, methods: { updateOutputUrl() { this.outputUrl = "mailto:" + this.emailId; const emailKeys = Object.keys(this.email); const remaining = emailKeys.filter( (key) => this.email[key].trim().length > 0 ); if (remaining.length > 0) { this.outputUrl += "?"; } this.outputUrl += remaining .map((key) => `${key}=${encodeURI(this.email[key].trim())}`) .join("&"); }, copyToClipboard() { const finalLinkToCopy = document.querySelector("#final-link-to-copy"); finalLinkToCopy.setAttribute("type", "text"); finalLinkToCopy.select(); try { let res = document.execCommand("copy"); alert("Copied to clipboard!"); } catch (e) { alert("Unable to copy! Please select the text & copy it."); } finalLinkToCopy.setAttribute("type", "hidden"); window.getSelection().removeAllRanges(); } } };
Mailto Link Generator, Link builder for mailto Plugin/Github
See Demo And Download
Official Website(AjitZero): Click Here
This superior jQuery/javascript plugin is developed by AjitZero. For extra Advanced Usages, please go to the official website.