如何在Wordpress站点的页脚添加一个引导联系表单


How do you add a bootstrap contact form into the footer of a Wordpress site?

好的,所以当前的设置是有效的,但是它需要将用户重定向到一个感谢页面。

我更希望用户停留在同一页面上,而不是弹出一个小小的感谢信息。

HTML包含在我为站点创建的子主题的footer.php中。

在这里查看实时版本,表单包含在页脚中:[edit]nvm问题解决[/edit]

注意:页脚是硬编码的,所以我假设他们是没有办法添加一个联系表单插件到它。对吗?

<h3>LEAVE US A MESSAGE</h3>
<form name="contactform" method="post" action="http://example.com/wp-content/themes/fullby-child/mail/mailer.php" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputName" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputSubject" class="col-lg-2 control-label">Subject</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword1" class="col-lg-2 control-label">Message</label>
        <div class="col-lg-10">
            <textarea class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..."></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
            <button type="submit" class="btn btn-default">
                Send Message
            </button>
        </div>
    </div>
</form>

<?php
/* Set e-mail recipient */
$myemail = "jack@example.com";
/* Check all form inputs using check_input function */
$name = check_input($_POST['inputName'], "Your Name");
$email = check_input($_POST['inputEmail'], "Your E-mail Address");
$subject = check_input($_POST['inputSubject'], "Message Subject");
$message = check_input($_POST['inputMessage'], "Your Message");
/* If e-mail is not valid show error message */
if (!preg_match("/(['w'-]+'@['w'-]+'.['w'-]+)/", $email))
{
show_error("Invalid e-mail address");
}
/* Let's prepare the message for the e-mail */
$subject = "Someone has sent you a message";
$message = "
Someone has sent you a message using your contac form:
Name: $name
Email: $email
Subject: $subject
Message:
$message
";
/* Send the message using mail() function */
mail($myemail, $subject, $message);
/* Redirect visitor to the thank you page */
header('Location: http://example.com');
exit();
/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}
function show_error($myError)
{
?>
<html>
<body>
<p>Please correct the following error:</p>
<strong><?php echo $myError; ?></strong>
<p>Hit the back button and try again</p>
</body>
</html>
<?php
exit();
}
?>

经过一番坚持,我想出了一个解决办法。

我使用了一些不同的。php代码,并将其放在footer.php模板的顶部。

这意味着在提交表单后,用户停留在同一页面上。

<?php
    /* Set e-mail recipient */
    $emailTo = "jack@example.com";
    if(isset($_POST['submitted'])) {
    if(trim($_POST['contactName']) === '') {
    $nameError = 'Please enter your name.';
    $hasError = true;
    } else {
    $name = trim($_POST['contactName']);
    }
    if(trim($_POST['email']) === '')  {
    $emailError = 'Please enter your email address.';
    $hasError = true; } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i", trim($_POST['email']))) {
    $emailError = 'You entered an invalid email address.';
    $hasError = true;
    } else {
    $email = trim($_POST['email']);
    }
    if(trim($_POST['subject']) === '') {
    $subjectError = 'Please enter a subject.';
    $hasError = true;
    } else {
    $subject = trim($_POST['subject']);
    }
    if(trim($_POST['comments']) === '') {
    $commentError = 'Please enter a message.';
    $hasError = true;
    } else {                                
    if(function_exists('stripslashes')) {
    $comments = stripslashes(trim($_POST['comments']));
    } else {
    $comments = trim($_POST['comments']);
    }
    }
    if(!isset($hasError)) {
    $subject = '[PHP Snippets] From '.$name;
    $body = "Name: $name nnEmail: $email nnComments: $comments";
    $headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email;
    wp_mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
    }
} ?>

然后我在表单周围使用php,当表单成功发送时显示一个感谢消息。

唯一的问题是,在提交表单后,用户重新加载页面,但在顶部,而不是在表单所在的位置。

解决方法是

我必须确保页脚嵌套在标签中。

        <div class="col-md-4">
            <h3>LEAVE US A MESSAGE</h3>
            <div id="container">
                <div id="content">
                    <div class="align-center">
                        <div class="entry-content">
                            <?php if(isset($emailSent) && $emailSent == true) { ?>
                                <div class="thanks">    
                                    <p>Thanks, your message was sent successfully.</p>
                                </div>
                            <?php } else { ?>
                                <?php the_content(); ?>
                                <?php if(isset($hasError) || isset($captchaError)) { ?>
                                    <p class="error">Sorry, an error occured.</p>
                                <?php } ?>
                                <form action="#footer" id="contactForm" method="post" class="general-form">
                                    <div class="contactform">
                                        <input type="text" name="contactName" class="form-control" id="contactName" placeholder="Your Name.." value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                        <?php if($nameError != '') { ?>
                                            <span class="error"><?=$nameError;?></span>
                                        <?php } ?>
                                        <input type="text" name="email" id="email" class="form-control" placeholder="Your Email.." value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                        <?php if($emailError != '') { ?>
                                            <span class="error"><?=$emailError;?></span>
                                        <?php } ?>
                                        <input type="text" name="subject" id="subject" class="form-control" placeholder="Your Subject.." value="<?php if(isset($_POST['subject']))  echo $_POST['subject'];?>" class="required requiredField subject" />
                                        <?php if($subjectError != '') { ?>
                                            <span class="error"><?=$subjectError;?></span>
                                        <?php } ?>
                                        <textarea name="comments" id="commentsText" class="form-control" placeholder="Your Message" rows="4" cols="100" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                        <?php if($commentError != '') { ?>
                                            <span class="error"><?=$commentError;?></span>
                                        <?php } ?>
                                        <input type="submit" class="btn btn-primary no-border" value="Send Message"></input></p>
                                    </div>
                                    <input type="hidden" name="submitted" id="submitted" value="true" />
                                </form>
                            <?php } ?>
                        </div><!-- .entry-content -->
                    </div><!-- .post -->
                </div>
            </div>
        </div>

快乐的日子!:)