【问题标题】:Getting Contact Form from Bootstrap Template Working With GitHub Pages从使用 GitHub 页面的引导模板获取联系表
【发布时间】:2017-07-19 19:27:33
【问题描述】:

我无法在 GitHub Pages 上使用我的联系表单,因为它们提供静态网站,至少我听说过。我一直在尝试使用 Formspree,因为它在具有相同问题的其他 StackOverflow 问题中被提及,并且我还阅读了此 post。这是我当前来自 Boostrap 代理模板的 HTML/JS 代码:

$(function() {

    $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "././mail/contact_me.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            });
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});
<div class="row">
                <div class="col-lg-12">
                    <form name="sentMessage" action="http://formspree.io/allenlao26@gmail.com" method="post" id="contactForm" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="email" name="_replyto" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="tel" name="phone" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <textarea class="form-control" name="message" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>
                                <button type="submit" class="btn btn-xl" value="Send">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

这也是 PHP 文件:

<?php
// Check for empty fields

if(empty($_POST['name'])      ||
   empty($_POST['email'])     ||
   empty($_POST['phone'])     ||
   empty($_POST['message'])   ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
   echo "No arguments Provided!";
   return false;
   }

$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));

// Create the email and send the message
$to = 'http://formspree.io/allenlao26@gmail.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form:  $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: http://formspree.io/allenlao26@gmail.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

现在,当我尝试在我的页面上发送电子邮件时,我的错误消息弹出,说邮件服务器没有响应。提前感谢您的帮助!

【问题讨论】:

    标签: javascript html forms twitter-bootstrap github-pages


    【解决方案1】:

    我看到这是一篇旧帖子,但昨天遇到了同样的问题。查看您的代码,似乎 JS 和 PHP 仍在控制中,不允许 formpree 完成其工作。

    在 Codepen https://codepen.io/mblode/details/yNaxYZ/ 上的这篇帖子的帮助下,我能够得到一个表单来工作

    我使用该信息来修改(修改仅适用于 HTML,我可以删除 JS 和 PHP)我的表单页面,但保留原始样式是我的示例:

        <div class="container">
        <h2 class="text-center">Let's work together</h2>
        <hr>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <form action="https://formspree.io/you@your.com" role="form"   method="POST" autocomplete="on">
                  <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                      <input type="text" class="form-control" name="name" placeholder="Name" required>
                    </div>
                  </div>
    
                  <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                      <input type="email" class="form-control form-input" placeholder="Email" required>
                    </div>
                  </div>
    
                  <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                      <textarea class="form-control" id="message" name="message" rows="5" width="100%" placeholder="Tell me about your project" required></textarea>
                    </div>
                  </div>
                  <br>
                    <div>
                      <!-- Extra field to avoid spam by fooling scrapers. If a value is provided, the submission will be silently ignored. -->
                      <input type="text" name="_gotcha" style="display:none" />
                    </div>
                  <div>
                    <input type="submit" class="btn btn-primary" value="Send">
                    <input type="hidden" name="_subject" value="New submission!" />
                  </div>
                  <br>
                </form>
              </div>
            </div>
          </div>
        </div>
       </div>     
    </section>
    

    您可以修改它以供您使用。关键部分是:

        <form action="https://formspree.io/bill@kearneybillt.com" role="form" method="POST" autocomplete="on">
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-06-13
      • 1970-01-01
      • 2022-01-26
      • 1970-01-01
      • 1970-01-01
      • 2018-03-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多