wordpress ajax表单提交

Question

我需要在wordpress中发送自定义ajax表单的邮件。邮件应包含全名，电子邮件，电话号码和消息（评论）。请帮我做。

我已将html代码作为短代码包含在functions.php中。

function send_grivence(){
var form1 = jQuery("#myform").serialize();
console.log(form1);
jQuery.ajax({ 
         data: {action: 'send_form', form:form1},
         type: 'post',
         url: 'mydomain.com/wp-admin/admin-ajax.php/',
         success: function(data) {
             console.log(data); //should print out the name since you sent it along
 
        }
    });
}

         <form class="form-horizontal" id="myform">
            <fieldset>
             
               <div class="control-group">
                  <!-- Username -->
                  <label class="control-label"  for="fullname">Fullname:</label>
                  <div class="controls">
                     <input type="text" id="fullname" name="fullname" placeholder="your-name" class="input-xlarge">
                  </div>
               </div>
               <div class="control-group">
                  <!-- Password-->
                  <label class="control-label" for="email">Email Id:</label>
                  <div class="controls">
                     <input type="email" id="email" name="email" placeholder="your-email" class="input-xlarge">
                  </div>
               </div>
               <div class="control-group">
                  <!-- Password-->
                  <label class="control-label" for="number">Phone No:</label>
                  <div class="controls">
                     <input type="text" id="phonenumber" name="phonenumber" placeholder="your-phone no" class="input-xlarge">
                  </div>
               </div>
               <div class="control-group">
                  <!-- Password-->
                  <label class="control-label" for="number">Comment:</label>
                  <div class="controls">
                     <textarea name="name" rows="8" cols="80" placeholder="your-message"></textarea>
                  </div>
               </div>
               <div class="control-group">
                  <!-- Button -->
                  <div class="controls">
                     <a onclick="send_form()" class="btn btn-success">Submit</a>
                  </div>
               </div>
            </fieldset>
         </form>
   

Answer 1

第一个通过ajax提交表单的jquery代码

jQuery(document).ready(function (jQuery) {
    jQuery('#myform').submit(contactSubmit);
    function contactSubmit() {
        var contactForm = jQuery('#myform').serialize();
        jQuery.ajax({
            type: "POST",
            url: "/wp-admin/admin-ajax.php",
            data: contactForm,
            success: function (data) {
                // console.log(id);
                console.log(data);
            }
        });
        return false;
    }
});

确保你在表单中放置一个动作输入，如<input type="hidden" name="action" value="contactForm"/>，只需在提交按钮之前粘贴它。请注意，在function.php中调用contactForm函数

然后在function.php中放置一个函数

function contactForm() {

    $name    = $_POST['fullname'];
    $email   = $_POST['email'];
    $phone   = $_POST['phonenumber'];
    $message = $_POST['comment'];
    $quote   = 'Full Name: ' . $name . "\n\r" . 'Email: ' . $email . "\n\r" . 'Phone: ' . $phone . "\n\r" . 'Message: ' . $message . "\n\r";
    $to      = "YOUR EMAIL ADDRESS"; // put your email here
    $headers = 'From:' . $name . '<' . $email . '>' . "\r\n"; // put user's email here or duplicate your email
    $subject = 'Contact Form';

    if ( wp_mail( $to, $subject, $quote, $headers ) === false ) {
        echo "Error";
    } else {
        echo "<h3> Mail Sent Successfully Done</h3>";
    }
    die();
}

add_action( 'wp_ajax_contactForm', 'contactForm' );
add_action( 'wp_ajax_nopriv_contactForm', 'contactForm' ); 

另外，请确保在"YOUR EMAIL ADDRESS"中替换您的电子邮件。此外，请确保您的url: "/wp-admin/admin-ajax.php",显示您的完整地址。在本地你可能在实时服务器中包含url: "/YOUR_FOLDER_HERE/wp-admin/admin-ajax.php",其他工作正常。

编辑

<textarea name="name" rows="8" cols="80" placeholder="your-message"></textarea>

将name="name"改为name="comment"

希望这可以帮助。