Jorge Andres Moreno Jorge Andres Moreno - 3 months ago 11
Javascript Question

Add Contact form ajax with shortcode in wordpress

I'm creating a plugin for my contact form using ajax and add shortcode wordpress . I don't get how to do it and it work perfect, and read several forums about the admin- ajax.php but do not understand how to pass data to this file.

This is the code :

<?php

/*
Plugin Name: Formulario de contacto
Plugin URI: http://www.e-world.co
Description: Formulario de contacto con ajax
Version: 1.0
Author: Jorge Moreno
Author URI: http://www.e-world.co
license: GLP2
*/

function the_action_function(){
$adminemail = "jorge.moreno@e-world.co";

if ($_GET['send'] == 'comments')
{

$_uname = $_POST['name'];
$_uemail = $_POST['email'];

$_website = $_POST['website'];
$_comments = stripslashes($_POST['comment']);



$email_check = '';
$return_arr = array();

if($_uname=="" || $_uemail=="" || $_comments=="")
{
$return_arr["frm_check"] = 'error';
$return_arr["msg"] = "Please fill in all required fields!";
}
else if(filter_var($_uemail, FILTER_VALIDATE_EMAIL))
{

$to = $adminemail;
$from = $_uemail;
$subject = "Renew Email: " .$_uname;

$message = 'Name: &nbsp;&nbsp;' . $_uname . '<br><br> Email: &nbsp;&nbsp;' . $_uemail . '<br><br> website: &nbsp;&nbsp;' . $_website . '<br><br> Comment:&nbsp;&nbsp;' . $_comments;

$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= "Content-Transfer-Encoding: 7bit\r\n";
$headers .= "From: " . $from . "\r\n";

@mail($to, $subject, $message, $headers);

} else {


$return_arr["frm_check"] = 'error';
$return_arr["msg"] = "Please enter a valid email address!";


}

echo json_encode($return_arr);
}
}

function createAjaxContactForm() {
return '
<div class="form">
<form action="process.php" method="post" name="ContactForm" id="ContactForm" >
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Full Name *">
</div>
<div class="form-group">
<input type="text" class="form-control" name="email" placeholder="Email *">
</div>
<div class="form-group">
<input type="text" class="form-control" name="website" placeholder="Website">
</div>
<div class="form-group">
<textarea rows="5" class="form-control" name="comment" placeholder="Your Message *" style="height:175px;"></textarea>
</div>
<div id="message_post"></div>
<input class="btn btn-default" type="submit" value="ENVIAR" name="submitf" id="submitf">
</form>
</div>';
}

add_shortcode('AjaxContactForm', 'createAjaxContactForm');

?>


and my ajax:

jQuery(function(){
jQuery("#ContactForm").submit(function(){
jQuery("#submitf").value='Please wait...';

jQuery.post("password/wp-admin/admin-ajax.php", jQuery("#ContactForm").serialize(),
function(data){
if(data.frm_check == 'error'){

jQuery("#message_post").html("<div class='errorMessage'>ERROR: " + data.msg + "!</div>");
document.ContactForm.submitf.value='Resend >>';
document.ContactForm.submitf.disabled=false;
} else {
jQuery("#message_post").html("<div class='successMessage'>Your message has been sent successfully!</div>");
jQuery("#submitf").value='Send >>';
}
}, "json");

return false;

});
});

Answer

This is ajaxurl write this code your-theme/functions.php

<?php function frontend_custom_ajaxurl() { ?>
    <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
    <?php
  }
add_action('wp_head','frontend_custom_ajaxurl');

This is your php function can do anything. And also write this code in your-theme/functions.php file

function your_function() {
    parse_str($_POST['data'], $params);
    print_r($params)
    exit;
}
add_action('wp_ajax_your_function', 'your_function');
add_action('wp_ajax_nopriv_your_function', 'your_function');

This is JQuery.

jQuery("#ContactForm").submit(function() {
    jQuery("#submitf").value = 'Please wait...';
    var data = {
        action: 'your_function', // here php function such as your_function
        data: jQuery("#ContactForm").serialize(),
    };
    jQuery.post(ajaxurl, data, function(response) {
        ......................
    });
});

Any confusion comment?