Crear un formulario de contacto pop-up en WordPress

Las ventajas de mostrar un formulario de contacto en una ventana emergente o pop-up es que simplificas el acceso al usuario. Usualmente el formulario de contacto sólo se ubica en tu página “Contacto”, es decir, si el usuario está navegando en tu blog o en alguna de tus otras páginas internas, y en ese momento quiere ponerse en contacto contigo, tendrá que ir a la página de contacto. Aunque esto nos parecería lo más lógico y usual, entre menos clicks le ofrezcas al usuario para ponerse en contacto contigo, será mejor. Recordemos que el usuario no está en tu web para navegar por todas y cada una de las páginas de tu sitio, sino para encontrar información a la mano, rápida y accesible instantáneamente.

Es por eso que un formulario de contacto abierto en un pop-up es una de las mejores estrategias para ofrecer una vía de contacto rápida, sin navegar por otras páginas, directo en la página en la que al usuario le interesó establecer contacto contigo.

Para crear un formulario de contacto pop-up o en ventana emergente para WordPress yo suelo utilizar dos tipos de soluciones:

Cuando tu tema WordPress está construido con Bootstrap:

Primero habrá que descargar y/o instalar los siguientes plugins para WordPress:

Contact Form 7: Puedes descargar el plugin en el link anterior o instalarlo llendo a Plugins -> Añadir Nuevo -> Buscar plugins -> escribir Contact Form 7 -> click en Enter -> click en Instalar Ahora -> Activar

Bootstrap Shortcodes for WordPress: Puedes descargar el plugin en el link anterior o instalarlo llendo a Plugins -> Añadir Nuevo -> Buscar plugins -> escribir Bootstrap Shortcodes for WordPress -> click en Enter -> click en Instalar Ahora -> Activar

Black Studio TinyMCE Widget: Puedes descargar el plugin en el link anterior o instalarlo llendo a Plugins -> Añadir Nuevo -> Buscar plugins -> escribir Black Studio TinyMCE Widget -> click en Enter -> click en Instalar Ahora -> Activar

Este último plugin sirve para añadir un editor TinyMCE en tus sidebars o widgets.

Pasos para crear tu formulario de contacto pop-up:

  1. Crear un formulario en Contact Form 7 y copiar el shortcode crear-formulario-popup-wordpress-1
  2. En la página en la que desees agregar tu botón para que abra un pop-up con tu formulario de contacto: para este ejemplo yo insertaré un botón en la siguiente página
  3. Cuando instalaste el plugin Bootstrap Shortcodes for WordPress habrás notado que en tu editor de texto se agregó este nuevo ícono (una B con fondo morado), ok, en este ícono harás click para insertar un modal (popup): Captura de pantalla 2015-02-09 a las 10.30.39
  4. En el espacio, en tu página o entrada en WordPress donde desees agregar el botón que abrirá tu formulario en un pop-up o ventana emergente, harás click en el botón Bootstrap Shortcodes for WordPress. Verás muchas opciones y tendrás que hacer scroll hacia abajo hasta encontrar el título Javascript y seleccionarás la opción Modal crear-formulario-popup-wordpress-2
  5. Ahora desplegará la siguiente información, y aquí solo tendrás que dar click en Insert Example crear-formulario-popup-wordpress-3
  6. Ahora habrá que modificar un poco el código que inserta para mostrar el formulario, siguiendo lo que muestra la siguiente imagen formulario-popup-wordpress-paso4
  7. Y eso es todo, ya tienes tu formulario pop-up.
  8. Si quieres insertar el botón para abrir el formulario pop-up en tu sidebar, primero instala Black Studio TinyMCE Widget y luego crea un nuevo widget Captura de pantalla 2015-02-09 a las 11.27.16
  9. Ahora repite el proceso desde el paso 3 para añadir el modal en tu sidebar

Cuando tu tema WordPress no tiene Bootstrap por defecto:

Primero habrá que descargar y/o instalar los siguientes plugins para WordPress:

Contact Form 7: Puedes descargar el plugin en el link anterior o instalarlo llendo a Plugins -> Añadir Nuevo -> Buscar plugins -> escribir Contact Form 7 -> click en Enter -> click en Instalar Ahora -> Activar

Easy Modal: Puedes descargar el plugin en el link anterior o instalarlo llendo a Plugins -> Añadir Nuevo -> Buscar plugins -> escribir Easy Modal -> click en Enter -> click en Instalar Ahora -> Activar

  1. Crear un formulario en Contact Form 7 y copiar el shortcode crear-formulario-popup-wordpress-1
  2. En la página en la que desees agregar tu botón para que abra un pop-up con tu formulario de contacto: para este ejemplo yo insertaré un botón en la siguiente página
  3. Lo primero es ir al plugin Easy Modal Captura de pantalla 2015-02-09 a las 12.31.06
  4. A continuación aparecerá la siguiente pantalla en donde habrás de hacer click en el botón Add new Captura de pantalla 2015-02-09 a las 12.32.51
  5. Y rellenar la siguiente información donde verás que en Name y Title pongo el mismo nombre “Formulario de Contacto”, mientras que en el espacio para escribir texto pego el shortcode de mi formulario anteriormente generado en Contact Form 7. Y en Load Type selecciono “Load Sitewide” para que cargue en todas las páginas.Captura de pantalla 2015-02-09 a las 12.34.05
  6. Ahora, en la pestaña “Display Options” selecciono lo siguiente, sin embargo tú puedes jugar con estos parámetros para lograr el pop-up que estás buscando Captura de pantalla 2015-02-09 a las 12.36.41
  7. Bien, una vez terminada la configuración habrás que dar click en botón que está en el panel superior derecho “Publish” Captura de pantalla 2015-02-09 a las 12.40.05
  8. Y por último tendrás que ir a la pestaña “Examples” donde copiarás el shortcode que te permitirá añadir este nuevo modal en cualquier lugar de tu sitio WordPress, ya sea en una página, en una entrada de blog o en algún sidebar Captura de pantalla 2015-02-09 a las 12.41.19
  9. Yo tomaré el primer shortcode o link:
  10. Y luego lo insertaré en esta entrada:
  11. Open Modal
  12. Para introducir este botón o link y abrir un formulario de contacto pop-up solo tendrás que pegar este link o botón en donde quieras, ya sea un sidebar, post o página.
Recommended Posts
Showing 5 comments
  • Elida
    Responder

    Estoy buscando agregar un popup al entrar en una categoria, este plugin me puede servir?

    • mowglymx
      Responder

      Hola Elida, sí, este plugin es para eso

  • Lara
    Responder

    ¡Hola! Estaba buscando justamente esto y he llegado aquí. Parece más de lo difícil de lo que creía conseguir un popup al hacer click. La cosa es que sigo todos los pasos (sin Bootstrap), pero ni en el ejemplo ni en el resultado final me aparece el popup… ¿Tienes idea de por qué puede ser?

    Gracias de antemano.

  • Jesus Avila
    Responder

    Hola, ¡¡muchas gracias!!

    Me funcionó de maravilla, estuve buscando código por alli y nada funcionaba, incluso información en inglés que no comprendía.
    Pero tu artículo y este plugins funciono perfectamente

  • Jose Muñoz
    Responder

    Hola!! ¿Cómo estás? Agradezco por este excelente tutorial, me ha servido totalmente. Tengo una pregunta ¿Porqué cuando lo quiero ver desde un móvil no se visualiza? ¿Qué tendría qué hacer para qué funcione bien desde los móviles? Muchas gracias 😀

Leave a Comment