联系表格 wordpress，在同一站点上显示感谢消息（禁用重定向）

Question

我已经为 wordpress 创建了一个联系表单。 我工作的表格很好。我遇到的问题是，我的联系表格在一个隐藏的 div 中。 单击邮件图标时会向上滑动。

所以当我发送联系表格时，它会将我重定向到感谢页面，我还没有弄清楚如何禁用此功能并在同一页面上显示感谢消息。

有什么想法吗？我一直在阅读其他问题，但似乎无法帮助我。 一些代码。

     <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
     <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 <?php if($email){ ?>
     <p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
     <?php } else { if($error) { ?>
     <p><strong>Your messange hasn't been sent</strong><p>
     <?php echo $error; ?>
     <?php } else { the_content(); } ?>

             <section class="loginform">
                <div class="contactform">
                <form action="<?php the_permalink(); ?>" id="contact_me" method="post">
                    <input type="hidden" name="sent" id="sent" value="1" />
                    <ul>
                        <li>
                            <input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" placeholder="Name" required>
                        </li>
                        <li>
                            <input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" placeholder="Email" required>
                        </li>
                        <li>
                            <input type="text" name="your_subject" id="your_subject" value="<?php echo $_POST[your_subject];?>" placeholder="Subject" required>
                        </li>
                        <li>
                            <textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
                        </li>
                        <li>
                            <input type="submit" name = "send" value = "Send email" />
                        </li>
                    </ul>
                </div>
                </form>
                </section>
     <?php } ?>

     <?php endwhile; ?>

Answer 1

你最好使用 ajax 来解决这个问题；你为此构建了一个插件吗？

你应该:)

在你的插件文件中，注册一个新的 ajax 钩子：

// add ajax request
add_action( 'wp_ajax_send_form', 'sendForm' );
// add this so non-admins can use it
add_action( 'wp_ajax_nopriv_send_form', 'sendForm' );

二、构建函数sendForm()：

<?php
function sendForm() {

    //validation logic here, get data from $_POST

    // send mail logic here

    if($email){
        echo '<p><strong>Message succesfully sent. I will reply as soon as I can</strong></p>';
     } else { if($error) { 
         echo '<p><strong>Your messange has not been sent</strong><p>'.$error;
     } else { the_content();

    // adding die(); is necessary with wp ajax
    die();

}

在您的前端文件中，删除所有表单内容或让您输入字段在单击时返回 false。 我假设您在 no.Conflict() 模式下使用 jQuery。 在您希望显示响应的位置添加<div id="answer"></div>。

   <script>
        jQuery('#contact_me input').click( function() {

        // get form data here
        var message = jQuery('#your_message').val();
        // ...and so on

        jQuery.post(ajaxurl, {   
                    action:     "send_form",
                    message: message,
                    //...and so on

                }, function (response) {

                   jQuery('#answer').html(response);

                }); 
        });
</script>

这将通过 ajax 调用 php 函数 sendForm()，执行它并在 ID 为 #response 的 div 中显示回显消息。是你需要的吗？

要求进一步解释。

问候 西蒙