CODEWITHSUNDEEP
javascripthtmlformsemailhtml-email
mermi
mermi

Reputation: 31

Can I create a form to fill out a custom HTML email signature with JavaScript?

I'm kind of familiar with coding, and I have heard that running script in an email signature is absolutely bad form; however, a client has asked me to create a way to allow their employees to input their own information into the signature so that they are all uniform. None have a coding background and I don't want to create 100 custom HTML signatures/create new ones for future hires. Only three "fields" would need to be customized.

So, I thought of sharing a simple web app like this (in its simplest form):

<script type="text/JavaScript">
    function showEmail(){
        var email = document.getElementById("email").value;
        display_email.innerHTML= email;
    };
</script>

<body>
    <!--INPUT TO CUSTOMIZE SIGNATURE--!>
    Email: <input type="text" id="email" />
    <input type="submit" onclick="showEmail()" value="Add" />

    <!--EMAIL SIGNATURE BEGINS--!>

    <p><span id="display_email"></span></p>
</body>

Would this be bad? It wouldn't really be "running script" in the email since they'd copy and paste the signature only (or am I just completely wrong). P.S. I will not be offended if this strategy makes no sense - any guidance would be appreciated!

Upvotes: 3

Views: 1644

Answers (2)

Delirium
Delirium

Reputation: 9

Javascript is highly not recommended in emails as all email clients (with a few exceptions) will not run your script. https://en.wikipedia.org/wiki/Comparison_of_email_clients.

Creating a web app for your client is probably your best bet so they copy and paste the signature. Keep in mind though that you will have to use inline CSS as emails behave differently than web.

Upvotes: 0

John Pavek
John Pavek

Reputation: 2665

Yes, in house tools are fine to make.

This is a rather good idea, because people have the opportunity to make sure they use their preferred name, (Jim instead of Jimmy). And its on them to complete the task, which is hopeful a part of onboarding. Below is a really low effort example of what it might look like. Feel free to use it as a starting point.

document.querySelector('button').addEventListener('click', function(evt) {
  const name = document.querySelector('[name="name"]').value;
  const phone = document.querySelector('[name="phone"]').value;
  const email = document.querySelector('[name="email"]').value;

  const template = document.querySelector('#template');


  template.textContent = `${name} - Example Corp (${phone}) | ${email}`;
})
<h2>
  Email Signature Generator
</h2>
<div>
  Name: <input name="name">
</div>
<div>
  Phone: <input name="phone">
</div>
<div>
  Email: <input name="email">
</div>
<button>
 Generate
 </button>

<div id="template">

</div>

Upvotes: 4

Related Questions