email form using vanilla JavaScript button

Question

I have code below for a contact form I created using HTML, CSS and JavaScript. Is it possible to have the submit button on the preview page send an email with all the content that was filled out on the main page? Is this possible with just vanilla JavaScript? Anything helps, cheers!

var categoryItems = document.querySelectorAll("#category-dropdown > a"),
    locationItems = document.querySelectorAll("#location-dropdown > a");
    
addDropdownEventListeners(categoryItems, 'Category');
addDropdownEventListeners(locationItems, 'Location');
    
function addDropdownEventListeners(items, labelName) {
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener("click", function(e) {
            document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML;
            document.getElementById("label" + labelName).innerHTML = e.target.innerHTML;
        });
    }
}

function openNav() {
       
       document.getElementById("myNav").classList.remove("collapsed");
        var input = document.getElementById("txtDetail");
        var value = input.value;
        var label = document.getElementById("labelDetail");
        label.innerHTML = value;

        var input = document.getElementById("txtName");
        var value = input.value;
        var label = document.getElementById("labelName");
        label.innerHTML = value;

        var input = document.getElementById("txtNumber");
        var value = input.value;
        var label = document.getElementById("labelNumber");
        label.innerHTML = value;

        var input = document.getElementById("txtEmail");
        var value = input.value;
        var label = document.getElementById("labelEmail");
        label.innerHTML = value;

        document.getElementById("myNav").style.width = "100%";
    }
    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
        document.getElementById("myNav").classList.add("collapsed");
    }

document.getElementById('file-upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').innerText = filename;

  var labelFile = this.value;
  var lastIndex = labelFile.lastIndexOf("\\");
  if (lastIndex >= 0) {
    labelFile = labelFile.substring(lastIndex + 1);
  }
  document.getElementById('labelFile').innerText = labelFile;
}

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      -o-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      position: relative;
    }

    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea,
    #contact button[type="submit"] {
      font: 400 12px/16px "Verdana", Verdana;
    }

    #contact {
      background: #F9F9F9;
      padding: 25px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      height:525px;
    }

    #contact h3 {
      display: block;
      font-family:Verdana;
      font-size: 24px;
      font-weight: 300;
      margin-bottom: 10px;
    }

    #contact h4 {
      margin: 5px 0 15px;
      display: block;
      font-family:Verdana;
      font-size: 13px;
      font-weight: 400;
    }

    #contact h5 {
      text-decoration:underline;
      display: block;
      color:#4CAF50;
      font-family:Verdana;
      font-size: 19px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    #contact h6 {
      text-decoration:underline;
      display: block;
      text-align:left;
      color:#4CAF50;
      font-family:Verdana;
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    .fieldset {
      border: medium none !important;
      margin: 0 0 10px;
      min-width: 100%;
      padding: 0;
      width: 100%;
    }

    #contact input[type="text"],
    #contact input[type="email"],
    #contact input[type="tel"],
    #contact textarea {
      width: 100%;
      border: 1px solid #ccc;
      background: #FFF;
      margin: 0 0 5px;
      padding: 10px;
    }

    #contact input[type="text"]:hover,
    #contact input[type="email"]:hover,
    #contact input[type="tel"]:hover,
    #contact textarea:hover {
      -webkit-transition: border-color 0.3s ease-in-out;
      -moz-transition: border-color 0.3s ease-in-out;
      transition: border-color 0.3s ease-in-out;
      border: 1px solid #aaa;
    }

    #contact textarea {
      height: 100px;
      max-width: 100%;
      resize: none;
    }

    #button{
      float:right;
      cursor: pointer;
      padding: 13px 32px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
      font-size: 15px;
    }

    #button:hover{
      background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }

    #button:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    #contact input:focus,
    #contact textarea:focus {
      outline: 0;
      border: 1px solid #aaa;
    }

    ::-webkit-input-placeholder {
      color: #888;
    }

    :-moz-placeholder {
      color: #888;
    }

    ::-moz-placeholder {
      color: #888;
    }

    :-ms-input-placeholder {
      color: #888;
    }

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 13px;
        font-size: 16px;
        width:125px;
        height:45px;
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      max-height:150px;/* you can change as you need it */
   overflow:auto;/* to get scroll */
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    input[type="file"]{
        display: none;
    }
    .custom-file-upload {
      cursor: pointer;
      padding: 13px 16px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
      font-size: 15px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
    }
    .custom-file-upload:hover{
        background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }
    .custom-file-upload:active{
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    .overlay {
        height: 525px;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #F9F9F9;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .overlay.collapsed {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 0;
        padding-right: 0;
    }

    .overlay-content {
        position: relative;
        /*top: 5%;*/
        width: 100%;
        height: 100%;
        text-align: center;
        /*margin-top: 25px;*/
    }

    .overlay-content .container {
        height: 100%;
    }

    .overlay-content fieldset:last-child {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
    }

    .overlay a {
        padding: 5px;
        margin-top:-15px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
        z-index: 100;
    }

    .overlay a:hover, .overlay a:focus {
        color: #bababa;
    }

    .overlay .closebtn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 40px;
    }

    @media screen and (max-height: 450px) {
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    #contact-submit{
      float:right;
      cursor: pointer;
      font-size:15px;
      padding: 13px 32px;
      width:125px;
      height:45px;
      border: none;
      font-family:Verdana;
      background: #4CAF50;
      color: #FFF;
      margin: 0 0 5px;
    }

    #contact-submit:hover{
      background: #43A047;
      -webkit-transition: background 0.3s ease-in-out;
      -moz-transition: background 0.3s ease-in-out;
      transition: background-color 0.3s ease-in-out;
    }

    #contact-submit:active {
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    #label{
      float:left;
      text-decoration:underline;
      font-family:Verdana;
      font-size:13px;
    }
    #labelDetail{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
      text-align:left;
      max-height: 115px;
      overflow: auto;
    }
    #labelName{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #labelNumber{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #labelEmail{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
#labelAttach{
  float:left;
  text-decoration:underline;
  font-family:Verdana;
  font-size:13px;
  padding-top:12px;
  color:#4CAF50;
}
#labelFile{
  float:left;
  font-family:Verdana;
  padding-top:16px;
  font-size:10px;
  padding-left:7px;
}
#filename{
  font-family:Verdana;
  font-size:10px;
  padding-top:16px;

}
   #labelLocation{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
   #labelLocation1{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
   #labelCategory{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
   #labelCategory1{
      padding-left:15px;
      float:left;
      font-family:Verdana;
      font-size:13px;
    }
    #locationlabel{
      float:left;
      font-family:Verdana;
      font-size:13px;
      color:#4CAF50;
    }
    #categorylabel{
      float:left;
      font-family:Verdana;
      font-size:13px;
      color:#4CAF50;
    }

<div class="container">  
      <form id="contact">
        <h3>Connect With HR</h3>
        <fieldset class="fieldset">
          <div class="dropdown">
            <button class="dropbtn" id="my-location">Location</button>
      <div class="dropdown-content" id="location-dropdown">
        <a href="#">Gibraltar House</a>
        <a href="#">WLSC</a>
        <a href="#">CMF</a>
        <a href="#">Motorized</a>
        <a href="#">Telepharmacy</a>
        <a href="#">Anchorage-PAW</a>
        <a href="#">ADC</a>
        <a href="#">NSQM</a>
        <a href="#">Bellevue-PAW</a>
        <a href="#">PNW</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn" id="my-category">Category</button>
      <div class="dropdown-content" id="category-dropdown">
<a href="#">401K</a>
<a href="#">Accidental Death & Dismemberment</a>
<a href="#">Banking Info Change</a>
<a href="#">Bereavement</a>
<a href="#">Building Access</a>
<a href="#">Canada Savings Bonds</a>
<a href="#">Compensation</a>
<a href="#">Customer Incident</a>
<a href="#">Direct Deposit</a>
<a href="#">Effectiveness Assessment Process</a>
<a href="#">Employee and Family Assistance Program</a>
<a href="#">Employee Discount</a>
<a href="#">Employee History</a>
<a href="#">Employee Ownership Plan</a>
<a href="#">Employee Referral Program</a>
<a href="#">Employee Survey</a>
<a href="#">Employment Eligibility Verification</a>
<a href="#">Expenses</a>
<a href="#">Group Health & Dental</a>
<a href="#">Group RRSP</a>
<a href="#">Health & Safety</a>
<a href="#">Health Savings Account</a>
<a href="#">Holiday Calendar</a>
<a href="#">Holidays/Leaves</a>
<a href="#">Life Insurance</a>
<a href="#">Medical Dental & Vision</a>
<a href="#">New Hire Orientation</a>
<a href="#">Other</a>
<a href="#">Payroll</a>
<a href="#">Pension</a>
<a href="#">Personal Info change</a>
<a href="#">Policy</a>
<a href="#">Position Change</a>
<a href="#">Record of Employment</a>
<a href="#">Recruitment</a>
<a href="#">Resignation/Termination</a>
<a href="#">Shipment of Personal Belongings</a>
<a href="#">Short Term Disability</a>
<a href="#">Short Term Incentives Program (STIP)</a>
<a href="#">Sick Leave</a>
<a href="#">Tax Form</a>
<a href="#">Temporary Disability Insurance</a>
<a href="#">Time and Attendance</a>
<a href="#">Training</a>
<a href="#">Tuition Assistance Program (TAP)</a>
<a href="#">Vacation</a>
<a href="#">Work Schedule</a>
<a href="#">Workers Compensation</a>
      </div>
    </div>
        </fieldset>
        <fieldset class="fieldset">
          <label id="locationlabel">Location:</label>
          <label id="labelLocation1"></label>
        </fieldset>
        <fieldset class="fieldset">
          <label id="categorylabel">Category:</label>
          <label id="labelCategory1"></label>
        </fieldset>
        <fieldset class="fieldset">
          <textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
        </fieldset>
          <h4>Contact Information</h4>
        <fieldset class="fieldset">
            <input id="txtName" placeholder="Name" type="text" tabindex="4" >
            <input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
            <input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
        </fieldset>
        <fieldset class="fieldset">
          
          
          <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Attachment
    </label>
    <input id="file-upload" type="file"/>
          <p id="filename" style="display: inline-block"></p>
          
          <div id="myNav" class="overlay collapsed">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <div class="container">
            <h5>Summary</h5>
              <fieldset class="fieldset">
            <label id="label">Location:</label>
            <label id="labelLocation"></label>
          </fieldset>
              <fieldset class="fieldset">
            <label id="label">Category:</label>
            <label id="labelCategory"></label>
          </fieldset>
          <fieldset class="fieldset">
            <label id="label">Detail:</label>
            <label id="labelDetail"></label>
          </fieldset>
                <h6>Contact Information</h6>
              <fieldset class="fieldset">
                <label id="label">Name:</label>
                <label id="labelName"></label>
                </fieldset>
              <fieldset class="fieldset">
                <label id="label">Preferred Contact Number:</label>
                <label id="labelNumber"></label>
                </fieldset>
              <fieldset class="fieldset">
                <label id="label">Preferred Email:</label>
                <label id="labelEmail"></label>
                </fieldset>
       <fieldset class="fieldset">
         <label id="labelAttach">Attachment:</label>
         <label id="labelFile"></label>
          <button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </fieldset>
        </div>
      </div>  
    </div>  
    <span id="button" onclick="openNav()">Preview</span>
          </fieldset>
      </form>
    </div>

If you use a third party service like Mandrill, or are using a NodeJS server then yes. You need to look at their API docs (3rd party) or https://www.npmjs.com/package/nodemailer (NodeJS) — ggdx, Apr 28 '17 at 14:13

score 0 · Answer 1 · edited May 23 '17 at 12:17

No, you can't send e-mails from Javascript. You need some server side logic to do this.

See the answers at a similar question: How to send an email from JavaScript

However, there are a few API's available which send e-mails. So basically you provide them with your e-mail and there backend sends the e-mail.

I haven't tried those so I can't tell you how good they are.

email form using vanilla JavaScript button

1 Answers1