मैंने वर्डप्रेस पर एक कस्टम एचटीएमएल फॉर्म बनाया है और इसे एचटीएमएल विजेट का उपयोग करके रखा है

<form id="form">
    <label for="fname">Full Name</label>
    <input type="text" id="fname" name="name" placeholder="Your name..">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Your email..">
   <label for="contact">Contact number</label>
    <input type="tel" id="contact" name="phone" placeholder="Your contact number..">
     <label for="subject">Description</label>
    <textarea id="subject" name="msg" placeholder="Tell us your requirements.." style="height:100px"> 
    </textarea>
    <input type="submit" value="Submit" onclick="myFunction()">
  </form>

और यहाँ मेरा जेएस कोड है

function myFunction() {
var name = document.getElementById("fname").value;
var email = document.getElementById("email").value;
var Contact = document.getElementById("contact").value;
var Message = document.getElementById("subject").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&email1=' + email + '&contact=' + Contact + '&message=' + Message;
if (name == '' || email == '' || Contact == '' || Message == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajaxjs.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}

अब मैं इस फॉर्म डेटा का उपयोग करके मेल भेजना चाहता हूं इसलिए मैं वर्डप्रेस wp-mail.php का उपयोग करके ईमेल कैसे भेज सकता हूं

2
Nitin tiwari 7 जिंदा 2020, 09:40

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले, आपको अपने एचटीएमएल और जावास्क्रिप्ट में कुछ बदलाव करने होंगे और कुछ PHP कोड जोड़ना होगा:

१) फॉर्म टैग में बदलाव

<form id="form" method="post" action="">

2) प्रपत्र में क्रिया नाम के साथ एक छिपी हुई फ़ील्ड जोड़ें

<input type="hidden" name="action" value="my_form_submission">

3) functions.php फ़ाइल में AJAXurl जोड़ें जहाँ आपने अपनी JS फ़ाइल को एनक्यू किया है


add_action( 'wp_enqueue_scripts', 'your function' );

function enqueue_my_frontend_script() {
    wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'frontend-scripts.js', array('jquery'), null, true );
    $variables = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    );
    wp_localize_script('my-script', "jsObj", $variables);
}

4) अपने अजाक्स कॉल में, इसे बदलें

$.ajax({
    type: "POST",
    url: jsObj.ajaxurl, // this will get ajax url
    data: $( "#form" ).serialize() , // send your form data with serialize mode
    success: function(html) {
        alert(html);
    }
});

4) विषय के functions.php फ़ाइल में अजाक्स क्रियाएँ जोड़ें:

add_action('wp_ajax_my_form_submission', 'my_form_submission_callback');
add_action('wp_ajax_nopriv_my_form_submission', 'my_form_submission_callback');

function my_form_submission_callback(){

    $data = $_POST;

    $html = $_POST['message'];

    $headers = array('Content-Type: text/html; charset=UTF-8');
    wp_mail("toemail@gmail.com", "Some subject", $html, $headers);

}

इस तरह आप अजाक्स डेटा प्राप्त कर सकते हैं और एचटीएमएल wp_mail() फ़ंक्शन पास कर सकते हैं।

पूरे डेमो के लिए इस लिंक को देखें: https://dev.to /shwetadanej/ajax-calls-in-wordpress-front-end-2g09

3
Shweta Danej 7 जिंदा 2020, 09:06