title: sending email through my vue.js web application on the inbox folder instead of the spam folder with a different email
body: <p>I am very new to email integration for web applications so please bear with me in this situation...</p>
  
  <p>I am working on a site for a startup company and I currently have a vue.js front end app using the webpack template which contains a contact form for clients to contact the company. I also have a node.js back end application which receives the data from the front end application using websocket which I intend to use to send emails with the clients information to the startup company. My aim is to be able to send emails without using the transporter email address , but use the email address in the from: object instead. I would also like to make sure my email doesnt appear in the spam folder.</p>
  
  <p>In this example I tried using nodemailer but the email does not show the client s'email and the email appears in the junk folder.</p>
  
  <p>my front end vue.js application:</p>
  
  <pre><code>&lt;template&gt;
      &lt;main id="fullpage"&gt;
          &lt;b-form @submit.prevent="validateForm($event)" id="contactForm" autocomplete="off" 
          method="post"&gt;
              &lt;section class="section contactForm"&gt;   
                  &lt;b-form-row&gt;
                      &lt;h1&gt;{{clientMsg}}&lt;/h1&gt;
                  &lt;/b-form-row&gt;
                  &lt;b-form-row&gt;
                      &lt;b-col&gt;
                          &lt;input type="radio" name="client" value="individual" @click="IndvClient"&gt; &lt;label for="individual"&gt;an individual?&lt;/label&gt;
                      &lt;/b-col&gt;
                      &lt;b-col&gt;
                          &lt;input type="radio" name="client" value="company" @click="CorporateClient" &gt; &lt;label for="company"&gt;a company?&lt;/label&gt;
                      &lt;/b-col&gt;
                      &lt;b-col cols="12"&gt;
                          &lt;a class="steps text-right next" :href="sectionLinks.emailLink"&gt;Next&lt;/a&gt;
                      &lt;/b-col&gt;
                  &lt;/b-form-row&gt;
              &lt;/section&gt;
              &lt;section class="section contactForm"&gt;
                  &lt;b-row no-gutters&gt;      
                      &lt;b-col&gt;
                          &lt;input type="email" id="usrEmail" placeholder="Email address..." class="text-center" 
                          :pattern="emailValidation" required v-model="email" @mouseout="isValidEmail($event)" autocomplete="off"&gt;
                      &lt;/b-col&gt;
                  &lt;/b-row&gt;
                  &lt;b-row no-gutters&gt;
                      &lt;b-col cols="6"&gt;
                          &lt;a href="#clientType" class="steps text-left"&gt;Previous&lt;/a&gt;
                      &lt;/b-col&gt;
                      &lt;b-col cols="6"&gt;
                          &lt;a class="steps text-right next" :href="sectionLinks.nameLink"&gt;Next&lt;/a&gt;
                      &lt;/b-col&gt;
                  &lt;/b-row&gt;
              &lt;/section&gt;
              &lt;section class="section contactForm"&gt;
                      &lt;input type="text" name="usrName" id="usrName" placeholder="Name..." class="text-center"
                      required :pattern="textValidation" v-model="name" @mouseout="isValidName($event)" autocomplete="off"&gt;
                      &lt;b-row no-gutters&gt;
                          &lt;b-col cols="6"&gt;
                              &lt;a href="#email" class="steps text-left"&gt;Previous&lt;/a&gt;
                          &lt;/b-col&gt;
                          &lt;b-col cols="6"&gt;
                              &lt;a class="steps text-right next" :href="sectionLinks.titleLink"&gt;Next&lt;/a&gt;
                          &lt;/b-col&gt;
                      &lt;/b-row&gt;
              &lt;/section&gt;
              &lt;section class="section contactForm"&gt;
                      &lt;input type="text" name="msgTitle" id="msgTitle" placeholder="Title of the message..." 
                      class="text-center" v-model="messageTitle" required :pattern="textValidation"
                      @mouseout="isValidTitle($event)" autocomplete="off"&gt;
                      &lt;b-row no-gutters&gt;
                          &lt;b-col cols="6"&gt;
                              &lt;a href="#name" class="steps text-left"&gt;Previous&lt;/a&gt;
                          &lt;/b-col&gt;
                          &lt;b-col cols="6"&gt;
                              &lt;a class="steps text-right next" :href="sectionLinks.msgLink" &gt;Next&lt;/a&gt;
                          &lt;/b-col&gt;
                      &lt;/b-row&gt;
              &lt;/section&gt;
              &lt;section class="section contactForm"&gt;
                  &lt;b-row no-gutters&gt;
                      &lt;b-col cols="12"&gt;
                          &lt;textarea name="" id="msgContent" cols="100" rows="7" 
                          placeholder="Message..." v-model="message" required 
                          @mouseout="isValidMsg($event)"&gt;&lt;/textarea&gt;
                      &lt;/b-col&gt;
                  &lt;/b-row&gt;
                  &lt;b-row no-gutters&gt;
                      &lt;b-col cols="6"&gt;
                          &lt;a href="#title" class="steps text-left"&gt;Previous&lt;/a&gt;
                      &lt;/b-col&gt;
                      &lt;b-col cols="6"&gt;
                          &lt;a class="steps text-right next" :href="sectionLinks.msgSummaryLink"&gt;Next&lt;/a&gt;
                      &lt;/b-col&gt;
                  &lt;/b-row&gt;  
              &lt;/section&gt;
              &lt;section class="section contactForm formSummary"&gt;
                      &lt;ul class="prevFormLinks"&gt;
                          &lt;li v-for="section in previousLinks"&gt;
                              &lt;a :href="section.link"&gt;{{section.name}}&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;b-form-row&gt;
                          &lt;p&gt;{{clientMsg}}&lt;/p&gt;
                      &lt;/b-form-row&gt;
                      &lt;b-form-row&gt;
                          &lt;b-col&gt;
                              &lt;input type="radio" name="userClient" value="individual"&gt; &lt;label for="individual"&gt;an individual?&lt;/label&gt;
                          &lt;/b-col&gt;
                          &lt;b-col&gt;
                              &lt;input type="radio" name="userClient" value="company"&gt; &lt;label for="company"&gt;a company?&lt;/label&gt;
                          &lt;/b-col&gt;
                      &lt;/b-form-row&gt;
                      &lt;b-form-row&gt;
                          &lt;b-col&gt;
                              &lt;h2&gt;Your email:&lt;/h2&gt;
                          &lt;/b-col&gt;
                          &lt;b-col&gt;
                              &lt;p&gt;{{email}}&lt;/p&gt;
                          &lt;/b-col&gt;
                      &lt;/b-form-row&gt;
                      &lt;b-form-row&gt;
                          &lt;b-col&gt;
                              &lt;h2&gt;Name:&lt;/h2&gt;
                          &lt;/b-col&gt;
                          &lt;b-col&gt;
                              &lt;p&gt;{{name}}&lt;/p&gt;
                          &lt;/b-col&gt;
                      &lt;/b-form-row&gt;
                      &lt;b-form-row&gt;
                          &lt;b-col&gt;
                              &lt;h4&gt;Title of the message:&lt;/h4&gt;
                          &lt;/b-col&gt;
                          &lt;b-col&gt;      
                              &lt;p&gt;{{messageTitle}}&lt;/p&gt;
                          &lt;/b-col&gt;
                      &lt;/b-form-row&gt;
                      &lt;b-form-row&gt;
                          &lt;b-col cols="5" id="msgSummary"&gt;
                              &lt;p&gt;{{message}}&lt;/p&gt;
                          &lt;/b-col&gt;
                      &lt;/b-form-row&gt;
                      &lt;b-form-row&gt;
                          &lt;b-col cols="12"&gt;
                              &lt;input type="submit" value="Submit!"&gt;
                          &lt;/b-col&gt;
                      &lt;/b-form-row&gt;
              &lt;/section&gt;
          &lt;/b-form&gt;  
      &lt;/main&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import fullpage from 'fullpage.js'
  import $ from "jquery"
  /** 
      Make sure you can then send an email
      Replace the jQuery animations with anime.js or another way of animating.
      There are no previous buttons for the summary section.
      */
      export default {
          data(){
              return {
                  "clientMsg":this.$store.state.contact.TypeOfClientMsg,
                  "name":"",
                  "email":"",
                  "messageTitle":"",
                  "message":"",
                  "emailValidation":"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
                  "textValidation":"[a-zA-Z ]+",
                  "sectionLinks":{
                      "clientLink":"#clientType",
                      "emailLink":"#email",
                      "nameLink": "#name",
                      "titleLink":"#title",
                      "msgLink":"#message",
                      "msgSummaryLink":"#messageSummary"
                  },
                  "previousLinks":[
                      {
                          "link":"#clientType",
                          "name":"Client"
                      },
                      {
                          "link":"#email",
                          "name":"Email"
                      },
                      {
                          "link":"#name",
                          "name":"Name"
                      },
                      {
                          "link":"#title",
                          "name":"Title"
                      },
                      {
                          "link":"#message",
                          "name":"Message"
                      }
                  ],
                  "companyEmail":"salay777@hotmail.co.uk"
              }
          },
          methods:{
              IndvClient:function(){
                      let ind = document.querySelectorAll('input[value="individual"]');
                      let company = document.querySelectorAll('input[value="company"]'),
                      goToEmail = document.querySelector('a[href="#email"]');
                      (ind[0].checked == true)? ind[1].checked = true : ind[1].checked = false;
                      $(goToEmail).fadeIn();
              },
              CorporateClient:function(){
                      let ind = document.querySelectorAll('input[value="individual"]');
                      let company = document.querySelectorAll('input[value="company"]'),
                      goToEmail = document.querySelector('a[href="#email"]');
                      (company[0].checked == true)? company[1].checked = true : company[1].checked = false;
                      $(goToEmail).fadeIn();
              },
              isValidEmail:function(e){
                  let goToName = document.querySelector('a[href="#name"]');
                  (e.target.checkValidity())? $(goToName).fadeIn() : $(goToName).fadeOut();
              },
              isValidName:function(e){
                 let goToTitle = document.querySelector('a[href="#title"]');
                 (e.target.checkValidity())? $(goToTitle).fadeIn() : $(goToTitle).fadeOut();
              },
              isValidTitle:function(e){
                  let goToMsg = document.querySelector('a[href="#message"]');
                  (e.target.checkValidity())? $(goToMsg).fadeIn() : $(goToMsg).fadeOut();
              },
              isValidMsg:function(e){
                  let goToSummary = document.querySelector('a[href="#messageSummary"]');
                  (e.target.checkValidity())? $(goToSummary).fadeIn() : $(goToSummary).fadeOut();
              },
              validateForm:function(e){
                  let idvClient = document.querySelector('input[value="individual"]'),
                  corporateClient = document.querySelector('input[value="company"]'),
                  usrEmail = document.getElementById('usrEmail'), usrName = document.
                  getElementById('usrName'), msgTitle = document.getElementById('msgTitle'),
                  msgContent = document.getElementById('msgContent'), 
                  socket = io.connect('http://localhost:5000/');
  
  
                  if(idvClient.checked !== corporateClient.checked){
                      console.log('client has been checked');
                      if(usrEmail.checkValidity() == false || usrName.checkValidity() == false ||
                          msgTitle.checkValidity() == false || msgContent.checkValidity() == false){
                              e.preventDefault();
                          } else {
                              let email = {
                                      client :"",
                                      email: this.email,
                                      name: this.name,
                                      title: this.messageTitle,
                                      message: this.message
                              };
                              if(idvClient.checked){
                                  email.client = "[IDV]";
                              }
                              if(corporateClient.checked){
                                  email.client = "[CO]";
                              }
  
                              socket.emit('email',email);
                              alert('submitted!');
                          }
                  } else {
                      console.log('you need to select a client type');
                      e.preventDefault();
                  }
              }
          },
          mounted(){
                  let idvClient = document.querySelector('input[value="individual"]'),
                  corporateClient = document.querySelector('input[value="company"]'),
                  goToEmail = document.querySelector('a[href="#email"]'), form =
                  document.querySelector('form');
  
                  form.setAttribute('autocomplete', 'off');
  
                  if(idvClient.checked == corporateClient.checked){
                      goToEmail.style.display = 'none';
                  }
          }
      };
  &lt;/script&gt;
  &lt;style&gt;
  
  html body #fullpage {
      background-color:#383838 !important; 
      background-image: none !important;
  }
  
  html, body,#fullpage {
      overflow: hidden !important;
  }
   .fp-tableCell{
    text-align:center;
    display:flex;
    justify-content: center; 
    align-items: center;
    flex-direction: column;
  
  }
  
   .contactDetails .row {
     margin:0px;
   }
  
  .contactForm .form-row {
    min-width:500px;
    justify-content:center;
  }
  
  .contactForm .form-row a, .contactForm .row a {
      margin: 60px;
      text-decoration: none;
      color: #f4f4f4;
      font-size: 36px;
      font-weight: 100;
      transition: color .5s, font-size .2s;
  }
  
  .contactForm .form-row a:hover, .contactForm .row a:hover {
      color:orange;
      font-size:40px;
  }
  
  #menu {
      display: none !important;
  }
  
  button {
      margin-top:20px;
  }
  
  h1, h2, h3 , h4 {
      font-weight:100;
  }
  
  .next {
      display: none;
  }
  
  #msgSummary {
      word-wrap: break-word;
      text-align:left;
  }
  
  .formSummary, .formSummary h2 , .formSummary h4, 
  .formSummary p {
      text-align:left !important;
  }
  
  .prevFormLinks {
      position:absolute;
      left:30px;
      text-align:left;
      margin:0px !important;
      padding:0px;
      color:white !important;
  }
  
  .prevFormLinks a {
      font-size:20px !important;
      margin:0px!important;
      padding: 0px !important;
      text-decoration: none;
      color: white !important;
      font-weight:100;
      transition: font-size .25s, color 2s;
  }
  
  .prevFormLinks a:hover {
      font-size: 25px !important;
      color: orange !important;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>my email module for my back end application:</p>
  
  <p>let emailModule = (function(){
      let nodemailer = require('nodemailer'), mailOptions = {from:'', to:'', subject:'', text:''};</p>
  
  <pre><code>let transporter = nodemailer.createTransport({
      service : 'gmail',
      auth: {
          user:'projectgorillatransporter@gmail.com',
          pass'*******'
      }
  });
  
  let setMailOptions = (from, to, subject, text)=&gt;{
     return new Promise((resolve, reject)=&gt;{
          mailOptions.from = from;
          mailOptions.to = to;
          mailOptions.subject = subject;
          mailOptions.text = text;
  
          console.log(mailOptions);
          resolve(mailOptions);
          reject(Error('the mailOPtions object was not created'));
     });
  };
  
  let sendEmail = (mailOptions)=&gt;{
      transporter.sendMail(mailOptions, (err, info)=&gt;{
          if (err) {
              console.log(err);
            } else {
              console.log('Email sent: ' + info.response);
            }
      });
  }
  
      return {
          send : sendEmail,
          setMailOptions : setMailOptions
      }
  })(); // end of the email module
  
  module.exports = emailModule;
  </code></pre>
  
  <p>my node.js server in charge of handling data:</p>
  
  <pre><code>let express = require('express'), app = express(), path = require('path'),
  socket = require('socket.io'), emailModule = require('./email.js');
  
  let server = app.listen(5000, ()=&gt;{
      console.log('listening to requests...');
  });
  
  
  let io = socket(server);
  
  app.get('/', function(req, res) {
      res.sendFile(path.join(__dirname + '/index.html'));
  });
  
  io.on('connection', (socket)=&gt;{
      console.log('made a connection!');
  
      socket.on('email', (data)=&gt;{
          /**
           * Here you need to set your email options which includes the clients email, destination email,
           * subject and the text (the email content).
           */
          emailModule.setMailOptions(data.email,'salay777@hotmail.co.uk', data.client + ' ' + '(' +
          data.name + ')' + ' ' + data.title, data.message).then((mailOpts)=&gt;{
              emailModule.send(mailOpts);
              console.log('email has been sent!');
          });
      });
  });
  </code></pre>