Add Contact form ajax with shortcode in wordpress

Question

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 = "[e-mail]";

                                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 1

for ajax use this code :

use the below code in .php file and replace $ with jQuery if it not works

$().ready(function() {
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    $.post(
        ajaxurl, {
            'action': 'set_the_city',
            //pass all the parameter from the form in key value pairs here
        },
        function(output) {
            console.log(output)
        });
});

WordPress provides a hook for ajax call use that instead.

add_action('wp_ajax_set_the_city', 'set_the_city');
add_action('wp_ajax_nopriv_set_the_city', 'set_the_city');

function set_the_city() {
    //all the data can be retrieved by $_REQUEST so do the coding for the_action_function() here.
}

Answer 2

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(event) {
    event.preventDefault();
    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?