lokomotivan
10/17/2017 - 1:03 PM

Processwire Ajax Contact

Processwire Ajax Contact

$(document).ready(function() {

    $('#ajax-contact').submit(function(e) {

        // run spinner
        $(".ivm-spinner").removeClass('uk-hidden');

        var form = $('#ajax-contact');
        var form_url    = '<?=$pages->get('/ajax/')->url?>';
        var form_data = form.serialize();
        // ge captcha value
        var token = $("#g-recaptcha-response").val();

        if (token) {

            // Submit the form using AJAX.
            $.ajax({
                type: 'POST',
                url: form_url,
                data: form_data,
                dataType: "json",
                success: function(data) {
                    // console.log(data); // console
                    UIkit.notification({message: data.note, status: data.status, pos: 'top-center', timeout: 5000});
                },
                error: function(data) {
                    UIkit.notification({message:'Ajax Error!', status: 'danger', pos: 'top-center', timeout: 5000});
                }
            }).done(function(){
                // hide spinner
                $(".ivm-spinner").addClass('uk-hidden');
            }).fail(function(){
                // hide spinner
                $(".ivm-spinner").addClass('uk-hidden');
            });

        }else {
            $(".ivm-spinner").addClass('uk-hidden');
            UIkit.notification({message:'Invalid Captcha!', status: 'danger', pos: 'top-right', timeout: 5000});
        }

        e.preventDefault();
    });

});
<?php
/**
*   Process Ajax Contact
*
*/

if($input->post->contact == '1') {

    $name          = $sanitizer->text($input->post->name);
    $email         = $sanitizer->email($input->post->email);
    $message       = $sanitizer->text($input->post->message);

    /**
    *   Send Email
    */
        // Email Vars
        $email_to       = $settings->site_info->email;
        $email_subject  = "Message from $name";
        $email_body     = "$message";
        $email_from     = "$email";
        // Send Email
        mail("$email_to", "$email_subject", "$email_body", "From: $email_from\nContent-Type: text/html");


        $data = array(
            "status" => "success",
            "note" => "Success"
        );


    $json = json_encode($data);
    echo $json;

}
<form id="ajax-contact" action="./" method="post">

    <div class="uk-margin uk-grid-small" uk-grid>
        <div class="uk-width-expand@l">
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: user"></span>
                <input class="uk-input" type="text" name="name" placeholder="Name" required="" />
            </div>
        </div>
        <div class="uk-width-expand@l">
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: mail"></span>
                <input class="uk-input" type="email" name="name" placeholder="Email" required="" />
            </div>
        </div>
    </div>

    <div class="uk-margin">
        <textarea class="uk-textarea" rows="5" name="message" placeholder="Your message here" required=""></textarea>
    </div>

    <div class="uk-margin">
        <?php echo $captcha->render();?>
    </div>

    <div class="uk-margin">
        <input type="text" name="contact" value="1" hidden="" />
        <input class="uk-button uk-button-primary" type="submit" name="submit" value="Send Message" />
        <span class="ivm-spinner uk-hidden" uk-spinner></span>
    </div>

</form>