使用模板中的 php jquery 和 html 5 的联系表单答案

【问题标题】：Contact form using php jquery and html 5 from a template使用模板中的 php jquery 和 html 5 的联系表单
【发布时间】：2020-10-19 18:08:37
【问题描述】：

这就是与 CSS 集成的 Html 页面、PHP 中的表单和对 js 脚本的调用。

<section class="contact-section">
        <div class="container">
            <div class="d-none d-sm-block mb-5 pb-4"></div>
                <div class="row">
                <div class="col-12">
                    <h2 class="contact-title">Inoltra qui la tua richiesta</h2>
                </div>
                <div class="col-lg-8">
                    <form class="form-contact contact_form" action="contact_process.php" method="post" id="contactForm" novalidate="novalidate">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Inserisci il Messaggio'" placeholder="Inserisci il Messaggio"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input class="form-control valid" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Nome'" placeholder="Nome">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input class="form-control valid" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Inserisci l'indirizzo mail'" placeholder="Email">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Inserisci Oggetto'" placeholder="Inserisci Oggetto">
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <button type="submit" class="button button-contactForm boxed-btn">Invia</button>
                            <br><br>Questo sito è protetto dal sistema antispam Google Recaptcha.
                            <a href="https://policies.google.com/privacy">Privacy Policy</a> e <a href="https://policies.google.com/terms">Termini di servizio</a>
                        </div>
                    </form>
                </div>

这是 PHP 中的联系表单

<?php

$to = " infoessebi-ingegneria@gmail.com";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$subject = $_REQUEST['subject'];
$number = $_REQUEST['number'];
$cmessage = $_REQUEST['message'];

$headers = "From: $from";
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

$subject = "You have a new message from Site.";

$logo = 'img/logo.png';
$link = '#';

$body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Express Mail</title></head><body>";
$body .= "<table style='width: 100%;'>";
$body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
$body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
$body .= "</td></tr></thead><tbody><tr>";
$body .= "<td style='border:none;'><strong>Name:</strong> {$name}</td>";
$body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
$body .= "</tr>";
$body .= "<tr><td style='border:none;'><strong>Subject:</strong> {$csubject}</td></tr>";
$body .= "<tr><td></td></tr>";
$body .= "<tr><td colspan='2' style='border:none;'>{$cmessage}</td></tr>";
$body .= "</tbody></table>";
$body .= "</body></html>";

$send = mail($to, $subject, $body, $headers);

?>

这里我们有.js

$(document).ready(function(){

(function($) {
    "use strict";


jQuery.validator.addMethod('answercheck', function (value, element) {
    return this.optional(element) || /^\bcat\b$/.test(value)
}, "type the correct answer -_-");

// validate contactForm form
$(function() {
    $('#contactForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            subject: {
                required: true,
                minlength: 4
            },
            number: {
                required: true,
                minlength: 5
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 20
            }
        },
        messages: {
            name: {
                required: "Campo richiesto",
                minlength: "il tuo nome deve consistere in almeno 2 caratteri"
            },
            subject: {
                required: "Campo richiesto",
                minlength: "il tuo oggetti deve avere almeno 4 caratteri"
            },
            number: {
                required: "come on, you have a number, don't you?",
                minlength: "your Number must consist of at least 5 characters"
            },
            email: {
                required: "Campo richiesto"
            },
            message: {
                required: "Campo richiesto",
                minlength: "mi spiace ma non hai scritto un messaggio abbastanza lungo"
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                type:"POST",
                data: $(form).serialize(),
                url:"contact_process.php",
                success: function() {
                    $('#contactForm :input').attr('disabled', 'disabled');
                    $('#contactForm').fadeTo( "slow", 1, function() {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor','default');
                        $('#success').fadeIn()
                        $('.modal').modal('hide');
                        $('#success').modal('show');
                    })
                },
                error: function() {
                    $('#contactForm').fadeTo( "slow", 1, function() {
                        $('#error').fadeIn()
                        $('.modal').modal('hide');
                        $('#error').modal('show');
                    })
                }
            })
        }
    })
})
    
})(jQuery)
})

我的问题是为什么当所有上传的东西似乎都没有工作时？有什么线索吗？

请帮助我用我的小知识检查代码，但我找不到错误。

【问题讨论】：

什么不起作用？处理处理的 PHP 还是 javascript？你做了什么调试？
当我尝试查看问题所在时，我不知道是什么原因无法正常工作，调试软件似乎一切正常，所以我想知道我是否在某个地方遗漏了某些东西，或者我的服务器有问题
你到底指的是什么调试软件？例如，您是否使用浏览器中的开发人员工具来检查控制台错误和 AJAX 问题？确切地说，“没有任何工作”是什么意思？清楚地描述加载页面时发生的情况。你能看到表格吗？您可以输入文本并提交吗？当您尝试提交时会发生什么？验证有效吗？它是否尝试提交表单？数据是否到达 PHP。我还注意到您的 PHP 代码不会费心检查 mail() 是否成功。
是的，我使用 chrome 的控制台查看页面中的所有脚本是否运行良好，看起来还可以。但我再说一遍，我完全是 php 和 jscript 的菜鸟，所以如果你有建议，他们将不胜感激
“当我尝试提交表单时没有任何反应”...这表明 JavaScript 失败（因此您有控制台错误，或者您的脚本未正确绑定到事件），或 AJAX 调用失败（其中通常会出现控制台错误，或者至少您可以在浏览器的网络工具中看到一些内容，这将表明调用 contact_process.php 发生了什么）。不过，“什么都没有发生”并不是对问题的有用描述 - 很可能，某事发生了，只是您还没有观察到它。

标签： javascript php html jquery twitter-bootstrap

【解决方案1】：

这是我的工作代码，你应该试试。只需更改变量

这是我的简单 HTML 联系表单，其中包含与您类似的 CSS

<div class="contact-form">
            <h4 class="title-top-w3">Get in touch<span>|</span></h4>
            <h5 class="title-main-w3ls">Contact Me</h5>
            
            <div class="alert" id="status"></div>
            
                <div class="col-md-6 styled-input-w3-agile">
                    <input type="text" name="Full Name" id="name" placeholder="Enter your name" required="">
                </div>
                <div class="col-md-6 styled-input-w3-agile">
                    <input type="email" name="Email" id="email" placeholder="Enter your email" required="">
                </div>
                <div class="clearfix"> </div>
            <div class="styled-input-w3-agile">
                    <input type="phone" name="" id="phone" placeholder="Enter phone number" required="">
                </div>
            <div class="clearfix"> </div>
                <div class="styled-input-w3-agile">
                    <input type="text" name="Subject" id="title" placeholder="Enter the discussion title" required="">
                </div>
            <div class="clearfix"> </div>
                <div class="styled-input-w3-agile textarea-grid">
                    <textarea name="Message"  id="message" placeholder="Write your message" required=""></textarea>
                </div>
                <input type="submit" id="send" value="Send Message">
                
        </div>

JQuery Ajax-Call 处理 HTML IDS 并将它们传递到 sendmail.php 我将其命名为 sendmail.js

 $(document).ready(function(){
    
    $("#send").on('click', function(e){
        
        $("#send").text('Please Wait..');
        $("#send").attr('disabled', true);
        
        $.ajax({
                url: "js/sendmail.php",
            method:"POST",
                dataType:"JSON",
                data:{
                    name:$("#name").val(),
                    email:$("#email").val(),
                    phone:$("#phone").val(),
                    title:$("#title").val(),
                    message:$("#message").val()
                },
                success:function(res){
                    $("#send").text('Send Message');
                    $("#send").attr('disabled', false);
                    if (res == 1){
                        $("#status").html('Message Sent Successfully');
                    }else if(res == 0){
                        $("#status").html('Message Failed');
                    }else if(res == 2){
                        $("#status").html('Empty Fields Detected.');
                    }else if(res == 3){
                        $("#status").html('Invalid Email Address.');
                    }
                    
                },
                error: function(err){
                    
                    $('#status').html( "Network Connection Error");
                }
                });
    
        
    });
    
    });

这里是 sendmail.php，其中 Sendmail 类执行函数 getMailStatus，该函数在验证后将所有参数发送到 mail() 函数并返回用于 JQuery 的 $status

  <?php
    

class Sendmail{
    
function getMailStatus(){
    //Check For Submit
        $status = '';
        //Get Form Data
        $name = htmlspecialchars($_POST['name']);
        $phone = htmlspecialchars($_POST['phone']);
        $email = htmlspecialchars($_POST['email']);
        $title = htmlspecialchars($_POST['title']);
        $message = htmlspecialchars($_POST['message']);

        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
                $status = '3';
            } else {
                // Passed
                // Recipient Email
                $toEmail = 'omotayotemi47@gmail.com';
                $subject = ''.$title;
                $body = '<h2>Contact Request</h2>
                    <h4>Name</h4><p>'.$name.'</p>
                    <h4>Phone Number</h4><p>'.$phone.'</p>
                    <h4>Email</h4><p>'.$email.'</p>
                    <h4>Message</h4><p>'.$message.'</p>
                    ';

                //Email Headers
                $headers ="MIME-Version: 1.0" ."\r\n";
                $headers .="Content-Type:text/html;charset=UTF-8" . "\r\n";

                // Additional Headers
                $headers .= "From: " .$name. "<".$email.">". "\r\n";

                if(mail($toEmail, $subject, $body, $headers)){
                    // Email Sent
                    $status = '1';
                } else {
                    //Failed
                    $status = '2';
                }
            }
        
    return $status;
}
    
}
        
$test = new Sendmail();
    echo $test->getMailStatus();
?>

【讨论】：

请解释什么你改变了，为什么 - 这有助于其他人从你的答案中学习
这里的代码太多，没有任何的解释。一个有用的答案实际上是对代码进行解释并解释它。否则，您会期望人们自己发现并理解其中的重要部分，如果他们首先带着相关问题来到这里，对他们来说可能会很困难。这样做也很耗时，而已经知道代码的您可以使其易于理解。您的答案越简单、越有用，就会吸引越多的赞成票。
我已经编辑了代码并简要解释了每个阶段发生的情况。这是一个工作代码，我在实施后进行了一些研究，您正在路上。我懒惰地不得不使用与他相关的我自己的变量。谢谢