如何在没有插件的情况下使用 ajax 在 WordPress 数据库中提交自定义表单数据？

Question

我在function.php 中创建了一个联系表单，并在我的页面上添加了短代码，它正在工作。我正在收到我的表格。

function st_contact_form(){
ob_start();
    ?>
      <div class="contact_form-wrapper popup-contact-form">
         <form action="" method="post" name="contact_form" id="contact_form" autocomplete="off">
  <div class="row">      
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
             <div class="form-group">
               <input type="text" name="name" placeholder="Name" class="form-control" required>
             </div>
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
             <div class="form-group">
               <input type="email" name="email" placeholder="Email Id" class="form-control" required>
            </div>
    </div>
 </div>  
 <div class="row">    
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
         <div class="form-group">
            <input type="text" name="mobileno" placeholder="Phone no" class="form-control" required>
        </div>
    </div>  
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
        <div class="form-group select-service">
            <select class="form-control" name="type_of_services" required>
                <option selected disabled>Select Service</option>
                <option value="1">Testing one</option>
                <option value="2">Testing two</option>

            </select>
        </div>
     </div>
   </div>
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 paddingLR0">
         <div class="form-group">
            <textarea class="form-control" placeholder="Message" name="message" rows="2" required></textarea>
         </div>
    </div>
         <div class="form-group ">
            <input type="submit" name="send" value="Submit" class="btn_st btn_maroon form_submit_btn">
         </div>
      </form>
   </div>
<?php
return ob_get_clean();
}
add_shortcode( 'contact_form', 'st_contact_form' );

我在脚本文件中添加了以下脚本并且验证正在运行。现在我想知道如何在 wordpress 中提交表单？我应该创建一个表吗？还是我必须创建 process.php 文件并添加一些逻辑？

$("#contact_form").validate({
rules: {
    name: {
        required:true
    },
    email: {
        required:true,
        email: true,
        emailExt: true
    },
    mobileno: {
        required:true,
        minlength: 10,
        maxlength: 10,
        number: true
    },
    type_of_services: {
        required:true
    },
    message: {
        required:true
    }
},
submitHandler: function(r) {
     if(isReqInprogress){
        return;
       }
    isReqInprogress = true;
    $.ajax({
                url:base_url+"/wp-content/themes/mytheme/process.php",

        type: "post",
        data:{name:name,email:email,mobileno:mobileno,type_of_services:type_of_services,message:message},
        dataType:"JSON",
        success: function(response) {
           alert("success");


    isReqInprogress = false;
        }


    })
}
});

Process.php

<?php
global $wpdb;
$data = $_POST;
$to = $data['email'];
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');

//$mail = wp_mail($data['email'], $subject, $body, $headers );
//if ($mail) {
    $wpdb->insert('wp_contact',
        array(
            'name' => $data['name'],
            'email' => $data['email'],
            'mobileno' => $data['mobileno'],
            'message' => $data['message'],
        ),
        array(
            '%s',
            '%s',
            '%s',
            '%s',
        )
    );
//}

?>

你能帮我解决这个问题吗？

Answer 1

您没有提供您的 process.php 文件，所以我只是假设这是邮件逻辑发生的地方。正如您最初怀疑的那样，您可以创建一个数据库表并使用 wpdb 类将数据插入到该表中。

 // .../process.php

 ...
// pls escape the POST with a escape method of your choice
$data = $_POST;
$to = $data['email'];
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');

$mail = wp_mail($data['email'], $subject, $body, $headers );
if ($mail) {
    $wpdb->insert('wp_email_subscription',
        array(
            'name' => $data['name'],
            'email' => $data['email'],
            'mobileno' => $data['mobileno'],
            'message' => $data['message'],
        ...
        ),
        array(
            '%s',
            '%s',
            '%s',
            '%s',
        ...
        )
    );
}

请记住，您还必须根据需要在表中创建字段。

更新：关于您关于 process.php 文件现在是占位符的评论，您可以将其放在主题根目录中。一个例子是

wordpress/wp-content/themes/*your-theme*

您必须将 your-theme 替换为您在 wordpress 后端中选择的主题。

现在我想电子邮件还没有发送出去，这可能是一个广泛的答案，但你可以查看已经回答的关于如何设置 wp 邮件等的问题，或者阅读 codex here。为了使邮件正常工作，您还需要更新您的 wordpress 邮件设置并拥有一个可以发送电子邮件的服务器。

Wordpress wp_mail() 函数还返回一个布尔值，您也可以根据正在发送的邮件的状态填充数据库。

我也相应地更新了上面的代码示例。

Answer 2

终于，我得到了我的解决方案，

我在function.php 中添加了以下代码，并使用简码在网页上获取我的表单

function st_contact_form(){
ob_start();
    ?>
      <div class="contact_form-wrapper popup-contact-form">
         <form action="" method="post" name="contact_form" id="contact_form" autocomplete="off">
  <div class="row">      
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
             <div class="form-group">
               <input type="text" name="name" placeholder="Name" class="form-control" required>
             </div>
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
             <div class="form-group">
               <input type="email" name="email" placeholder="Email Id" class="form-control" required>
            </div>
    </div>
 </div>  
 <div class="row">    
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
         <div class="form-group">
            <input type="text" name="mobileno" placeholder="Phone no" class="form-control" required>
        </div>
    </div>  
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
        <div class="form-group select-service">
            <select class="form-control" name="type_of_services" required>
                <option selected disabled>Select Service</option>
                <option value="1">Testing one</option>
                <option value="2">Testing two</option>

            </select>
        </div>
     </div>
   </div>
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 paddingLR0">
         <div class="form-group">
            <textarea class="form-control" placeholder="Message" name="message" rows="2" required></textarea>
         </div>
    </div>
         <div class="form-group ">
            <input type="submit" name="send" value="Submit" class="btn_st btn_maroon form_submit_btn">
         </div>
      </form>
   </div>
<?php
return ob_get_clean();
}
add_shortcode( 'contact_form', 'st_contact_form' );

现在下一步是 JQuery 验证和 Ajax。我还在我的主题中创建了一个process.php 文件

$("#contact_form").validate({
rules: {
    name: {
        required:true
    },
    email: {
        required:true,
        email: true
    },
    mobileno: {
        required:true,
        minlength: 10,
        maxlength: 10,
        number: true
    },
    type_of_services: {
        required:true
    },
    message: {
        required:true
    }
},

submitHandler: function(form) {
    if(isReqInprogress){
        return;
       }
        $.ajax({
        url:"/wp-content/themes/stratevic/process.php",
        type: "post",
        data:$('#contact_form').serialize(),           
        dataType:"JSON",
        success: function(response) {

        alert("Your message has been received and we will be contacting you shortly to follow-up.");
            isReqInprogress = false;
             }
    });
}
});

Process.php

注意：我在我的数据库中创建了一个联系人表

<?php
define( 'BLOCK_LOAD', true );
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php' );
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php' );
$wpdb = new wpdb( DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);

global $wpdb;        // <--- making $wpdb as global
$data = $_POST;
$query=$wpdb->insert('contact',
        array(
             'name' => $data['name'],
            'email' => $data['email'],
            'phone' => $data['mobileno'],
            'type_of_services' => $data['type_of_services'],
            'message' => $data['message']
        ),
        array(
            '%s',
            '%s',
            '%s',
            '%s',
            '%s',
        )
);


 if ($query) {
    $response['error'] = "true";

    }else{
    $response['error'] = "false";
    } 
echo json_encode($response);
exit();
    // $wpdb->show_errors(); 

?>

就是这样。它对我来说非常有效。