Contact Form 2017

Question

My question is simple and direct: Currently, in 2017, with the advancement of Javascript... Is there any way I can make a contact form 100% via javascript without using a PHP for example? If not, there is some tool as simple as the PHP for this service? I don’t know anything about PHP, and wanted to make a contact form.

What exits do I have?

Thank you!

Answer 1

You will always need a back-end that will do the sending of email, this is indispensable (but using Nodejs, you do the sending, which turns only JS).

An example of this using JS + NodejS

<input type="email" id="email">
<textarea id="msg"></textarea>
<button id="btn">Entrar em Contato</button>

<script>
   document.getElementById('btn').onclick = function(){
      let email = document.getElementById('email').value
      let msg = document.getElementById('msg').value

      // Exemplo usando axios
      axios.post('SUA URL', {
         email: email,
         msg: msg
      })
      .then(response => {
          alert('FOI')
      })
      .catch(error => {
          alert('ERRO')
      })
   }
</script>


// Do lado do servidor com Node

'use strict';
const nodemailer = require('nodemailer');

// Generate test SMTP service account from ethereal.email
// Only needed if you don't have a real mail account for testing
nodemailer.createTestAccount((err, account) => {

    // create reusable transporter object using the default SMTP transport
    let transporter = nodemailer.createTransport({
        host: 'smtp.ethereal.email',
        port: 587,
        secure: false, // true for 465, false for other ports
        auth: {
            user: account.user, // generated ethereal user
            pass: account.pass  // generated ethereal password
        }
    });

    // setup email data with unicode symbols
    let mailOptions = {
        from: '"Fred Foo " <[email protected]>', // sender address
        to: '[email protected], [email protected]', // list of receivers
        subject: 'Hello ✔', // Subject line
        text: 'Hello world?', // plain text body
        html: '<b>Hello world?</b>' // html body
    };

    // send mail with defined transport object
    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return console.log(error);
        }
        console.log('Message sent: %s', info.messageId);
        // Preview only available when sending through an Ethereal account
        console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));

        // Message sent: <[email protected]>
        // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
    });
});

SOURCE: https://nodemailer.com/about/