Cómo modificar la salida de respuesta de éxito/error en Contact Form 7

Question

Cómo modificar la salida de respuesta de éxito/error en Contact Form 7

13 oct 2017, 01:34:51

Vistas: 57.1K

Votos: 7

Estoy tratando de encontrar una manera de anular o filtrar la salida de los cuadros de respuesta de Contact Form 7 que se muestran cuando aparece un mensaje de error o éxito.

Por defecto, Contact Form 7 genera este HTML cuando un formulario se envía correctamente:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
    ¡Gracias por suscribirte!
</div>

En efecto, quiero cambiar el HTML de salida de la respuesta para que sea una alerta descartable de Bootstrap como esta:

<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
    ¡Gracias por suscribirte!
</div>

He intentado examinar la documentación de Contact Form 7 y he revisado el código fuente del plugin para encontrar el filtro que creo que necesito, pero no puedo hacer que cambie la salida HTML de la respuesta. Este es el código que he probado:

function filter_wpcf7_response_output( $output ){
    // Reemplazar la clase CSS de éxito
    $output = str_replace( ' wpcf7-mail-sent-ok', ' alert alert-success', $output );
    return $output; 
}
add_filter( 'wpcf7_form_response_output', 'filter_wpcf7_response_output', 10, 1 );

Pero parece que no cambia la salida en absoluto... ¡Cualquier ayuda sería muy apreciada!

Mat

1.65K

filtros twitter bootstrap plugin formulario de contacto 7

Comentarios

Por el momento, he añadido algunas reglas CSS para las clases estándar de Contact Form 7 para que las notificaciones de respuesta tengan el mismo estilo que las alertas de Bootstrap. Pero todavía me interesa saber cómo modificar la salida con el filtro mencionado.

Mat

13 oct 2017 15:15:24

Mmm, ¿por qué mi pregunta ha recibido un voto negativo?

Mat

17 oct 2017 00:40:03

Quien haya votado para cerrar esto necesita una buena bofetada. En serio.

Brett

25 dic 2018 12:46:14

Todas las respuestas a la pregunta

Comentarios

Exactamente lo que estaba buscando - ¡gracias compañero, eres un crack!

Brett

25 dic 2018 12:47:30

Esto está bien... ¿Pero por qué usar jQuery para el selector pero no para el event listener? Úsalo para ambos o para ninguno

dgo

17 may 2020 21:35:02

Mala noticia, no hay filtros en los mensajes mostrados, así que tenemos que manejarlo desde JavaScript. ¡Esta respuesta es por ahora la única forma de conseguirlo!

Maxime Culea

17 nov 2020 17:47:33

Probablemente deberías eliminar las clases .alert-* antes de añadir una nueva clase en cada event listener para evitar agregar múltiples clases .alert-* después de activar más de un evento al interactuar con el formulario.

Puedes añadir esto encadenado antes de .addClass(): .removeClass(function (index, className) { return (className.match (/(^|\s)alert-\S+/g) || []).join(' '); })

También ten en cuenta que aún podrías necesitar sobrescribir los estilos para .wpcf7-response-output en la hoja de estilos de tu tema, ya que el plugin usa estilos para esa clase que modifican algunos de los estilos de bootstrap.

Talk Nerdy To Me

19 nov 2020 21:56:20

Pequeño truco útil: En lugar de añadir el JS a tu tema/plugin puedes colocarlo en la definición del formulario de contacto (usando etiquetas <script>...</script>).

Felix

19 feb 2021 12:42:34

Mat 1.65K · Accepted Answer · 2017-10-13T16:09:11Z

Después de analizar esto más a fondo, me di cuenta de que las respuestas que se muestran son generadas mediante el AJAX de Contact Form 7.

Así que, siguiendo la documentación de Contact Form 7 sobre Eventos DOM, pude hacer que funcionara como deseaba con el siguiente código JS:

/* Eventos de validación para cambiar las clases CSS de respuesta */
document.addEventListener( 'wpcf7invalid', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-danger');
}, false );
document.addEventListener( 'wpcf7spam', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailfailed', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-success');
}, false );