I have two things that relate to adding a character to the output view. Pronouns - Right now, it is hidden until someone types in their preferred pronoun. It'll output her/she if that's what they put, but I would like to do '(' + "her/she" + ')'; 2.The output is hidden until someone types a number. I would like to

Display output with a string character and with an input?

I have two things that relate to adding a character to the output view.

Pronouns – Right now, it is hidden until someone types in their preferred pronoun. It’ll output her/she if that’s what they put, but I would like to do ‘(‘ + “her/she” + ‘)’;

2.The output is hidden until someone types a number. I would like to have it as display M: 739.383.3893.

I can get the outputs to display the input text but never the with the character. How do I go about adding characters into the output based on the input the user puts in?

Extreme beginner here, I’m sorry 🙁

(function() {

    /*
    * Input stuff
    */
    var doc = document;
    var form = doc.getElementById('form');
    var copyButton = doc.getElementById('copy');
    var resetButton = doc.getElementById('reset');
    var inputPhone = doc.getElementById('phone');
    var inputOffice = doc.getElementById('office');
    var instructions = doc.getElementById('instructions');
    var inputFullName = doc.getElementById('fullName');
    var inputPronouns = doc.getElementById('pronouns');
    var inputJobTitle = doc.getElementById('jobTitle');
    var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
    var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
    var peopleTemplate = {
      empty: {
        fullName: "",
        pronouns: "",
        jobTitle: "",
        phone: "",
        office: ""
      },
      dummy: {
        fullName: "Your Name",
        jobTitle: "Your title",
        pronouns: "Your pronouns",
        office: "7890",
        phone: "123-456-7890"
      }
    };

   

    /*
    * Output stuff
    */
    var sig = doc.getElementById('sig');
    var sigPhone = doc.querySelector('.sig__phone');
    var sigFullName = doc.querySelector('.sig__fullName');
    var sigJobTitle = doc.querySelector('.sig__jobTitle');
    var sigPronouns = doc.querySelector('.sig__pronouns');
    var sigOffice = doc.querySelector('.sig__office');
    

    /*
    * Instructions HTML
    */
    var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>"
      + "<p>To create a new signature in Outlook, follow these directions:</p>"
      + "<ol><li>Update Outlook to the latest version.</li>"
      + "<li>Open Outlook.</li>"
      + "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>"
      + "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>"
      + "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>"
      + "<li>Select whatever is there already and paste your new signature into the box.</li>"
      + "</ol>";
    
    /*
    * Clear form inputs
    */
    var resetForm = function () {
      inputFullName.value = '';
      inputJobTitle.value = '';
      inputPhone.value = '';
      inputPronouns.value = '';
      inputOffice.value = '';
       updateSignature();
      instructions.innerHTML = '';
    };
    
    /*
    * Fill signature with dummy info
    */
    var fillDummySignature = function () {
      sigFullName.textContent = "Your Name";
      sigPronouns.textContent = ""
      sigJobTitle.textContent = "Your title";
      sigPhone.textContent = "";
      sigOffice.textContent = "1234";
    };
    
    /*
    * Check if nothing is entered
    */
    var inputsAreEmpty = function () {
      return inputFullName.value === ''
        && inputPronouns.value === ''
        && inputJobTitle.value === ''
        && inputPhone.value === ''
        && inputOffice.value === '';
    };
    
    var userName = document.querySelector('#phone');

    userName.addEventListener('input', restrictNumber);
    function restrictNumber (e) {  
      var newValue = this.value.replace(new RegExp(/[^d]/,'ig'), "");
      this.value = newValue;
    }


    /*
    * Reformat phone number syntax
    */
    var formatPhone = function (n) {
      
      // var pattern = /[^0-9.]+/g;
      // if (n.search(pattern) !== -1) {
      //   console.log("not a number");
      //   // n.replace(pattern, '');
      //   return n;
      // }
      
      var o = n;
      var l = n.length;
      
      var noDash = function (value, index) {
        return value.charAt(index) !== '.';
      };
      
      var insertDash = function (value, index) {
        return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
      };
      
      var no3 = noDash(o, 3);
      var no7 = noDash(o, 7);
      
      if (l > 3 && l <= 7) {
        if (no3) {
          o = insertDash(n, 3);
        }
      } else if (l > 7 && l <= 11) {
        if (no3) {
          o = insertDash(n, 3);
          if (no7) {
            o = insertDash(o, 7); // insert on the value we just updated
          }
        } else if (no7) {
          o = insertDash(n, 7);
        }
      } else if (l > 12) {
        o = n.slice(0, 12);
      }
      return o;
    };
    
    /*
    * Add the input values into the actual signature
    */
    var updateSignature = function (event) {
      if (inputsAreEmpty()) {
        fillDummySignature();
        
        // Button states
        copyButton.disabled = true;
        copyButton.innerHTML = copyButtonDisabledHTML;
        resetButton.style.display = 'none';
      } else {
        
        // Button states
        copyButton.disabled = false;
        copyButton.innerHTML = copyButtonOriginalHTML;
        resetButton.style.display = 'inline-block';
        
        // Populate signature fields
        if (event && event.target.tagName === 'INPUT') {
          var id = event.target.id;
          var input = doc.getElementById(id);
          var sigClassName = '.sig__' + id;
          var inputIdName = '#' + id;
          var sigTarget = doc.querySelector(sigClassName);
          var inputTarget = doc.querySelector(inputIdName);
          
          if (id === 'fullName') {
            sigTarget.textContent = input.value;
          } else if (id === 'phone') {
            sigTarget.textContent = formatPhone(input.value);
            inputTarget.value = formatPhone(input.value);
          } else {
            sigTarget.textContent = input.value;
          }
        } else {
          sigFullName.textContent = inputFullName.value;
          sigJobTitle.textContent = inputJobTitle.value;
          sigPhone.textContent = inputPhone.value;
        }
      }
    }
       
    /*
    * Insert a person's info when option is selected
    */
    var insertPersonInfo = function (event) {
      resetForm();
      if (event.target.value !== 'custom') {
        var person = people[this.selectedIndex - 1];
        inputFullName.value = person.fullName;
        inputPronouns.value = person.pronouns;
        inputJobTitle.value = person.jobTitle;
        inputPhone.value = person.phone;
        updateSignature(event);
      }
    };
    
    /*
    * Populate the people info in the select menu on load
    */
    document.addEventListener("DOMContentLoaded", function (event) {
      updateSignature(event);
      fillDummySignature();
    });
    
    /*
    * Copy raw HTML output
    */
    copyButton.addEventListener('click', function(event) {
      // Have to remove any existing ranges :: Chrome bug
      window.getSelection().removeAllRanges();
      
      // Create range and add it to selection
      var r = document.createRange();
      r.selectNode(sig);
      window.getSelection().addRange(r);
      
      // Error catching
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy command was ' + msg);
      } catch(err) {
        console.log('Oops, unable to copy');
      }
      
      // Remove range from selection again
      window.getSelection().removeAllRanges();
      
      if (successful) {
        instructions.innerHTML = pasteInstructions;
        // this.parentNode.removeChild(this);
      }
    });
    
    /*
    * Listeners
    */
    form.addEventListener('input', updateSignature);
    resetButton.addEventListener('click', resetForm);
    inputPhone.addEventListener('paste', function(event) {
      // formatPhone();
    });
    
    }());

JavaScript
​x
 
(function() {
​
    /*
    * Input stuff
    */
    var doc = document;
    var form = doc.getElementById('form');
    var copyButton = doc.getElementById('copy');
    var resetButton = doc.getElementById('reset');
    var inputPhone = doc.getElementById('phone');
    var inputOffice = doc.getElementById('office');
    var instructions = doc.getElementById('instructions');
    var inputFullName = doc.getElementById('fullName');
    var inputPronouns = doc.getElementById('pronouns');
    var inputJobTitle = doc.getElementById('jobTitle');
    var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
    var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
    var peopleTemplate = {
      empty: {
        fullName: "",
        pronouns: "",
        jobTitle: "",
        phone: "",
        office: ""
      },
      dummy: {
        fullName: "Your Name",
        jobTitle: "Your title",
        pronouns: "Your pronouns",
        office: "7890",
        phone: "123-456-7890"
      }
    };
​
   
​
    /*
    * Output stuff
    */
    var sig = doc.getElementById('sig');
    var sigPhone = doc.querySelector('.sig__phone');
    var sigFullName = doc.querySelector('.sig__fullName');
    var sigJobTitle = doc.querySelector('.sig__jobTitle');
    var sigPronouns = doc.querySelector('.sig__pronouns');
    var sigOffice = doc.querySelector('.sig__office');
    
​
    /*
    * Instructions HTML
    */
    var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>"
      + "<p>To create a new signature in Outlook, follow these directions:</p>"
      + "<ol><li>Update Outlook to the latest version.</li>"
      + "<li>Open Outlook.</li>"
      + "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>"
      + "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>"
      + "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>"
      + "<li>Select whatever is there already and paste your new signature into the box.</li>"
      + "</ol>";
    
    /*
    * Clear form inputs
    */
    var resetForm = function () {
      inputFullName.value = '';
      inputJobTitle.value = '';
      inputPhone.value = '';
      inputPronouns.value = '';
      inputOffice.value = '';
       updateSignature();
      instructions.innerHTML = '';
    };
    
    /*
    * Fill signature with dummy info
    */
    var fillDummySignature = function () {
      sigFullName.textContent = "Your Name";
      sigPronouns.textContent = ""
      sigJobTitle.textContent = "Your title";
      sigPhone.textContent = "";
      sigOffice.textContent = "1234";
    };
    
    /*
    * Check if nothing is entered
    */
    var inputsAreEmpty = function () {
      return inputFullName.value === ''
        && inputPronouns.value === ''
        && inputJobTitle.value === ''
        && inputPhone.value === ''
        && inputOffice.value === '';
    };
    
    var userName = document.querySelector('#phone');
​
    userName.addEventListener('input', restrictNumber);
    function restrictNumber (e) {  
      var newValue = this.value.replace(new RegExp(/[^d]/,'ig'), "");
      this.value = newValue;
    }
​
​
    /*
    * Reformat phone number syntax
    */
    var formatPhone = function (n) {
      
      // var pattern = /[^0-9.]+/g;
      // if (n.search(pattern) !== -1) {
      //   console.log("not a number");
      //   // n.replace(pattern, '');
      //   return n;
      // }
      
      var o = n;
      var l = n.length;
      
      var noDash = function (value, index) {
        return value.charAt(index) !== '.';
      };
      
      var insertDash = function (value, index) {
        return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
      };
      
      var no3 = noDash(o, 3);
      var no7 = noDash(o, 7);
      
      if (l > 3 && l <= 7) {
        if (no3) {
          o = insertDash(n, 3);
        }
      } else if (l > 7 && l <= 11) {
        if (no3) {
          o = insertDash(n, 3);
          if (no7) {
            o = insertDash(o, 7); // insert on the value we just updated
          }
        } else if (no7) {
          o = insertDash(n, 7);
        }
      } else if (l > 12) {
        o = n.slice(0, 12);
      }
      return o;
    };
    
    /*
    * Add the input values into the actual signature
    */
    var updateSignature = function (event) {
      if (inputsAreEmpty()) {
        fillDummySignature();
        
        // Button states
        copyButton.disabled = true;
        copyButton.innerHTML = copyButtonDisabledHTML;
        resetButton.style.display = 'none';
      } else {
        
        // Button states
        copyButton.disabled = false;
        copyButton.innerHTML = copyButtonOriginalHTML;
        resetButton.style.display = 'inline-block';
        
        // Populate signature fields
        if (event && event.target.tagName === 'INPUT') {
          var id = event.target.id;
          var input = doc.getElementById(id);
          var sigClassName = '.sig__' + id;
          var inputIdName = '#' + id;
          var sigTarget = doc.querySelector(sigClassName);
          var inputTarget = doc.querySelector(inputIdName);
          
          if (id === 'fullName') {
            sigTarget.textContent = input.value;
          } else if (id === 'phone') {
            sigTarget.textContent = formatPhone(input.value);
            inputTarget.value = formatPhone(input.value);
          } else {
            sigTarget.textContent = input.value;
          }
        } else {
          sigFullName.textContent = inputFullName.value;
          sigJobTitle.textContent = inputJobTitle.value;
          sigPhone.textContent = inputPhone.value;
        }
      }
    }
       
    /*
    * Insert a person's info when option is selected
    */
    var insertPersonInfo = function (event) {
      resetForm();
      if (event.target.value !== 'custom') {
        var person = people[this.selectedIndex - 1];
        inputFullName.value = person.fullName;
        inputPronouns.value = person.pronouns;
        inputJobTitle.value = person.jobTitle;
        inputPhone.value = person.phone;
        updateSignature(event);
      }
    };
    
    /*
    * Populate the people info in the select menu on load
    */
    document.addEventListener("DOMContentLoaded", function (event) {
      updateSignature(event);
      fillDummySignature();
    });
    
    /*
    * Copy raw HTML output
    */
    copyButton.addEventListener('click', function(event) {
      // Have to remove any existing ranges :: Chrome bug
      window.getSelection().removeAllRanges();
      
      // Create range and add it to selection
      var r = document.createRange();
      r.selectNode(sig);
      window.getSelection().addRange(r);
      
      // Error catching
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy command was ' + msg);
      } catch(err) {
        console.log('Oops, unable to copy');
      }
      
      // Remove range from selection again
      window.getSelection().removeAllRanges();
      
      if (successful) {
        instructions.innerHTML = pasteInstructions;
        // this.parentNode.removeChild(this);
      }
    });
    
    /*
    * Listeners
    */
    form.addEventListener('input', updateSignature);
    resetButton.addEventListener('click', resetForm);
    inputPhone.addEventListener('paste', function(event) {
      // formatPhone();
    });
    
    }());
​
   

.form__input, .button, .button--copy, .button--reset {
    font-size: 14px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    line-height: 1;
}
* {
    box-sizing: border-box;
}
.sig-gen {
    font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    margin: 2em auto 4em;
    width: 100%;
    max-width: 800px;
}
.sig-gen__section {
    margin-bottom: 2em;
}
.sig-gen__section--email {
    margin-bottom: 3em;
}

.sig__field, .set-inform, .links-text {
    font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
.form {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.set-inform {
    display: inline-block;
}

@media screen and (min-width: 600px) {
    .form {
        /* flex-direction: row; */
   }
}
.form__group {
    margin-bottom: 12px;
}
.form__group:last-of-type {
    margin-bottom: 0;
}
@media screen and (min-width: 600px) {
    .form__group {
        margin-bottom: 10px;
   }
}
.form label {
    display: block;
    margin-bottom: 6px;
}
.form__input {
    background: white;
    width: 100%;
}
.form__input:focus, .form__input:active {
    outline: 0;
    border-color: #bebebe;
}
.email_generator {
    position: relative;
    border: 1px solid #e7e7e7;
    border-top: none;
    border-bottom: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 0 #ccc;
}
.email_generator:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 2 * 1px);
    height: 28%;
    background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.email__container {
    padding: 28px;
}
.email__sig {
    margin-top: 51px;
}
.email__line {
    height: 12px;
    margin-bottom: 12px;
    background: #e7e7e7;
    border-radius: 1px;
}
.email__line:last-child {
    width: 66%;
    margin-bottom: 28px;
}
.email__signoff .email__line {
    width: 17%;
}
.sig__field {
    font-size: 14px;
}
.sig__fullName {
    font-size: 18px;
}
.button, .button--copy, .button--reset {
    padding: 9px 12px;
    color: white;
    cursor: pointer;
    background: #8c4049;
    border-color: #823b44;
}
.button:hover, .button--copy:hover, .button--reset:hover {
    background: #97454e;
    border-color: #8c4049;
}
.button:focus, .button--copy:focus, .button--reset:focus, .button:active, .button--copy:active, .button--reset:active {
    outline: 0;
    background: #77363e;
    border-color: #622d33;
}
.button:disabled, .button--copy:disabled, .button--reset:disabled {
    background: #656669;
    border-color: #5d5e61;
    cursor: not-allowed;
    color: white;
}
.button--reset {
    background: #e2e3e4;
    border-color: #dadbdd;
    color: #656669;
}
.button--reset:hover {
    background: #eaebeb;
    border-color: #e2e3e4;
}
.button--reset:focus, .button--reset:active {
    outline: 0;
    background: #d2d4d5;
    border-color: #c2c4c6;
}

JavaScript
 
.form__input, .button, .button--copy, .button--reset {
    font-size: 14px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    line-height: 1;
}
* {
    box-sizing: border-box;
}
.sig-gen {
    font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    margin: 2em auto 4em;
    width: 100%;
    max-width: 800px;
}
.sig-gen__section {
    margin-bottom: 2em;
}
.sig-gen__section--email {
    margin-bottom: 3em;
}
​
.sig__field, .set-inform, .links-text {
    font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
.form {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
​
.set-inform {
    display: inline-block;
}
​
@media screen and (min-width: 600px) {
    .form {
        /* flex-direction: row; */
   }
}
.form__group {
    margin-bottom: 12px;
}
.form__group:last-of-type {
    margin-bottom: 0;
}
@media screen and (min-width: 600px) {
    .form__group {
        margin-bottom: 10px;
   }
}
.form label {
    display: block;
    margin-bottom: 6px;
}
.form__input {
    background: white;
    width: 100%;
}
.form__input:focus, .form__input:active {
    outline: 0;
    border-color: #bebebe;
}
.email_generator {
    position: relative;
    border: 1px solid #e7e7e7;
    border-top: none;
    border-bottom: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 0 #ccc;
}
.email_generator:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 2 * 1px);
    height: 28%;
    background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.email__container {
    padding: 28px;
}
.email__sig {
    margin-top: 51px;
}
.email__line {
    height: 12px;
    margin-bottom: 12px;
    background: #e7e7e7;
    border-radius: 1px;
}
.email__line:last-child {
    width: 66%;
    margin-bottom: 28px;
}
.email__signoff .email__line {
    width: 17%;
}
.sig__field {
    font-size: 14px;
}
.sig__fullName {
    font-size: 18px;
}
.button, .button--copy, .button--reset {
    padding: 9px 12px;
    color: white;
    cursor: pointer;
    background: #8c4049;
    border-color: #823b44;
}
.button:hover, .button--copy:hover, .button--reset:hover {
    background: #97454e;
    border-color: #8c4049;
}
.button:focus, .button--copy:focus, .button--reset:focus, .button:active, .button--copy:active, .button--reset:active {
    outline: 0;
    background: #77363e;
    border-color: #622d33;
}
.button:disabled, .button--copy:disabled, .button--reset:disabled {
    background: #656669;
    border-color: #5d5e61;
    cursor: not-allowed;
    color: white;
}
.button--reset {
    background: #e2e3e4;
    border-color: #dadbdd;
    color: #656669;
}
.button--reset:hover {
    background: #eaebeb;
    border-color: #e2e3e4;
}
.button--reset:focus, .button--reset:active {
    outline: 0;
    background: #d2d4d5;
    border-color: #c2c4c6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
        <section class="sig-gen__section">
          <h2>Email Signature Generator</h2>
        </section>
        <section class="sig-gen__section">
          <form id="form" class="form">
            <div class="form__group">
              <label for="fullName">Full Name:</label>
              <input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
            </div>
            <div class="form__group">
              <label for="pronouns">Pronouns:</label>
              <input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
            </div>
            <div class="form__group">
            <label for="jobTitle">Job Title:</label>
            <input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
            </div>
            <div class="form__group">
            <label for="office">Office Extension:</label>
            <input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
            </div>
            <div class="form__group">
              <label for="phone">Mobile:</label>
              <input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
              </div>
          </form>
        </section>
        <section class="sig-gen__section sig-gen__section--email">
          <div class="email_generator">
            <div class="email__container">
              <div id="sig" class="email__sig">
                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
                  <tbody border="0" cellpadding="0" cellspacing="0">
                    <tr border="0" cellpadding="0" cellspacing="0">
                        <td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
                          <div>
                            <strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong><div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
                          </div>
                          <div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
                          <div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
                          <div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div><div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> &nbsp;</span><div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
                          <div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
                        </td>
                    </tr>
                    <tr border="0" cellpadding="0" cellspacing="0">
                      <td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
                          <tbody border="0" cellpadding="0" cellspacing="0">
                          
                            <tr border="0" cellpadding="0" cellspacing="0">
                              <td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
                                <a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a><span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
                              </td>
                            </tr>
                            <tr border="0" cellpadding="0" cellspacing="0">
                              <td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
                              </td>
                            </tr>
                           
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </section>
        <section class="sig-gen__section">
          <button id="copy" class="button--copy"></button>
          <button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
        </section>
        <section class="sig-gen__section">
          <div id="instructions"></div>
        </section>
      </div>

JavaScript
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
        <section class="sig-gen__section">
          <h2>Email Signature Generator</h2>
        </section>
        <section class="sig-gen__section">
          <form id="form" class="form">
            <div class="form__group">
              <label for="fullName">Full Name:</label>
              <input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
            </div>
            <div class="form__group">
              <label for="pronouns">Pronouns:</label>
              <input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
            </div>
            <div class="form__group">
            <label for="jobTitle">Job Title:</label>
            <input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
            </div>
            <div class="form__group">
            <label for="office">Office Extension:</label>
            <input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
            </div>
            <div class="form__group">
              <label for="phone">Mobile:</label>
              <input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
              </div>
          </form>
        </section>
        <section class="sig-gen__section sig-gen__section--email">
          <div class="email_generator">
            <div class="email__container">
              <div id="sig" class="email__sig">
                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
                  <tbody border="0" cellpadding="0" cellspacing="0">
                    <tr border="0" cellpadding="0" cellspacing="0">
                        <td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
                          <div>
                            <strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong><div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
                          </div>
                          <div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
                          <div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
                          <div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div><div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> &nbsp;</span><div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
                          <div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
                        </td>
                    </tr>
                    <tr border="0" cellpadding="0" cellspacing="0">
                      <td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
                          <tbody border="0" cellpadding="0" cellspacing="0">
                          
                            <tr border="0" cellpadding="0" cellspacing="0">
                              <td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
                                <a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a><span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
                              </td>
                            </tr>
                            <tr border="0" cellpadding="0" cellspacing="0">
                              <td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
                              </td>
                            </tr>
                           
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </section>
        <section class="sig-gen__section">
          <button id="copy" class="button--copy"></button>
          <button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
        </section>
        <section class="sig-gen__section">
          <div id="instructions"></div>
        </section>
      </div>

Answer

[x] displaying of (pronoun) is done,
[x] prepending M. to the displayed mobile number is done,

(function() {

  /*
   * Input stuff
   */
  var doc = document;
  var form = doc.getElementById('form');
  var copyButton = doc.getElementById('copy');
  var resetButton = doc.getElementById('reset');
  var inputPhone = doc.getElementById('phone');
  var inputOffice = doc.getElementById('office');
  var instructions = doc.getElementById('instructions');
  var inputFullName = doc.getElementById('fullName');
  var inputPronouns = doc.getElementById('pronouns');
  var inputJobTitle = doc.getElementById('jobTitle');
  var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
  var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
  var peopleTemplate = {
    empty: {
      fullName: "",
      pronouns: "",
      jobTitle: "",
      phone: "",
      office: ""
    },
    dummy: {
      fullName: "Your Name",
      jobTitle: "Your title",
      pronouns: "Your pronouns",
      office: "7890",
      phone: "123-456-7890"
    }
  };



  /*
   * Output stuff
   */
  var sig = doc.getElementById('sig');
  var sigPhone = doc.querySelector('.sig__phone');
  var sigFullName = doc.querySelector('.sig__fullName');
  var sigJobTitle = doc.querySelector('.sig__jobTitle');
  var sigPronouns = doc.querySelector('.sig__pronouns');
  var sigOffice = doc.querySelector('.sig__office');


  /*
   * Instructions HTML
   */
  var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>" +
    "<p>To create a new signature in Outlook, follow these directions:</p>" +
    "<ol><li>Update Outlook to the latest version.</li>" +
    "<li>Open Outlook.</li>" +
    "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>" +
    "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>" +
    "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>" +
    "<li>Select whatever is there already and paste your new signature into the box.</li>" +
    "</ol>";

  /*
   * Clear form inputs
   */
  var resetForm = function() {
    inputFullName.value = '';
    inputJobTitle.value = '';
    inputPhone.value = '';
    inputPronouns.value = '';
    inputOffice.value = '';
    updateSignature();
    instructions.innerHTML = '';
  };

  /*
   * Fill signature with dummy info
   */
  var fillDummySignature = function() {
    sigFullName.textContent = "Your Name";
    sigPronouns.textContent = ""
    sigJobTitle.textContent = "Your title";
    sigPhone.textContent = "";
    sigOffice.textContent = "1234";
  };

  /*
   * Check if nothing is entered
   */
  var inputsAreEmpty = function() {
    return [inputFullName, inputPronouns, inputJobTitle, inputPhone, inputOffice].every(({
      value
    }) => value === '')
  };

  var userName = document.querySelector('#phone');

  userName.addEventListener('input', restrictNumber);

  function restrictNumber(e) {
    var newValue = this.value.replace(new RegExp(/[^d]/, 'ig'), "");
    this.value = newValue;
  }


  /*
   * Reformat phone number syntax
   */
  var formatPhone = function(n) {

    // var pattern = /[^0-9.]+/g;
    // if (n.search(pattern) !== -1) {
    //   console.log("not a number");
    //   // n.replace(pattern, '');
    //   return n;
    // }

    var o = n;
    var l = n.length;

    var noDash = function(value, index) {
      return value.charAt(index) !== '.';
    };

    var insertDash = function(value, index) {
      return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
    };

    var no3 = noDash(o, 3);
    var no7 = noDash(o, 7);

    if (l > 3 && l <= 7) {
      if (no3) {
        o = insertDash(n, 3);
      }
    } else if (l > 7 && l <= 11) {
      if (no3) {
        o = insertDash(n, 3);
        if (no7) {
          o = insertDash(o, 7); // insert on the value we just updated
        }
      } else if (no7) {
        o = insertDash(n, 7);
      }
    } else if (l > 12) {
      o = n.slice(0, 12);
    }
    return o;
  };

  /*
   * Add the input values into the actual signature
   */
  var updateSignature = function(event) {
    if (inputsAreEmpty()) {
      fillDummySignature();

      // Button states
      copyButton.disabled = true;
      copyButton.innerHTML = copyButtonDisabledHTML;
      resetButton.style.display = 'none';
    } else {

      // Button states
      copyButton.disabled = false;
      copyButton.innerHTML = copyButtonOriginalHTML;
      resetButton.style.display = 'inline-block';

      // Populate signature fields
      if (event && event.target.tagName === 'INPUT') {
        var id = event.target.id;
        var input = doc.getElementById(id);
        var sigClassName = '.sig__' + id;
        var inputIdName = '#' + id;
        var sigTarget = doc.querySelector(sigClassName);
        var inputTarget = doc.querySelector(inputIdName);

        if (id === 'fullName') {
          sigTarget.textContent = input.value;
        } else if (id === 'phone') {
          // just save the value in a variable, and use that
          const formattedPhone = formatPhone(input.value);
          sigTarget.textContent = `M. ${formattedPhone}`;
          inputTarget.value = formattedPhone
        } else if (id === 'pronouns') {
          // this case needed to be treated separately
          sigTarget.textContent = `(${input.value})`
        } else {
          sigTarget.textContent = input.value;
        }
      } else {
        sigFullName.textContent = inputFullName.value;
        sigJobTitle.textContent = inputJobTitle.value;
        sigPhone.textContent = inputPhone.value;
      }
    }
  }

  /*
   * Insert a person's info when option is selected
   */
  var insertPersonInfo = function(event) {
    resetForm();
    if (event.target.value !== 'custom') {
      var person = people[this.selectedIndex - 1];
      inputFullName.value = person.fullName;
      inputPronouns.value = person.pronouns;
      inputJobTitle.value = person.jobTitle;
      inputPhone.value = person.phone;
      updateSignature(event);
    }
  };

  /*
   * Populate the people info in the select menu on load
   */
  document.addEventListener("DOMContentLoaded", function(event) {
    updateSignature(event);
    fillDummySignature();
  });

  /*
   * Copy raw HTML output
   */
  copyButton.addEventListener('click', function(event) {
    // Have to remove any existing ranges :: Chrome bug
    window.getSelection().removeAllRanges();

    // Create range and add it to selection
    var r = document.createRange();
    r.selectNode(sig);
    window.getSelection().addRange(r);

    // Error catching
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    // Remove range from selection again
    window.getSelection().removeAllRanges();

    if (successful) {
      instructions.innerHTML = pasteInstructions;
      // this.parentNode.removeChild(this);
    }
  });

  /*
   * Listeners
   */
  form.addEventListener('input', updateSignature);
  resetButton.addEventListener('click', resetForm);
  inputPhone.addEventListener('paste', function(event) {
    // formatPhone();
  });

}());

JavaScript
 
(function() {
​
  /*
   * Input stuff
   */
  var doc = document;
  var form = doc.getElementById('form');
  var copyButton = doc.getElementById('copy');
  var resetButton = doc.getElementById('reset');
  var inputPhone = doc.getElementById('phone');
  var inputOffice = doc.getElementById('office');
  var instructions = doc.getElementById('instructions');
  var inputFullName = doc.getElementById('fullName');
  var inputPronouns = doc.getElementById('pronouns');
  var inputJobTitle = doc.getElementById('jobTitle');
  var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
  var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
  var peopleTemplate = {
    empty: {
      fullName: "",
      pronouns: "",
      jobTitle: "",
      phone: "",
      office: ""
    },
    dummy: {
      fullName: "Your Name",
      jobTitle: "Your title",
      pronouns: "Your pronouns",
      office: "7890",
      phone: "123-456-7890"
    }
  };
​
​
​
  /*
   * Output stuff
   */
  var sig = doc.getElementById('sig');
  var sigPhone = doc.querySelector('.sig__phone');
  var sigFullName = doc.querySelector('.sig__fullName');
  var sigJobTitle = doc.querySelector('.sig__jobTitle');
  var sigPronouns = doc.querySelector('.sig__pronouns');
  var sigOffice = doc.querySelector('.sig__office');
​
​
  /*
   * Instructions HTML
   */
  var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>" +
    "<p>To create a new signature in Outlook, follow these directions:</p>" +
    "<ol><li>Update Outlook to the latest version.</li>" +
    "<li>Open Outlook.</li>" +
    "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>" +
    "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>" +
    "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>" +
    "<li>Select whatever is there already and paste your new signature into the box.</li>" +
    "</ol>";
​
  /*
   * Clear form inputs
   */
  var resetForm = function() {
    inputFullName.value = '';
    inputJobTitle.value = '';
    inputPhone.value = '';
    inputPronouns.value = '';
    inputOffice.value = '';
    updateSignature();
    instructions.innerHTML = '';
  };
​
  /*
   * Fill signature with dummy info
   */
  var fillDummySignature = function() {
    sigFullName.textContent = "Your Name";
    sigPronouns.textContent = ""
    sigJobTitle.textContent = "Your title";
    sigPhone.textContent = "";
    sigOffice.textContent = "1234";
  };
​
  /*
   * Check if nothing is entered
   */
  var inputsAreEmpty = function() {
    return [inputFullName, inputPronouns, inputJobTitle, inputPhone, inputOffice].every(({
      value
    }) => value === '')
  };
​
  var userName = document.querySelector('#phone');
​
  userName.addEventListener('input', restrictNumber);
​
  function restrictNumber(e) {
    var newValue = this.value.replace(new RegExp(/[^d]/, 'ig'), "");
    this.value = newValue;
  }
​
​
  /*
   * Reformat phone number syntax
   */
  var formatPhone = function(n) {
​
    // var pattern = /[^0-9.]+/g;
    // if (n.search(pattern) !== -1) {
    //   console.log("not a number");
    //   // n.replace(pattern, '');
    //   return n;
    // }
​
    var o = n;
    var l = n.length;
​
    var noDash = function(value, index) {
      return value.charAt(index) !== '.';
    };
​
    var insertDash = function(value, index) {
      return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
    };
​
    var no3 = noDash(o, 3);
    var no7 = noDash(o, 7);
​
    if (l > 3 && l <= 7) {
      if (no3) {
        o = insertDash(n, 3);
      }
    } else if (l > 7 && l <= 11) {
      if (no3) {
        o = insertDash(n, 3);
        if (no7) {
          o = insertDash(o, 7); // insert on the value we just updated
        }
      } else if (no7) {
        o = insertDash(n, 7);
      }
    } else if (l > 12) {
      o = n.slice(0, 12);
    }
    return o;
  };
​
  /*
   * Add the input values into the actual signature
   */
  var updateSignature = function(event) {
    if (inputsAreEmpty()) {
      fillDummySignature();
​
      // Button states
      copyButton.disabled = true;
      copyButton.innerHTML = copyButtonDisabledHTML;
      resetButton.style.display = 'none';
    } else {
​
      // Button states
      copyButton.disabled = false;
      copyButton.innerHTML = copyButtonOriginalHTML;
      resetButton.style.display = 'inline-block';
​
      // Populate signature fields
      if (event && event.target.tagName === 'INPUT') {
        var id = event.target.id;
        var input = doc.getElementById(id);
        var sigClassName = '.sig__' + id;
        var inputIdName = '#' + id;
        var sigTarget = doc.querySelector(sigClassName);
        var inputTarget = doc.querySelector(inputIdName);
​
        if (id === 'fullName') {
          sigTarget.textContent = input.value;
        } else if (id === 'phone') {
          // just save the value in a variable, and use that
          const formattedPhone = formatPhone(input.value);
          sigTarget.textContent = `M. ${formattedPhone}`;
          inputTarget.value = formattedPhone
        } else if (id === 'pronouns') {
          // this case needed to be treated separately
          sigTarget.textContent = `(${input.value})`
        } else {
          sigTarget.textContent = input.value;
        }
      } else {
        sigFullName.textContent = inputFullName.value;
        sigJobTitle.textContent = inputJobTitle.value;
        sigPhone.textContent = inputPhone.value;
      }
    }
  }
​
  /*
   * Insert a person's info when option is selected
   */
  var insertPersonInfo = function(event) {
    resetForm();
    if (event.target.value !== 'custom') {
      var person = people[this.selectedIndex - 1];
      inputFullName.value = person.fullName;
      inputPronouns.value = person.pronouns;
      inputJobTitle.value = person.jobTitle;
      inputPhone.value = person.phone;
      updateSignature(event);
    }
  };
​
  /*
   * Populate the people info in the select menu on load
   */
  document.addEventListener("DOMContentLoaded", function(event) {
    updateSignature(event);
    fillDummySignature();
  });
​
  /*
   * Copy raw HTML output
   */
  copyButton.addEventListener('click', function(event) {
    // Have to remove any existing ranges :: Chrome bug
    window.getSelection().removeAllRanges();
​
    // Create range and add it to selection
    var r = document.createRange();
    r.selectNode(sig);
    window.getSelection().addRange(r);
​
    // Error catching
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
​
    // Remove range from selection again
    window.getSelection().removeAllRanges();
​
    if (successful) {
      instructions.innerHTML = pasteInstructions;
      // this.parentNode.removeChild(this);
    }
  });
​
  /*
   * Listeners
   */
  form.addEventListener('input', updateSignature);
  resetButton.addEventListener('click', resetForm);
  inputPhone.addEventListener('paste', function(event) {
    // formatPhone();
  });
​
}());

.form__input,
.button,
.button--copy,
.button--reset {
  font-size: 14px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid #e7e7e7;
  border-radius: 2px;
  line-height: 1;
}

* {
  box-sizing: border-box;
}

.sig-gen {
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  margin: 2em auto 4em;
  width: 100%;
  max-width: 800px;
}

.sig-gen__section {
  margin-bottom: 2em;
}

.sig-gen__section--email {
  margin-bottom: 3em;
}

.sig__field,
.set-inform,
.links-text {
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}

.form {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.set-inform {
  display: inline-block;
}

@media screen and (min-width: 600px) {
  .form {
    /* flex-direction: row; */
  }
}

.form__group {
  margin-bottom: 12px;
}

.form__group:last-of-type {
  margin-bottom: 0;
}

@media screen and (min-width: 600px) {
  .form__group {
    margin-bottom: 10px;
  }
}

.form label {
  display: block;
  margin-bottom: 6px;
}

.form__input {
  background: white;
  width: 100%;
}

.form__input:focus,
.form__input:active {
  outline: 0;
  border-color: #bebebe;
}

.email_generator {
  position: relative;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-bottom: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 0 #ccc;
}

.email_generator:before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: calc(100% + 2 * 1px);
  height: 28%;
  background: linear-gradient(white, rgba(255, 255, 255, 0));
}

.email__container {
  padding: 28px;
}

.email__sig {
  margin-top: 51px;
}

.email__line {
  height: 12px;
  margin-bottom: 12px;
  background: #e7e7e7;
  border-radius: 1px;
}

.email__line:last-child {
  width: 66%;
  margin-bottom: 28px;
}

.email__signoff .email__line {
  width: 17%;
}

.sig__field {
  font-size: 14px;
}

.sig__fullName {
  font-size: 18px;
}

.button,
.button--copy,
.button--reset {
  padding: 9px 12px;
  color: white;
  cursor: pointer;
  background: #8c4049;
  border-color: #823b44;
}

.button:hover,
.button--copy:hover,
.button--reset:hover {
  background: #97454e;
  border-color: #8c4049;
}

.button:focus,
.button--copy:focus,
.button--reset:focus,
.button:active,
.button--copy:active,
.button--reset:active {
  outline: 0;
  background: #77363e;
  border-color: #622d33;
}

.button:disabled,
.button--copy:disabled,
.button--reset:disabled {
  background: #656669;
  border-color: #5d5e61;
  cursor: not-allowed;
  color: white;
}

.button--reset {
  background: #e2e3e4;
  border-color: #dadbdd;
  color: #656669;
}

.button--reset:hover {
  background: #eaebeb;
  border-color: #e2e3e4;
}

.button--reset:focus,
.button--reset:active {
  outline: 0;
  background: #d2d4d5;
  border-color: #c2c4c6;
}

JavaScript
 
.form__input,
.button,
.button--copy,
.button--reset {
  font-size: 14px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid #e7e7e7;
  border-radius: 2px;
  line-height: 1;
}
​
* {
  box-sizing: border-box;
}
​
.sig-gen {
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  margin: 2em auto 4em;
  width: 100%;
  max-width: 800px;
}
​
.sig-gen__section {
  margin-bottom: 2em;
}
​
.sig-gen__section--email {
  margin-bottom: 3em;
}
​
.sig__field,
.set-inform,
.links-text {
  font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
​
.form {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
​
.set-inform {
  display: inline-block;
}
​
@media screen and (min-width: 600px) {
  .form {
    /* flex-direction: row; */
  }
}
​
.form__group {
  margin-bottom: 12px;
}
​
.form__group:last-of-type {
  margin-bottom: 0;
}
​
@media screen and (min-width: 600px) {
  .form__group {
    margin-bottom: 10px;
  }
}
​
.form label {
  display: block;
  margin-bottom: 6px;
}
​
.form__input {
  background: white;
  width: 100%;
}
​
.form__input:focus,
.form__input:active {
  outline: 0;
  border-color: #bebebe;
}
​
.email_generator {
  position: relative;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-bottom: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 0 #ccc;
}
​
.email_generator:before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: calc(100% + 2 * 1px);
  height: 28%;
  background: linear-gradient(white, rgba(255, 255, 255, 0));
}
​
.email__container {
  padding: 28px;
}
​
.email__sig {
  margin-top: 51px;
}
​
.email__line {
  height: 12px;
  margin-bottom: 12px;
  background: #e7e7e7;
  border-radius: 1px;
}
​
.email__line:last-child {
  width: 66%;
  margin-bottom: 28px;
}
​
.email__signoff .email__line {
  width: 17%;
}
​
.sig__field {
  font-size: 14px;
}
​
.sig__fullName {
  font-size: 18px;
}
​
.button,
.button--copy,
.button--reset {
  padding: 9px 12px;
  color: white;
  cursor: pointer;
  background: #8c4049;
  border-color: #823b44;
}
​
.button:hover,
.button--copy:hover,
.button--reset:hover {
  background: #97454e;
  border-color: #8c4049;
}
​
.button:focus,
.button--copy:focus,
.button--reset:focus,
.button:active,
.button--copy:active,
.button--reset:active {
  outline: 0;
  background: #77363e;
  border-color: #622d33;
}
​
.button:disabled,
.button--copy:disabled,
.button--reset:disabled {
  background: #656669;
  border-color: #5d5e61;
  cursor: not-allowed;
  color: white;
}
​
.button--reset {
  background: #e2e3e4;
  border-color: #dadbdd;
  color: #656669;
}
​
.button--reset:hover {
  background: #eaebeb;
  border-color: #e2e3e4;
}
​
.button--reset:focus,
.button--reset:active {
  outline: 0;
  background: #d2d4d5;
  border-color: #c2c4c6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
  <section class="sig-gen__section">
    <h2>Email Signature Generator</h2>
  </section>
  <section class="sig-gen__section">
    <form id="form" class="form">
      <div class="form__group">
        <label for="fullName">Full Name:</label>
        <input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
      </div>
      <div class="form__group">
        <label for="pronouns">Pronouns:</label>
        <input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
      </div>
      <div class="form__group">
        <label for="jobTitle">Job Title:</label>
        <input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
      </div>
      <div class="form__group">
        <label for="office">Office Extension:</label>
        <input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
      </div>
      <div class="form__group">
        <label for="phone">Mobile:</label>
        <input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
      </div>
    </form>
  </section>
  <section class="sig-gen__section sig-gen__section--email">
    <div class="email_generator">
      <div class="email__container">
        <div id="sig" class="email__sig">
          <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
            <tbody border="0" cellpadding="0" cellspacing="0">
              <tr border="0" cellpadding="0" cellspacing="0">
                <td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
                  <div>
                    <strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong>
                    <div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
                  </div>
                  <div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
                  <div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
                  <div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div>
                  <div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> &nbsp;</span>
                  <div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
                  <div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
                </td>
              </tr>
              <tr border="0" cellpadding="0" cellspacing="0">
                <td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
                    <tbody border="0" cellpadding="0" cellspacing="0">

                      <tr border="0" cellpadding="0" cellspacing="0">
                        <td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
                          <a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a>
                          <span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
                        </td>
                      </tr>
                      <tr border="0" cellpadding="0" cellspacing="0">
                        <td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
                        </td>
                      </tr>

                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
  <section class="sig-gen__section">
    <button id="copy" class="button--copy"></button>
    <button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
  </section>
  <section class="sig-gen__section">
    <div id="instructions"></div>
  </section>
</div>

JavaScript
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
  <section class="sig-gen__section">
    <h2>Email Signature Generator</h2>
  </section>
  <section class="sig-gen__section">
    <form id="form" class="form">
      <div class="form__group">
        <label for="fullName">Full Name:</label>
        <input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
      </div>
      <div class="form__group">
        <label for="pronouns">Pronouns:</label>
        <input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
      </div>
      <div class="form__group">
        <label for="jobTitle">Job Title:</label>
        <input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
      </div>
      <div class="form__group">
        <label for="office">Office Extension:</label>
        <input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
      </div>
      <div class="form__group">
        <label for="phone">Mobile:</label>
        <input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
      </div>
    </form>
  </section>
  <section class="sig-gen__section sig-gen__section--email">
    <div class="email_generator">
      <div class="email__container">
        <div id="sig" class="email__sig">
          <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
            <tbody border="0" cellpadding="0" cellspacing="0">
              <tr border="0" cellpadding="0" cellspacing="0">
                <td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
                  <div>
                    <strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong>
                    <div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
                  </div>
                  <div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
                  <div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
                  <div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div>
                  <div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> &nbsp;</span>
                  <div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
                  <div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
                </td>
              </tr>
              <tr border="0" cellpadding="0" cellspacing="0">
                <td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
                    <tbody border="0" cellpadding="0" cellspacing="0">
​
                      <tr border="0" cellpadding="0" cellspacing="0">
                        <td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
                          <a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a>
                          <span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
                        </td>
                      </tr>
                      <tr border="0" cellpadding="0" cellspacing="0">
                        <td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
                        </td>
                      </tr>
​
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
  <section class="sig-gen__section">
    <button id="copy" class="button--copy"></button>
    <button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
  </section>
  <section class="sig-gen__section">
    <div id="instructions"></div>
  </section>
</div>

Advertisement

Answer