如何让我的 HTML + JS 联系表单使用 phpmailer() 函数向我发送电子邮件？

Question

我是开发世界的初学者，我刚刚开始学习 javascript、html 和 CSS。我使用一些课程作为指导从头开始制作了一个网站，但是，这些课程仅展示如何使表单外观，而不是让它实际向我发送电子邮件。

但是我已经让网站上线了，我真的希望让这个表单发挥作用。我知道我可以使用 phpmailer() 来做到这一点，但是，到目前为止我测试过的所有代码都无法按预期工作。我对 PHP 基本上一无所知，所以我很难解决这个问题。

我已经将 phpmailer() 设置到我的主机中并对其进行了测试，它正在工作，但是一旦我尝试将其合并到网站的代码中，它就不起作用了。

这是表单的 HTML 代码：

 <section class="formcontato">
        <div id="contato" class="formcontato__contacto">
            <div class="formcontato--esquerda">
                 <img class="formcontato__img" src="assets\contact_image.png" alt="Telefone preto com flores no fundo">
            </div>
            <div class="formcontato__text">
                <h2 class="formcontato__title">Contato</h2>
                <h3 class="formcontato__subtext">Vamos conversar?</h3>
                <h3 class="formcontato__subtext">Preencha o formulário e entrarei em contato o mais rápido possível. </h3>
                <form class="formcontato__form" onsubmit="return false" method="POST">
                    <input class="formcontato__input" type="text" id="nome" placeholder="Nome">
                    <span class="error-message" id="nome-error"></span>
                    <input class="formcontato__input" type="email" id="email" placeholder="Email">
                    <span class="error-message" id="email-error"></span>
                    <input class="formcontato__input" type="text" id="assunto" placeholder="Assunto">
                    <span class="error-message" id="assunto-error"></span>
                    <textarea class="formcontato__textarea" rows="5" cols="40" id="mensagem" name="mensagem" placeholder="Sua mensagem"></textarea>
                    <span class="error-message" id="mensagem-error"></span>
                    <button class="formcontato__botao" onclick="sendMessage();">Enviar mensagem</button>
                </form>
            </div>
        </div>
    </section>

该表单使用了可能相关的 JavaScript 验证，因此这里是其完整代码：

//Conectando todos os campos para diminuir o tamanho do código
var fields = {};

document.addEventListener("DOMContentLoaded", function() {
    fields.nome = document.getElementById('nome');
    fields.email = document.getElementById('email');
    fields.assunto = document.getElementById('assunto');
    fields.mensagem = document.getElementById('mensagem');

    Object.values(fields).forEach(field => {
        field.addEventListener('input', toggleButton);
    });

    toggleButton();
})

//Verificando os campos
function checkFields() {
    var nome = fields.nome.value.trim();
    var email = fields.email.value.trim();
    var assunto = fields.assunto.value.trim();
    var mensagem = fields.mensagem.value.trim();
    
    return nome !== '' && email !== '' && assunto !== '' && mensagem !== '';
}

function isNotEmpty(value) {
    if (value == null || typeof value == 'undefined' ) return false;
    return (value.length > 0);
}
function isEmail(email) {
    let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;
    return regex.test(String(email).toLowerCase());
}
function fieldValidation(field, validationFunction, errorMessage, ...args) {
    if (field == null) return false;
   
    let isFieldValid = validationFunction(field.value, ...args);
    if (!isFieldValid) {
        field.style.color = 'red';
        document.getElementById(field.id + "-error").textContent = errorMessage;
    } else {
        field.style.color = '';
        document.getElementById(field.id + "-error").textContent = '';
    }
   
    return isFieldValid;
}

function maxLength(value, maxLength) {
    return value.trim().length <= maxLength;
}

function isValid() {
    var valid = true;
    
    valid &= fieldValidation(fields.nome, isNotEmpty, "O Nome não pode estar vazio e deve ter no máximo 50 caracteres.") && fieldValidation(fields.nome, maxLength, "O Nome não pode estar vazio e deve ter no máximo 50 caracteres.", 50);
    valid &= fieldValidation(fields.assunto, isNotEmpty, "O Assunto não pode estar vazio e deve ter no máximo 50 caracteres.") && fieldValidation(fields.assunto, maxLength, "O Assunto deve ter no máximo 50 caracteres.", 50);
    valid &= fieldValidation(fields.email, isEmail, "Por favor, insira um endereço de e-mail válido.");
    valid &= fieldValidation(fields.mensagem, isNotEmpty, "A Mensagem não pode estar vazia e deve ter no máximo 300 caracteres.") && fieldValidation(fields.mensagem, maxLength, "A Mensagem não pode estar vazia e deve ter no máximo 300 caracteres.", 300);
   
    return valid;
}

//Enviando a mensagem
function sendMessage (){
    if (isValid()){
        alert ('Mensagem enviada!');
        window.location.reload();
    }
    else {
        alert ('Ocorreu um erro, confira os seus dados');
    }
}

//Desabilitar/habilitar o botão
function toggleButton() {
    var button = document.querySelector('.formcontato__botao');
    button.disabled = !checkFields(); 
}

这是托管给我的基本 PHP 脚本，通常适用于他们的托管服务：

<?php
use PHPMailer\PHPMailer\PHPMailer;
require 'vendor/autoload.php';
    $mail = new PHPMailer;
    $mail->isSMTP();
    $mail->Host = 'smtp.hostinger.com';
    $mail->Port = 587;
    $mail->SMTPAuth = true;
    $mail->Username = '[email protected]';
    $mail->Password = 'EMAIL_ACCOUNT_PASSWORD';
    $mail->setFrom('[email protected]', 'Mr. Drago');
    $mail->addAddress('[email protected]', 'Nome do Destinatário');
    if ($mail->addReplyTo($_POST['email'], $_POST['name'])) {
        $mail->Subject = 'PHPMailer contact form';
        $mail->isHTML(false);
        $mail->Body = <<<EOT
Email: {$_POST['email']}
Name: {$_POST['name']}
Message: {$_POST['message']}
EOT;
        if (!$mail->send()) {
            $msg = 'Sorry, something went wrong. Please try again later.';
        } else {
            $msg = 'Message sent! Thanks for contacting us.';
        }
    } else {
        $msg = 'Share it with us!';
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact form</title>
</head>
<body>
<h1>Do You Have Anything in Mind?</h1>
<?php if (!empty($msg)) {
    echo "<h2>$msg</h2>";
} ?>
<form method="POST">
    <label for="name">Name: <input type="text" name="name" id="name"></label><br><br>
    <label for="email">Email: <input type="email" name="email" id="email"></label><br><br>   
    <label for="message">Message: <textarea name="message" id="message" rows="8" cols="20"></textarea></label><br><br>
    <input type="submit" value="Send">
</form>
</body>
</html>

问题是我真的想从表单中创建按钮以将电子邮件直接发送到我的收件箱，而无需为此创建一个新页面。或者换句话说，我想调整 PHP 代码，使其与我当前的代码以现有的形式一起工作，而不破坏任何东西。

我尝试使用托管给我的基本 PHP 脚本进行测试，并且它有效。但是当我尝试将其合并到我的代码中时，PHP 停止工作了。我认为这个问题可能与我的 HTML 有关，因为我使用不同的类和 id，并且我的 HTML 代码比托管给出的代码更复杂。

我尝试对 PHP 脚本进行轻微更改以匹配代码中的类，但一旦我这样做，PHP 就停止工作。没有错误消息（即使打开了 display_erros），但电子邮件未发送。

我认为我的 HTML 也缺少链接 PHP 代码的信息，但我不知道如何在不破坏代码的情况下链接它们。

我担心 javascript 验证可能也会导致 PHP 出现问题，我不知道需要调整什么。

我在网上搜索了很多，但无法修复。我知道 phpmailer() 对初学者不友好，所以这是有道理的。但我想尝试一些帮助，也许我可以让它工作哈哈

我花了几个小时阅读这里的其他帖子并在Google（甚至chatgpt）上搜索，但没有任何东西真正解决了我的问题。

您能告诉我如何更改代码才能实现这一点吗？

如果有人可以帮助我，我将非常感激！

谢谢！

Answer 1

首先，如果你想使用 javascript 验证，然后在 PHP 中处理它，那么你应该使用 ajax 来将数据从 javascript 发送到 PHP，如果你使用 JQuery 库，那么你可以编写这样的代码

$("button").click(function(){
  $.post("php file url",
  {
    name: "Donald Duck", //other information
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

或者纯js :

var http = new XMLHttpRequest();
var url = 'filename.php';
var params = 'key=value';
http.open('POST', url, true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

如果您在使用ajax或xmlhttprequest时遇到困难，请告诉我，我会回复