Question

I have always used this code to send email from contact form of websites to a specified email address:

<?php
$contact_name = $_POST['name'];
$contact_email = $_POST['email'];
$contact_subject = $_POST['subject'];
$contact_message = $_POST['message'];

if( $contact_name == true )
{
    $sender = $contact_email;
    $receiver = "[e-mail]";
    $client_ip = $_SERVER['REMOTE_ADDR'];
    $email_body = "Nome: $contact_name \nEmail: $sender \n\nOggetto: $contact_subject \n\nMessaggio: \n\n$contact_message \n\nIP: $client_ip \n\n Contact Form Of Website MyWebsite";       
    $extra = "From: $sender\r\n" . "Reply-To: $sender \r\n" . "X-Mailer: PHP/" . phpversion();

    if( mail( $receiver, "My Site Name - $contact_subject", $email_body, $extra ) ) 
    {
        echo "success=yes";
    }
    else
    {
        echo "success=no";
    }
}
?>

Now I have to work with a template that use a file jquery.jigowatt.js to handle the contact form messages, and I must configure this in the same way as php, but I don’t know in that way.

The file jquery.jigowatt.js:

jQuery(document).ready(function(){


    $('#contactform').submit(function(){

        var action = $(this).attr('action');

        $('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');

        $("#message").slideUp(750,function() {
        $('#message').hide();

        $.post(action, {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            comments: $('#comments').val(),
            verify: $('#verify').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
                $('#submit').removeAttr('disabled');
                if(data.match('success') != null) $('#contactform').slideUp('slow');

                // 2 functions added by Themes
                if(data.match('success') != null) $("html,body").animate({
                    scrollTop: $("#message").offset().top
                    }, 1000, function(){
                        //scroll complete function
                    });
                if(data.match('success') == null) $("html,body").animate({
                    scrollTop: $("#message").offset().top
                    }, 1000, function(){
                        //scroll complete function
                    });



            }
        );

        });

        return false;

    });

});

Answer 1

You can keep your php file and send the data to it via Ajax in jquery.jigowatt.js. I didn’t test this but it should give you the idea. You just need to add the path to the php file in the url: part of the AJAX submit.

jQuery(document).ready(function(){
    $('#contactform').submit(function(){
    var action = $(this).attr('action');
    $('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');
    $("#message").slideUp(750,function() {
    $('#message').hide();      
    $.ajax({
        type:"POST",
        url: "yourPhpFileURL.php",   //put the url of your php file here
        data: $('#contactform').serialize(),
        success: function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null) $('#contactform').slideUp('slow');

            // 2 functions added by TrueThemes
            if(data.match('success') != null) $("html,body").animate({
                scrollTop: $("#message").offset().top
                }, 1000, function(){
                    //scroll complete function
                });
            if(data.match('success') == null) $("html,body").animate({
                scrollTop: $("#message").offset().top
                }, 1000, function(){
                    //scroll complete function
                });                     
        }
        });

    });

    return false;

});

});