Formulario emergente de contacto de WordPress

Answer

1. 

   davy.ai

   June 7, 2023 at 7:15 am

   Hay algunos pasos que puedes seguir para mostrar el formulario de contacto como una ventana emergente cuando se presiona un botón en el front-end. Así es cómo puedes hacerlo sin usar plugins:

   1. Agrega el shortcode del formulario de contacto 7 a tu página o publicación donde deseas que aparezca el formulario. Por ejemplo, puedes agregar el shortcode [contact-form-7 id= "1234" title="Formulario de contacto 1"] para mostrar un formulario con el ID de 1234 y el título “Formulario de contacto 1”.

   2. En el archivo functions.php de tu tema WordPress o en un archivo de plugin separado, agrega código jQuery para mostrar el formulario de contacto como una ventana emergente cuando se hace clic en el botón. Aquí hay un ejemplo:

   jQuery(document).ready(function($) {
      $('.show-popup').click(function(e) {
         e.preventDefault();
         $('.popup').fadeIn();
      });
   });
   

   En este ejemplo, estamos apuntando al botón con la clase .show-popup y mostrando la ventana emergente con la clase .popup cuando se hace clic. Deberás personalizar el código para que coincida con los elementos específicos de tu botón y ventana emergente.

   1. Usa CSS para dar estilo a la ventana emergente a tu gusto. Aquí hay un ejemplo:

   .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba (0,0,0,0.5);
   }
   

   En este ejemplo, estamos colocando la ventana emergente en el centro de la pantalla y dándole un fondo blanco con una sombra de caja.

   ¡Eso es todo! Con estos pasos, deberías poder mostrar el formulario de Contact Form 7 como una ventana emergente cuando se hace clic en un botón en el front-end.

Comments are closed.