¿Cómo puedo ocultar el formulario de contacto y muestra “enviado!” después del envío exitoso

5 minutos de lectura

avatar de usuario
Hombre HTML

Estoy usando el complemento Contact Form 7 en una plantilla de WordPress. Creé el formulario y el CSS relacionado, por lo que todo funciona bien. Necesito hacer lo siguiente, cuando hago clic en el botón Enviar y tengo un correo electrónico enviado con éxito. el formulario debería desaparecer y mostrar “¡Enviado!” en lugar de eso. Necesito saber el código que necesito cambiar. Por favor vea la foto que muestra lo que me gusta hacer

ingrese la descripción de la imagen aquí

  • Es bastante molesto que el desarrollador de Contact Form 7 simplemente indique que no es necesario saltar a una nueva página después de enviar un formulario. No parece entender que mostrar el formulario incluso después de enviarlo es confuso para el usuario.

    – Kokodoko

    14 de abril de 2014 a las 11:24

“on_sent_ok:” y “on_submit” se eliminaron de Contact Form 7 5.0, por lo que debe usar una de las 2 opciones disponibles.

  1. wpcf7enviar
  2. wpcf7correo enviado

Para ocultar el formulario, debe agregar el detector de eventos en su archivo js o puede agregarlo como acción en el pie de página usando el script mencionado:

add_action( 'wp_footer', 'contact_form_sent' );

function contact_form_sent() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( 'FORM_ID' == event.detail.contactFormId ) { //Use this only when targeting specific form.
         document.getElementById('DIV_ID_OF_FORM').style.display = 'none';
    } //Use this only when targeting specific form.
}, false );
</script>
<?php
}

  • Esto funciona, pero hay formas mucho más fáciles con CSS, como escribiré a continuación…

    – Adam Jones

    8 de octubre de 2020 a las 13:01

avatar de usuario
bibisha jacob

Si desea ocultar el formulario y mostrar el mensaje de agradecimiento, puede usar el CSS a continuación.

.wpcf7-form.sent p
{
    display:none;
}

  • En las versiones actuales de WPF7 esto no funciona, porque el mensaje de éxito está dentro del .wpcf7-form.sent contenedor, y por lo que puedo decir (actualmente, pero quizás no en la versión disponible en octubre de 2015) no hay p marcado en ese contenedor.

    – inspirado

    23 de mayo de 2017 a las 8:55


  • Esa es la respuesta correcta para WPF7.5 y superior, ya que los otros métodos dejarán de funcionar.

    – Jürgen

    7 de junio de 2018 a las 14:21

Para ocultar el formulario de contacto 7 tienes que agregar el siguiente código, en la sección de configuración del formulario de contacto 7 ya lo generas

on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"

‘formulario de contacto’ es la identificación del “div” que incluye las etiquetas de su formulario de contacto.

  • ¿Esto no oculta también el mensaje de ‘enviado/éxito’?

    – Kokodoko

    14 de abril de 2014 a las 11:23

  • Esta solución no escribirá “¡Enviado!”, es solo para ocultar el contacto como reacción al envío de un correo electrónico.

    – Hombre HTML

    18 de abril de 2014 a las 13:46

  • ‘Enviado/correcto’ se muestra automáticamente en Contact Forms 7 después de hacer clic en enviar. Sería mejor si el formulario original está oculto, pero el mensaje ‘enviado’ permanece visible. Una omisión bastante extraña para un complemento tan poderoso.

    – Kokodoko

    18 de abril de 2014 a las 13:54

  • Esto ya no es válido después de las actualizaciones del complemento. El mensaje de éxito ahora está contenido dentro de la etiqueta

    de marcado, por lo que cuando aplica esta solución, el mensaje de éxito también se oculta.

    – egr103

    4 sep 2014 a las 10:28

  • Esto ya no funciona. Use on_sent_ok: “$(‘#form-id’).hide();” en cambio.

    – public9nf

    11 de marzo de 2016 a las 15:54

avatar de usuario
ravinder kumar

Agregue este código en Configuración adicional en el formulario de contacto 7 admin.

on_sent_ok: "var name = $('.wpcf7 input[name=your-name]').val();

var email = $('.wpcf7 input[name=your-email]').val();

$('.wpcf7').hide();

$('.head_er').hide();

$('.conversations').show();

$('.conversations').html('<p>Thank you.</p>');

$('.conversations').html('<p>We will respond to your email shortly.</p>');"

o puedes ver el siguiente enlace

http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/

Hay varias formas de hacer esto, depende principalmente de cómo creó su formulario, pero esto debería funcionar con un formulario básico usando el nuevo modo de evento:

<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>

Puede poner este código dentro del formulario principal (sin líneas en blanco o cf7 agregará
y

etiquetas), o con cualquier archivo js que se cargaría con el formulario al menos.

Personalmente lo uso en el formulario para incluir también la llamada a Analytics y el código de conversión de AdWords.

  • solución agradable e inteligente

    – Jürgen

    7 junio 2018 a las 14:30

avatar de usuario
jplozano

on_sent_ok:  "$('.wpcf7-form.sent p').hide();"

Dado que el mensaje enviado se coloca en el formulario una vez que se envía el formulario, debemos ocultar todos los párrafos para evitar ocultar el mensaje (que está marcado como DIV).

  • solución agradable e inteligente

    – Jürgen

    7 junio 2018 a las 14:30

Si solo desea ocultar el formulario y no desea usar el script, puede hacer esto:

.wpcf7-form.sent
{
    display:none;
}

#thankYou
{
    font-size: 18px;
    display: none;
}

Luego, en mi HTML después del código corto del Formulario de contacto 7, puse:

<div id="thankYou">Thank you</div>

Finalmente en mi configuración uso:

on_sent_ok:  "$('#thankYou').show()"

Me gusta más este enfoque porque me permite mostrar un mensaje (a diferencia de otras respuestas que simplemente ocultan el formulario). Esto también parece reducir parte del “destello” que estaba viendo, ya que la ocultación ocurre instantáneamente gracias a CSS puro.

  • Sí, este es, con diferencia, el mejor método de uso, aunque no necesariamente para aquellos usuarios con lectores de pantalla.

    – egr103

    04/09/2014 a las 10:50

  • No me gusta esto, porque requiere trabajo adicional y, lo que es más importante, conocimiento práctico de cómo escribir HTML. La mayoría de la gente usa WP porque no son desarrolladores, específicamente mis clientes. Así que esto es más difícil de tratar de explicar a un cliente. Mucho más fácil de hacer como he dicho y seguir usando el campo de éxito integrado en WP7. Mira mi respuesta aquí.

    –Jeremy Miller

    2 oct 2014 a las 0:45

  • on_sent_ok y on_submit se han eliminado oficialmente de Contact Form 7 5.0.

    – Jürgen

    7 de junio de 2018 a las 14:22

¿Ha sido útil esta solución?