web-dev-qa-db-fra.com

formulaire de contact ajax message de réponse vide

J'ai deux formulaires de contact dans mon thème, l'un d'eux enregistre les informations de contact dans un message personnalisé et envoie des courriers électroniques à l'utilisateur et à l'administrateur, et fonctionne parfaitement. L'autre doit envoyer l'e-mail, mais ne rien enregistrer.

Le problème est que, le second formulaire de contact a une réponse vide, la demande a un code d'état: 200 ok, les emails sont envoyés, mais sous la forme, le message d'erreur ne correspond pas à la réussite, même lorsque la fiche a été soumise avec succès . Dans l'inspecteur, les en-têtes sont corrects, mais la réponse est vide.

J'espère que vous pourrez m'aider (et comprendre mon problème, mon anglais est terrible)

Merci,

Code dans le formulaire de contact

<form id="mayorInscriptionForm" class="mayor-inscription-form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>">

    <div class="form-group">
        <input class="mayor-form-control" type="text" placeholder="Nombre y Apellidos" id="name" name="name">
        <small class="form-control-msg">Nombre y Apellidos requerido</small>
    </div>

    <div class="form-group">
        <input class="mayor-form-control" type="text" placeholder="Teléfono" id="phone" name="phone">
        <small class="form-control-msg">Teléfono requerido</small>
    </div>

    <div class="form-group">
    <input class="mayor-form-control" type="email" placeholder="Email" id="email" name="email">
    <small class="form-control-msg">Email requerido</small>
    </div>


    <div class="form-group">
    <textarea class="mayor-form-control" name="notes" id="notes" placeholder="Observaciones"></textarea>
    </div>

    <div class="text-center">
    <button type="submit" class="btn btn-submit btn-green uppercase">Enviar</button>

    <small class="form-info-loading form-control-msg js-form-submission">Procesando, por favor espere...</small>
    <small class="form-info-loading form-control-msg js-form-success">Mensaje Enviado</small>
    <small class="form-info-loading form-control-msg js-form-error">Ha ocurrido un problema, por favor intente m&aacute;s tarde.</small>
    </div>
</form>

code dans main.js

$('#mayorInscriptionForm').on('submit', function(e){
    e.preventDefault();

    $('.error').removeClass('error');
    $('.js-show-feedback').removeClass('js-show-feedback');

    var form = $(this);
    var name = form.find('#name').val(),
        phone = form.find('#phone').val(),
        email = form.find('#email').val(),
        notes = form.find('#notes').val(),
        ajaxurl = form.data('url');

    if( name === '') {
        $('#name').parent('.form-group').addClass('error');

        return;
    }
    if( phone === '') {
        $('#phone').parent('.form-group').addClass('error');

        return;
    }
    if( email === '') {
        $('#email').parent('.form-group').addClass('error');

        return;
    }

    form.find('input, button, textarea').attr('disabled');

    $('.js-form-submission').addClass('js-show-feedback');


    $.ajax({

        url : ajaxurl,
        type: 'post',
        data : {
            name : name,
            phone : phone,
            email : email,
            notes : notes,
            action: 'mayor_save_user_inscription_form'
        },

        error : function( response ) {
            $('.js-form-submission').removeClass('js-show-feedback');
            $('.js-form-error').addClass('js-show-feedback');
            form.find('input, textarea, button').removeAttr('disabled');
        },

        success : function( response ) {
            if( response == 0 ) {

                setTimeout(function(){
                    $('.js-form-submission').removeClass('js-show-feedback');
                    $('.js-form-error').addClass('js-show-feedback');

                    form.find('input, textarea, button').removeAttr('disabled');
                },1500);

            }else {

                setTimeout(function(){
                    $('.js-form-submission').removeClass('js-show-feedback');
                    $('.js-form-success').addClass('js-show-feedback');

                    form.find('input, textarea, button').removeAttr('disabled').val('');
                },1500);

            }
        }
    });

code dans ajax.php

function set_html_content_type() {
    return 'text/html';
}
add_filter( 'wp_mail_content_type', 'set_html_content_type');    
add_action( 'wp_ajax_nopriv_mayor_save_user_inscription_form', 'mayor_save_inscription');
add_action( 'wp_ajax_mayor_save_user_inscription_form', 'mayor_save_inscription');
function mayor_save_inscription() {

    $name = wp_strip_all_tags($_POST["name"]);
    $phone = wp_strip_all_tags($_POST["phone"]);
    $email = wp_strip_all_tags($_POST["email"]);
    $notes = wp_strip_all_tags($_POST["notes"]);

        $to = get_bloginfo( 'admin_email' ). "\r\n";
        $subject = 'Formulario de Inscripción - '.$name;
        $message = '<div>
        <p>Hola, hemos recibido una nueva inscripción a web, los detalles son:</p>
        </br>
        <p><b>De:</b> '.$name.', '.$email.'</p>
        <p><b>Teléfono:</b> '.$phone.'</p>
        <p><b>Observaciones:</b> '.$notes.'</p>
        </br>
        </br>
        <p>Gracias, web</p>

        </div>';


        $headers[] = 'From: <'.$to.'>';
        $headers[] = 'Reply-To: '.$title.' <'.$email.'>';
        $headers[] = 'Content-Type: text/html: charset=UTF-8';

        wp_mail($to, $subject, $message, $headers);

        $to2 = $email;
        $admin_email = get_bloginfo( 'admin_email' ). "\r\n";
        $subject2 = 'Confirmación Formulario Inscripcion web';
        $message2 = '<div>
        <p>Hola, hemos recibido tu inscripción a web, los detalles son:</p>
        </br>
        <p><b>De:</b> '.$name.', '.$email.'</p>
        <p><b>Teléfono:</b> '.$phone.'</p>
        <p><b>Observaciones:</b> '.$notes.'</p>
        </br>
        </br>
        <p>Gracias, web</p>

        </div>';

        $headers2[] = 'From: <'.$admin_email.'>';
        $headers2[] = 'Reply-To: <'.$admin_email.'>'; 
        $headers2[] = 'Content-Type: text/html: charset=UTF-8';

        wp_mail($to2, $subject2, $message2, $headers2);



    die();
}
ajaxformswp-mailcontacterror-handling
1
Chefuss

jQuery AJAX déclenchera un événement error non seulement lorsqu'il recevra un code d'état HTTP indiquant un problème avec la demande, mais également si jQuery ne parvient pas à analyser le corps de la réponse. Puisque vous utilisez die() sans envoyer de corps de réponse, il est probable que jQuery étouffe la réponse "vide".

L'utilisation de wp_send_json_success() au lieu de die() devrait résoudre le problème.

  // ...
  $success = wp_mail($to2, $subject2, $message2, $headers2);

  if( $success )
    wp_send_json_success( null, 200 );
  else
    wp_send_json_error( array( 'message' => 'We\'re sorry, your message could not be sent at this time. Please contact an administrator' ), 500 );
}

Pensez également à implémenter check_ajax_referer() et à utiliser des fonctions de nettoyage pour augmenter la sécurité de votre formulaire.

0
bosco