HTML | Lassen Sie ein Formular eine E-Mail an die vom Benutzer eingegebene E-Mail senden

Question

Ich versuche ein Registrierungsformular zu erstellen. Dieses Formular enthält ein E-Mail-Textfeld. Wie mache ich es so, dass der Code eine E-Mail an die vom Benutzer eingegebene E-Mail sendet?

Hier ist der Code:

<form name="regForm" method="post" onsubmit="return validateSignupForm()">
                        <div class="form-group mb-0">
                            <label for="formGroupEmail"></label>
                            <input type="email" class="form-control" id="formGroupEmail" placeholder="Email address"
                                name="signupEmail">
                        </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" value="Sign up" class="btn btn-danger">
                </div>
</form>

Vielen Dank

Answer 1

HTML unterstützt das Senden von E-Mails nicht. Dazu benötigen Sie eine Backend-Sprache.
Ich rot, Sie verwenden Knoten js: so ist es wirklich einfach. Klicken Sie auf die Schaltfläche "Senden", um eine Post-Anfrage an den Server zu senden (mit E-Mail-Inhalt, Titel und Empfänger). Dann müssen Sie den Server dazu bringen, die Anfrage zu lesen und die E-Mail mit nodemailer zu senden (ich denke, dies ist der beste Service).
Um Nodemailer zu installieren, schreiben Sie einfach in die Bash

npm install nodemailer

Wenn Sie ein Tutorial über Nodemailer lesen möchten, würde ich Ihnen dies vorschlagen , das ist wirklich gut gemacht.

Hier ist ein einfaches Beispiel dafür, was Sie versuchen: client.html

<form action="/sendEmail" method="post">
  <input type="text" name="content">
  <input type="text" name="email">
  <input type="submit">
</form>

und dies ist ein Beispiel dafür , wie eine E - Mail mit nodemailer senden: aber vorsichtig sein, müssen Sie diese implementieren in einem Server (ich würde vorschlagen , dass Sie ausdrücken, Blick auf diesem )

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: '[email protected]',
    pass: 'yourpassword'
  }
});

var mailOptions = {
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Beachten Sie auch, dass es einige E-Mail-APIs gibt, mit denen Sie eine E-Mail von js ohne Server senden können (z. B. emailjs oder Sendgrid ).
Lassen Sie mich wissen, ob dies geholfen hat und wenn Sie Fragen haben, fragen Sie einfach;)

---

BEARBEITEN:

Wenn Sie Express auf Ihrem Server verwenden möchten (dies wäre die logischere Wahl), möchte ich Ihnen den folgenden Code vorschlagen, der einen Express-Server erstellt, der nach Anforderungen sucht und E-Mails sendet

const nodemailer = require('nodemailer');
const express = require('express');
const app = express();
const port = 80;
var account_data = {email: "[email protected]", password: "yourpassword", service: "gmail"}

app.use(express.json());

app.post('/sendEmail', (req,res) => {
  var transporter = nodemailer.createTransport({
    service: account_data["service"],
    auth: {
      user: account_data["email"],
      pass: account_data["password"]
    }
  });
  var mailOptions = {
    from: account_data["email"],
    to: req.body.email,
    subject: 'some subject',
    text: req.body.content
  };
  transporter.sendMail(mailOptions, function(error, info){
    if (error) {
      console.log(error);
    } else {
      console.log('Email sent: ' + info.response);
    }
  });
  res.send('Email sent');
})

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
})

Um dies auszuführen, denken Sie daran, dass Sie sowohl Express als auch Nodemailer installieren müssen. Suchen Sie hier nach einem Tutorial zu Express.
Da @KevinPotgieter bemerkte, dass Nodemailer für Google Cloud Platform nicht funktioniert, welches Hosting verwenden Sie?

Answer 2

Für die Verwendung eines Backends nicht unbedingt erforderlich. Sie können einen Dienst wie SendGrid zum Senden der E-Mails verwenden. Sie müssen ihre API verwenden, nachdem Sie ein Konto erstellt haben. Ich denke, die ersten 1000 E-Mails pro Monat sind kostenlos

https://sendgrid.com/

Beispiel:

const sendGridMail = require('@sendgrid/mail');
sendGridMail.setApiKey(options.send_grid_api_key);

const mail = {
   from: from_email,
   to: recipient,
   subject: email_subject,
   html: html_text
};

sendGridMail.send(mail, false),

Answer 3

Leider unterstützt HTML das Senden von E-Mails nicht. Dazu benötigen Sie ein Backend (PHP, Java, Node js).