在 WordPress 中提交 HTML 表单无效

Question

我正在使用 Bootstrap 模式 在 WordPress 中提交表单。我现在在做什么我是在 html structure.

中用 Visual Composer 编写 bootstrap modal code

代码如下

<form method="post">
<div class="form-group"><label class="control-label" for="recipient-name">Your Name:</label>
<input id="recipient-name" class="form-control" type="text" /></div>
<div class="form-group"><label class="control-label" for="message-text">Your Message:</label>
<textarea id="message-text" class="form-control"></textarea></div>
</form></div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary" name="send_message" type="button">Send message</button></div>

现在，问题是我想将邮件发送到某个电子邮件地址。按钮名称 send_message

使用 functions.php 中的 isset($_POST['send_message']) 有什么技巧吗？我本可以直接从 functions.php 使用 shortcode 放置 html 表单和 isset 提交，但不幸的是我发现可视化编辑器无法识别 html editor 中的 shortcode

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

如果您想在 VC 中使用您的自定义简码，您只需使用位于 Visual Composer -> 简码映射器的简码映射器。设置后，您可以像使用任何其他 VC 组件一样使用您的简码。

说到你的表格，你不能像现在这样直接发送。您可以使用 javascript/jQuery 使用 ajax 处理它，但这是不同的故事。如果你需要我，我可以稍后将其添加到我的答案中。

如果你想以简单的方式使用它，首先你应该给你的输入命名。其次，你应该把

<input type="submit">

在您的表单中。之后，表单将在提交时发送到当前页面，使用POST方法。

之后，在您的 functions.php 中放入类似的内容，以简单的方式处理邮件。

add_action( 'init', 'process_email' );
function process_email() {
    if( isset( $_POST['your_required_input_name'] ) ) {
        $name = $_POST['your_name_input_name'];
        $txt = $_POST['your_message_input_name'];
        $to = 'example@mail.com'; // put your email here
        $subject = 'Put any subject here';
        $message = 'Name: '.$name."\n\r".'Message: '.$txt;
        $headers = 'From: example@mail.com' . "\r\n"; // put user's email here or duplicate your email

        wp_mail($to, $subject, $message, $headers);

        header('Location: '.$_SERVER['REQUEST_URI']);
        die();
    }
}

另请注意，您可以使用 CF7 插件生成 ajaxy 表单并通过短代码将其粘贴到您的 VC 中。

----------------------------更新------------ ----------------------

如果你想以ajax的方式处理你的表格，你可以使用jQuery。通常它已经在大多数主题中排队，所以只需将类似的内容放入您的 functions.php

add_action( 'wp_footer', 'process_email_by_ajax' );
function process_email_by_ajax() {
?>
<script>
    (function($){
        $('button.btn-primary').click(function(){
            $.post(window.location.href, {
                your_name_input_name: $('#recipient-name').val(),
                your_message_input_name: $('#message-text').val()
            }, function(){
                alert('Yay! Success message!')
            }).fail(function(){
                alert('Oh no! Something goes wrong!')
            })
            return false;
    })
    })(jQuery)
</script>
<?php
}

它会将包含您的输入和文本区域数据的 post 查询发送到脚本，即上面的 posted。请注意，您应该更改 $_POST['your_required_input_name'] 一些必需的 post 参数（即 your_name_input_name 如果您希望名称是必需的）。

在 WordPress 中提交 HTML 表单无效

submit HTML Form in WordPress not working

forms

wordpress

isset