在本教程中,我们将看到如何通过html表单使用PHP和JavaScript发送电子湖北福彩。
电邮表格
让我们从使用Bootstrap类构建表单开始。您可以为表单创建自己的自定义设计,但是您要做的就是声明每个特定输入的ID。
它从表单获取值并将其存储在变量中,这些变量将在javascript文件中声明。
所以首先声明 形成 标签。
<!-- Set id for email 形成 -->
<form name="sendMail" id="sendMailForm">
</form>
现在从用户那里获取价值,我们将使用 引导程序 类,我们也会在成功发送消息后或发生任何错误时创建通知。
<form name="sendMail" id="sendMailForm">
<div class="形成-group user-name">
<label for="name" class="sr-only">Name</label>
<!-- "id" for taking name -->
<input type="text" class="形成-control" required="" id="name" placeholder="First Name">
</div>
<div class="形成-group user-email">
<label for="email" class="sr-only">Email</label>
<!-- "id" for taking email -->
<input type="email" class="形成-control" required="" id="email" placeholder="Email Address">
</div>
<div class="形成-group user-phone">
<label for="contactNumber" class="sr-only">Contact Number</label>
<!-- "id" for taking contact number -->
<input type="text" class="形成-control" required="" id="contactNumber" placeholder="Phone">
</div>
<div class="形成-group user-message">
<label for="message" class="sr-only">Message</label>
<!-- "id" for taking message -->
<textarea class="形成-control" required="" id="message" placeholder="Write Message"></textarea>
</div>
<!-- Notifications for 'error' Or 'successfully'-->
<div class="col-md-12 mailResponse" style="display:none;">
<div class="alert alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p class="mailResponseText"></p>
</div>
</div>
<!-- submit button -->
<button type="submit" class="btn btn-primary">Send Message <i class="fa fa-paper-plane"></i></button>
</form>
电子湖北福彩的Javascript
脚本文件将表单中的值存储到变量中。我们还将使用JQuery来切换通知。
// #sendMailForm takes the data from the 形成 with given ID
$( '#sendMailForm' ).submit(function ( e ) {
var data = {
'name': $('#name').val(),
'email': $('#email').val(),
'contact': $('#contactNumber').val(),
'message' : $('#message').val()
};
// POST data to the 的PHP file
$.ajax({
url: 'mail.php',
data: data,
type: 'POST',
success: function (data) {
// For Notification
document.getElementById("sendMailForm").reset();
var $alertDiv = $(".mailResponse");
$alertDiv.show();
$alertDiv.find('.alert').removeClass('alert-danger alert-success');
$alertDiv.find('.mailResponseText').text("");
if(data.error){
$alertDiv.find('.alert').addClass('alert-danger');
$alertDiv.find('.mailResponseText').text(data.message);
}else{
$alertDiv.find('.alert').addClass('alert-success');
$alertDiv.find('.mailResponseText').text(data.message);
}
}
});
e.preventDefault();
});
PHP电子湖北福彩传输
在PHP代码中,我们将通过提供特定的电子湖北福彩ID来设置从网站转移湖北福彩的位置,并且还将设置要发送电子湖北福彩的数据,即包含姓名,联系电话,电子湖北福彩地址和消息的电子湖北福彩详细信息。
标头中发送的数据采用JSON格式。
<?php
// data sent in header are in JSON 形成at
header('Content-Type: application/json');
// takes the value from variables and Post the data
$name = $_POST['name'];
$email = $_POST['email'];
$contact = $_POST['contact'];
$postmessage = $_POST['message'];
$to = "[email protected]";
$subject = "联系我们";
// Email Template
$message = "<b>Name : </b>". $name ."<br>";
$message .= "<b>Contact Number : </b>".$contact."<br>";
$message .= "<b>Email Address : </b>".$email."<br>";
$message .= "<b>Message : </b>".$postmessage."<br>";
$header = "From:"+$email+" \r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html\r\n";
$retval = mail ($to,$subject,$message,$header);
// message Notification
if( $retval == true ) {
echo json_encode(array(
'success'=> true,
'message' => 'Message sent successfully'
));
}else {
echo json_encode(array(
'error'=> true,
'message' => 'Error sending message'
));
}
?>
注意 : 发送电子湖北福彩的工作将无法在localhost上进行。它仅适用于在托管服务器上运行。