Question

我在wordpress页面中创建了一个自定义表单。成功提交表单后，我希望在提交按钮附近的成功消息中位于同一页面（即空白表单提交页面）。

目前我正在使用

header("Location: http://localhost/gazz/submit", true, 301);

将我重定向到包含空白字段的同一页面。如何添加将显示然后消失的成功消息？

Answer 1

在重定向链接上添加参数

header("Location: http://localhost/gazz/submit?submitted=offcourse", true, 301);

然后在找到该参数时吐出一些东西，

在同一页面上添加这样的内容

if ( isset( $_GET['submitted'] ) && $_GET['submitted'] == 'offcourse' ) { ?>
    <div class="my-very-cool-and-so-awesome-notification">
        <p> Thank you for using the form. Happy New Year</p>
    </div>
    <script>
    ( function($) {
        $(document).ready( function() {
            var notification = $('.my-very-cool-and-so-awesome-notification');
            if ( notification.length ) 
            setTimeout( function() {
                notification.addClass('fadeaway');
            }, 10000) // add class after 10 seconds
        });
    })(jQuery);
    </script>
    <style>
    .my-very-cool-and-so-awesome-notification {
        max-height: 100%;
        opacity: 1;
        overflow: hidden;
        webkit-transition: all .45s ease-in-out;
        -moz-transition: all .45s ease-in-out;
         -ms-transition: all .45s ease-in-out;
          -o-transition: all .45s ease-in-out;
             transition: all .45s ease-in-out;
    }
    .my-very-cool-and-so-awesome-notification.slideup {
        max-height: 0;
    }
    .my-very-cool-and-so-awesome-notification.fadeaway{
        opacity: 0;
    }
    </style>
    <?php
}

Wordpress如何在提交表单后创建淡出成功消息？

1 个答案: