Modificar el valor de entrada de Contact Form 7 antes del envío

Question

Modificar el valor de entrada de Contact Form 7 antes del envío

23 jun 2018, 19:45:02

Vistas: 28.8K

Votos: 1

Estoy usando Contact Form 7 y Flamingo para crear un formulario de registro de consultores en mi sitio WordPress. Por solicitud de mi cliente, cada envío necesita tener un código de registro (reg_code) que es una combinación de la fecha de envío y un número aleatorio para hacerlo único.

Agregué un campo de entrada oculto a mi código CF7 con el id "reg_code". En mi primer intento, usé JS para generar una variable "reg_code" justo después de que los usuarios visitan mi sitio y establecí el valor del campo oculto a la variable "reg_code" generada. El "reg_code" se guardó exitosamente en el envío de CF7, pero en algunos casos, cuando un usuario no enviaba el formulario en la primera visita sino después de unos días, la parte de la fecha en su "reg_code" no sería correcta porque ese código se generó en el momento de su primera visita y se almacenó en caché en el navegador.

Para evitar este problema, decidí mover la función de generación del "reg_code" de JS a PHP y el procedimiento sería así:

Se hace clic en el botón de envío
Usar AJAX para llamar a una función PHP que devuelve un reg_code
Establecer el valor del campo oculto "reg_code" en CF7 al resultado devuelto
Realizar realmente el envío de CF7 que guarda todos los campos en Flamingo

Este es mi JS para activar la llamada AJAX antes del evento de envío de CF7:

$('.wpcf7-form').on('submit', function (e) {
    $.ajax({
        type: "post",
        dataType: "json",
        url: js_object.ajax_url,
        data: {
            action: "custom_reg_code",
        },
        success: function (response) {
            if (response.success) {
                $('#reg_code').val(response.data)
            }
            else {
                console.log('Algo salió mal')
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('fallo: ' + textStatus, errorThrown);
        },
        complete: function() {
        }
    })
})

Mi resultado: Funciona solo algunas veces. Solo algunos envíos tienen valor "reg_code", otros tienen "reg_code" vacío.

Según mi suposición, el evento de envío de CF7 no esperará a que se complete la llamada AJAX. Intenté agregar e.preventDefault() al código anterior para detener el envío predeterminado de CF7 pero no tuve éxito. También probé el escuchador de eventos "wpcf7submit" de CF7 pero tampoco funcionó.

Finalmente, la pregunta es: ¿Hay alguna manera de pausar el evento de envío predeterminado de CF7 para modificar el valor de un campo de entrada y luego continuar con el proceso de envío?

Muchas gracias

LocNguyen

53

plugin formulario de contacto 7

Comentarios

No estoy seguro si recibes alertas por ediciones en respuestas, así que esto es solo para informarte que he agregado un método que debería permitirte añadir tu propia etiqueta CF7 sin usar el plugin adicional. No lo he probado, pero el código es bastante sencillo.

Andy Macaulay-Brook

23 jun 2018 23:40:21

¿Podemos usar algo similar para numeración automática de envíos, de modo que cada nuevo envío obtenga un número +1?

Mitja

28 feb 2020 10:50:48

Todas las respuestas a la pregunta

Me gustaría intervenir aquí porque estaba luchando con este mismo problema: modificar los campos de entrada antes de que CF7 enviara el formulario mediante ajax. Creo que el autor original estaba tratando de averiguar cómo hacer esto mediante Javascript, algo que Andy no abordó en su respuesta. Así que aquí hay un ejemplo de cómo hacerlo:

var form = document.getElementsByClassName('wpcf7-form')[0];
form.addEventListener('submit', function(evt) {
    form.elements['reg_code'].value = 'parsed_code';
}, { capture: true });

Presta mucha atención al último argumento en el event listener: useCapture = true. Este argumento es false por defecto. Mi código original, que no funcionaba, ignoraba este argumento. El envío Ajax de CF7 siempre se ejecutaba primero, ignorando así mi evento. Simplemente cambiando useCapture a true, tu evento se ejecuta primero antes de despachar el evento Ajax de CF7.

~~No lo he probado todavía, pero supongo que al usar también evt.preventDefault(), podrías detener efectivamente el envío del formulario Ajax de CF7 si fuera necesario.~~ Probado el 22/04/2019 - no funciona.

Dan S

81

21 abr 2020 22:19:21

Comentarios

No hay problema. Gracias - me has motivado a investigar finalmente cómo codificar mis propias etiquetas CF7 y también agregaré eso como una edición a esta respuesta.

Andy Macaulay-Brook

23 jun 2018 21:19:47

Andy Macaulay-Brook 3.86K · Accepted Answer · 2018-06-23T20:56:22Z

Podrías evitar el dolor de AJAX y hacerlo de otra forma colocando un campo oculto dentro de tu formulario en PHP.

Método 1, con la ayuda de un plugin

Generalmente uso el plugin Contact Form 7 Dynamic Text Extension como una ruta sencilla para crear etiquetas personalizadas de CF7, lo cual aún requiere un poco de código. También podrías ir más allá y codificar tus propias etiquetas CF7, pero no lo he intentado todavía, aunque podría hacerlo como una edición a esta respuesta.

Con este plugin instalado, puedes colocar etiquetas en tu formulario CF7 así:

[dynamichidden custom-reg-code “CF7_custom_reg_code”]

Y en el panel de correo electrónico de la página de administración de CF7, insertarías [custom-reg-code].

Para que funcione, solo crea un shortcode coincidente para generar tu cadena:

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_custom_reg_code() {

    return date("Ymd") . generateRandomString();
}

add_shortcode('CF7_custom_reg_code', 'wpse306816_CF7_custom_reg_code');

Crédito a https://stackoverflow.com/a/13212994/6347850 por la generación de números aleatorios.

Ahora tendrás un campo oculto en tu formulario compuesto por la fecha actual y un número aleatorio que podrás usar en el correo enviado por tu formulario o guardar en Flamingo como cualquier otro campo de CF7.

Método 2, sin la ayuda de un plugin

Un poco de investigación ha demostrado que es incluso más fácil simplemente escribir tu propia etiqueta CF7 y no preocuparte por el plugin.

Para crear una etiqueta CF7 [serial], la registras usando wpcf7_add_form_tag() en el hook de acción wpcf7_init, pasando el nombre de la etiqueta y el nombre de una función callback para manejarla:

add_action( 'wpcf7_init', 'wpse306816_CF7_add_custom_tag' );

function wpse306816_CF7_add_custom_tag() {
    wpcf7_add_form_tag(
        'serial',
        'wpse306816_CF7_handle_custom_tag' );
}

Y para tu caso, el callback simplemente necesita devolver el valor de la cadena serial:

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x='0123456789', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_handle_custom_tag( $tag ) {
    return date("Ymd") . generateRandomString();
}