使用模板中的 php jquery 和 html 5 的联系表格
[英]Contact form using php jquery and html 5 from a template
问题描述
这就是与 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)
})
我的问题是为什么当所有上传的东西似乎都没有工作？ 有什么线索吗？
请帮助我用我的小知识查看代码，但我找不到错误。
1 个解决方案
解决方案1
0 2020-07-22 19:44:15
这是我的工作代码，你应该试试。 只需更改变量
这是我的简单 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");
}
});
});
});
Here is sendmail.php where the Sendmail class performs the function getMailStatus which sends all your parameters into the mail() function after validation and returns $status which is used in the JQuery
<?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();
?>
使用PHP和jQuery表单插件的联系表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.