[英]One Page Contact Form PHP & Script
I am making a one page website, and I would like to add a contact form in one section.我正在制作一个单页网站,我想在一个部分中添加一个联系表格。 So I am working with PHP, thing is, I cant seem to find any base pre-made forms that do not open a new webpage or direct that you to a new page once you submit.
所以我正在使用 PHP,事情是,我似乎找不到任何基本的预制表单,这些表单不会打开新网页或在您提交后将您定向到新页面。 I would like to keep this one page, so I would like an overlay to appear once everything is all correct in the form and it has been submitted.
我想保留这一页,所以我希望在表单中的所有内容都正确并已提交后显示叠加层。 No popups or redirects.
没有弹出窗口或重定向。 This may require jQuery but I am not sure how to put it in so it actually does that.
这可能需要 jQuery,但我不确定如何将其放入,因此它实际上是这样做的。
Here is how I have set up the form in HTML:以下是我在 HTML 中设置表单的方法:
<form action="mail.php" method="post" enctype="multipart/form-data" >
<label></label>
<input name="name" required placeholder="Your Name">
<label></label>
<input name="email" type="email" required placeholder="Your Email">
<label></label>
<textarea name="message" cols="20" rows="5" required placeholder="Message"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
Here is mail.php这是mail.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Website';
$to = 'email@emailhere.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Thank you for your message! </p>';
} else {
echo '<p>An error occurred. Try sending your message again.</p>'; }}?>
Now, I would like to be able to remove the echo for the thank you message, and replace it with jQuery code for an overlay I made.现在,我希望能够删除感谢消息的回声,并将其替换为我制作的叠加层的 jQuery 代码。
$(document).ready(function() {
$("#overlay").show();
});
I am missing a part of the function, as right now its just going to show when the page is ready.我错过了该功能的一部分,因为现在它只会在页面准备好时显示。 But I don't know where to put that/how it works with this PHP.
但我不知道把它放在哪里/它如何与这个 PHP 一起工作。
My confusion is I am not sure where the PHP is telling it to go to some blank page when you hit submit, so I don't know where to stop and start the script.我的困惑是当你点击提交时,我不确定 PHP 在哪里告诉它去某个空白页面,所以我不知道在哪里停止和启动脚本。 I also just don't know how to mesh this all together properly.
我也不知道如何将它们正确地结合在一起。 Is it in the PHP or the script where I have it check all elements before it can call to action the "thank you overlay".
是在 PHP 中还是在脚本中,我让它检查所有元素,然后才能调用“谢谢覆盖”。 I just don't really know what direction to go from here.
我只是真的不知道该往哪个方向走。
Thank you so much for your time.非常感谢您的参与。 I am learning a lot of this on my own so my knowledge is patchy.
我自己学习了很多这方面的知识,所以我的知识是零散的。
Please let me know if I can help clear anything up.请让我知道我是否可以帮助清理任何东西。
-rj -rj
Hava a look at jQuery Ajax . Hava 看看 jQuery Ajax 。 Usually, you throw data by the server by going to another page, so you do a "synchronous" request.
通常,服务器通过转到另一个页面来抛出数据,因此您执行“同步”请求。 The Ajax technique enables you to stay on the page, while a request is made, an "asynchronous" request.
Ajax 技术使您能够在发出请求时停留在页面上,这是一个“异步”请求。 JQuery makes Ajax requests much simpler.
JQuery 使 Ajax 请求变得更加简单。 Good luck ;)
祝你好运 ;)
尝试在#submit
按钮上添加一个onclick
事件并在#submit
使用 Javascript XMLHttpRequest
对象而不是action="mail.php"
This is working from example, hope it can push you on correct path :)这是从示例中工作的,希望它可以将您推向正确的道路:)
Add this string right after submit button在提交按钮后立即添加此字符串
<span class="status"></span>
PHP PHP
if($mail_sent){
echo "<span class='notice'>Your message has been sent, thank you.</span>";
exit;
}else{
echo "<span class='error'>We couldn't send your message please try again, thank you.</span>";
exit;
}
And JS part to display errors和 JS 部分显示错误
jQuery(function($) {
$("#contact-form").submit(function(){
return false;
})
$("#contact-form input[type=submit]").click(function(event){
var formerror = false;
$(this).attr('disabled', 'disabled').css({'cursor': 'auto', 'opacity': 0.5});
$('.status').fadeIn('normal').html('Loading please wait...');
$(this).closest("form").find("input, textarea").each(function(){
error = false;
switch($(this).attr('id')){
case 'name':
if($(this).val().match(/^[a-zA-Z\ \']+$/) == null || $(this).val() == "Name")
error = true;
else
error = false;
break;
case 'email':
if($(this).val().match(/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/) == null)
error = true;
else
error = false;
break;
case 'message':
if($(this).val().length < 4 || $(this).val() == "Type your message")
error = true;
else
error = false;
break;
}
if(error){
$(this).css('border-color', '#f00');
formerror = true;
}
});
if(formerror){
$('.status').fadeOut('normal',
function(){
$(this).html("One or more required fields are missing or invalid, please correct and resend.")
.addClass("error");
}
).fadeIn();
$(this).removeAttr('disabled').css({'cursor': 'pointer', 'opacity': 1});
event.preventDefault();
}else{
//get teh link
$.post( "contact.php", { name: $('#name').val(),
email: $('#email').val(),
website: $('#website').val(),
message: $('#message').val()
})
.done(function( data ) {
$('.status').removeClass('error').fadeIn('normal', function(){$(this).html(data)});
$("#contact-form input[type=submit]").removeAttr('disabled').css({'opacity': 1, 'cursor': 'pointer'});
});
event.preventDefault();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.