bootstrap联系表单发送空白电子邮件

时间:2017-04-17 16:05:04

标签: javascript php twitter-bootstrap email twitter-bootstrap-3

我尝试修复此问题未成功,我使用了引导程序联系表单(模板)发送空白电子邮件。

我在开发者论坛和这个网站上搜索过,我尝试了一些操作,但它仍然存在。

这可能是(点)缺失的问题;但我不是PHP专家,我只知道一些基础......

HTML

              <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
                <div class="row  wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="text" name="name" class="form-control" placeholder="Name" required="required"></input>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <input type="email" name="email" class="form-control" placeholder="Email Address" required="required"></input>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <input type="text" name="subject" class="form-control" placeholder="Subject" required="required"></input>
                </div>
                <div class="form-group">
                  <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required="required"></textarea>
                </div>                        
                <div class="form-group">
                  <button type="submit" class="btn-submit">Send Now</button></input>
                </div>
              </form> 

我的sendemail.php

<?php
$name       = @trim(stripslashes($_POST['name'])); 
$from       = @trim(stripslashes($_POST['email'])); 
$subject    = @trim(stripslashes($_POST['subject'])); 
$message    = @trim(stripslashes($_POST['message'])); 
$to   		='index@indexmarkets.biz';

$headers = [ // or array( for older PHP versions. 
 "MIME-Version: 1.0",
 "Content-type: text/plain; charset=iso-8859-1",
 "From: $name <$from>",
 "Reply-To: <$from>",
 "Subject: $subject",
 "X-Mailer: PHP/".phpversion()
];

mail($to, $subject, $message, join('\r\n', $headers));

die;

JS

// Contact form
	var form = $('#main-contact-form');
	form.submit(function(event){
		event.preventDefault();
		var form_status = $('<div class="form_status"></div>');
		$.ajax({
			type: "POST",
                        url: $(this).attr('action'),
			data: {
                           name: $('input[name]').val(),
                           email: $('input[email]').val(),
                           subject: $('input[subject]').val(),
                           message: $('input[message]').val()
                              },
                        beforeSend: function(){
				form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
                        form.submit(function () {
                        $this = $(this);
                        $.post($(this).attr('action'),$(this).serialize(), function(data) {
                        $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
                        },'json');
                        return false;
                        });
			}
		}).done(function(data){
			form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
		});
	});

1 个答案:

答案 0 :(得分:0)

输入选择器错误 使用

data: {
  name: $('input[name=name]').val(),
  email: $('input[name=email]').val(),
  subject: $('input[name=subject]').val(),
  message: $('textarea[name=message]').val()
}

正如评论中所述,您正在beforeSend回调中再次发布POST。

更新

虽然可以做很多事情,但这是一个基于你自己的例子。

(function ($) {
    var messages = {
        'progress': '<p><i class="fa fa-spinner fa-spin"></i> Sending email...</p>',
        'success': '<p class="text-success">Thank you for contacting us. We will contact you as early as possible.</p>',
        'error': '<p class="text-danger">Something went wrong.</p>'
    };
    var $form = $('form#main-contact-form');
    var formStatus = $('<div class="form_status"/>');
    $form.submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: $form.attr('action'),
            data: $form.serialize(),
            dataType: 'json',
            beforeSend: function () {
                formStatus.html(messages.progress).fadeIn().prependTo($form);
            },
            success: function (data) {
                if (data.success === true) {
                    formStatus.html(messages.success);
                } else {
                    formStatus.html(messages.error);
                }
                formStatus.fadeIn().delay(3000).fadeOut();
            },
            error: function () {
                formStatus.html(messages.error).fadeIn().delay(3000).fadeOut();
            }
        });
    })
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<form id="main-contact-form" name="contact-form" method="post" action="sendemail.php" accept-charset="UTF-8">
    <div class="row wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
        <div class="col-sm-6">
            <div class="form-group">
                <input type="text" name="name" class="form-control" placeholder="Name" required="required"/>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <input type="email" name="email" class="form-control" placeholder="Email Address" required="required"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="subject" class="form-control" placeholder="Subject" required="required"/>
    </div>
    <div class="form-group">
        <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required="required"></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn-submit">Send Now</button>
    </div>
</form>

<?php
$to = 'index@indexmarkets.biz';
$name = !empty($_POST['name']) ? filter_var(trim($_POST['name']), FILTER_SANITIZE_STRING) : '';
$from = !empty($_POST['email']) ? filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL) : $to;
$subject = !empty($_POST['subject']) ? filter_var(trim($_POST['subject']), FILTER_SANITIZE_STRING) : '';
$message = !empty($_POST['message']) ? filter_var(trim($_POST['message']), FILTER_SANITIZE_STRING) : '';

$body = "Name: {$name}\r\nEmail: {$from}\r\nMessage: {$message}";

$body = wordwrap($body, 70, "\r\n");

$headers = [
    'MIME-Version: 1.0',
    'Content-type: text/plain; charset=iso-8859-1',
    "From: $name <$from>",
    "Reply-To: <$from>",
    "Subject: $subject",
    'X-Mailer: PHP/' .phpversion()
];

$success = @mail($to, $subject, $body, implode('\r\n', $headers));

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    die(json_encode(['success' => $success]));
}

echo $success ? 'Sent Successfully.' : 'An error occurred';