在联系表单中添加其他字段

Posted 2021-03-26

我想在我的联系表单中添加其他文本字段“电话号码”。联系表单已经存在于我正在使用的Bootstrap模板中，并且在没有添加的情况下工作正常。我可能写错了php。

如果没有对PHP进行任何更改，联系表单将发送一封没有问题的电子邮件。

html

<form>
    <div>
        <div class="col-md-12">
            <div class="form-group">
                <input class="form-control" type="email" name="email" placeholder="E-mail *" required="">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input class="form-control" type="text" name="number" placeholder="Telephone Number *" required="">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input class="form-control" type="text" name="subject" placeholder="Subject *" required="">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <textarea class="form-control" name="message" placeholder="Message *" rows="12" required=""></textarea>
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-md-12">
            <p>
                <input class="btn btn-block btn-brand" type="submit" value="Send Message">
            </p>
        </div>
    </div>
</form>
<!-- Ajax response-->
<div class="ajax-response text-center" id="contact-response"></div>

PHP

  // Mail settings
    $to      = "[e-mail]";


    // You can put here your email
    $header = "From: [e-mail]
";
    $header.= "MIME-Version: 1.0
";
    $header.= "Content-Type: text/plain; charset=utf-8
";
    $header.= "X-Priority: 1
";

    if (isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["number"]) && isset($_POST["subject"]) && isset($_POST["message"])) {

        $content  = "Name: "        . $_POST["name"]    . "
";
        $content .= "Email: "       . $_POST["email"]   . "
";
        $content .= "Number: "      . $_POST["number"]   . "
";
        $content .= "Subject: "     . $_POST["subject"]   . "
";
        $content .= "Message: "     . "
" . $_POST["message"];
        $subject = $_POST["subject"];

        if (mail($to, $subject, $content, $header)) {
            $result = array(
                "message"    => "Thanks for contacting us.",
                "sendstatus" => 1
            );

            echo json_encode($result);
        } else {
            $result = array(
                "message"    => "Sorry, something is wrong.",
                "sendstatus" => 0
            );

            echo json_encode($result);
        }

    }

javascript

(function($){

    $(document).ready(function() {

        /* ---------------------------------------------- /*
         * Contact form ajax
        /* ---------------------------------------------- */

        $('#contact-form').find('input,textarea').jqBootstrapValidation({
            preventSubmit: true,
            submitError: function($form, event, errors) {
                // additional error messages or events
            },
            submitSuccess: function($form, event) {
                event.preventDefault();

                var submit          = $('#contact-form submit');
                var ajaxResponse    = $('#contact-response');

                var name            = $('#contact-form [name="name"]').val();
                var email           = $('#contact-form [name="email"]').val();
                var phone           = $('#contact-form [name="phone"]').val();
                var message         = $('#contact-form [name="message"]').val();

                $.ajax({
                    type: 'POST',
                    url: 'assets/php/contact.php',
                    dataType: 'json',
                    data: {
                        name: name,
                        email: email,
                        phone: phone,
                        message: message,
                    },
                    cache: false,
                    beforeSend: function(result) {
                        submit.empty();
                        submit.append('<i class="fa fa-cog fa-spin"></i> Wait...');
                    },
                    success: function(result) {
                        if(result.sendstatus == 1) {
                            ajaxResponse.html(result.message);
                            $form.fadeOut(500);
                        } else {
                            ajaxResponse.html(result.message);
                        }
                    }
                });
            }
        });

    });

})(jQuery);

联系表格中的电子邮件应成功发送。

答案

在您的HTML和PHP代码中，您的电话号码字段名为number，但您的javascript正在查找名为“Phone”的字段，如以下代码行所示：

var phone           = $('#contact-form [name="phone"]').val();

我建议你在HTML和PHP上更改它，以便将其命名为“phone”的字段为javascript

正在发生的是javascript代码它只占用代码中列出的特定字段然后传递给PHP，但由于它与名称不匹配，它留下的字段，它不会出现在PHP脚本中，并且因为它是空的，验证失败