Crear un popup con un formulario para contactar

Cómo podemos crear un popup con un formulario para contactar

En esta ocasión vamos a crear un pop-up (ventanita emergente) con un formulario dentro, esto nos ayudará a conseguir más clientes o más ventas, ya que, una vez mostrado el pop-up, el usuario podrá rellenar los campos de dicho formulario. Este formulario no tiene porqué ser únicamente un formulario de contacto, sino que puede ser un formulario optin para conseguir más suscriptores, o un formulario para vender un producto concreto.

Plugins que vamos a utilizar

Una vez hemos entendido el concepto, y qué es lo que vamos a lograr con ello, ha llegado la hora de ponernos manos a la obra.

Lo primero que tenemos que hacer es instalar el plugin que nos facilitará la tarea de crear formularios, en este ejemplo vamos a utilizar el plugin Contact Form 7, para mi uno de los mejores plugins gratuitos de formularios y lo uso en todos (o casi todos) los proyectos que realizo.

Lo descargamos desde este enlace, y una vez instalado y activado, nos vamos a la nueva entrada (CPT) que veremos en el escritorio llamada Contacto.

Vamos a utilizar el formulario que viene por defecto, sin hacerle ningún cambio, ya que este artículo trata de cómo hacer un pop-up con el formulario, no de como crear uno.

Formulario por defecto en Contact Form 7
Formulario por defecto en Contact Form 7

Seguidamente, vamos a instalar y configurar el plugin que nos permitirá crear el pop-up, se trata de Easy Modal, así pues, lo instalamos y lo activamos.

Pantalla de inicio de Easy Modal
Pantalla de inicio de Easy Modal

Configurar Easy Modal

Como hemos dicho anteriormente, vamos a crear un pop-up con un formulario dentro, para ello y en primer lugar, vamos a abrir la página donde queremos que se vea el formulario. Si tienes una Landing Page o una página con el producto que quieres vender (un libro, una canción, un diseño…) la abrimos. No tiene mucho sentido crear el pop-up en la página de contacto 🙂

Una vez instalado y activado el plugin Easy Modal, nos vamos al Escritorio, Easy Modal, Modals y en la ficha General hacemos lo siguiente:

  • Pulsamos el botón Add New y le damos un título. En este caso, como quiero crear un pop-up para un formulario de contacto, escribiré Contacto.
  • En el apartado Load Type elegimos dónde queremos que se abra nuestro pop-up. Si quieres que se abra en todas las páginas elegiremos la opción Load Sitewide, si queremos que se cargue en una única página elegiremos la opción Per Page/Post. Después, en las opciones de esa página concreta, debemos seleccionar en las opciones de esa página, el modal que queremos abrir.
  • A continuación, debemos escribir el texto que corresponderá al título de la ventanita modal, en el apartado Title. En mi caso escribiré: Contacta con nosotros.
  • Por último, en el apartado Content pegaremos el shortcode del formulario que hemos creado con Contact Form 7.
Ficha General del plugin Easy Modal
Ficha General del plugin Easy Modal

A continuación nos pasamos a la ficha Display Options y hacemos lo siguiente:

  • En el apartado Size elegimos el tamaño del pop-up. Por defecto viene en Medium. Aquí tendrás que ir probando para que veas qué tamaño se adapta mejor a tus necesidades.
  • Si marcas la casilla Checking this will disable and hide the overlay for this modal, se desactivará la superposición del modal. Por defecto déjala desactivada.
  • En el apartado Animation, elige las opciones de tipo de animación y duración de la animación. Estos valores afectan a la forma en la que se va a mostrar la ventana modal.
  • El apartado Location te permite elegir en qué esquina se posicionará el botón para que el usuario pueda cerrar el modal.
  • Si activas la casilla Checking this sets the positioning of the modal to fixed harás que el modal tenga una posición fija, es decir, que no se desplace si el usuario hace scroll.
  • Por último, las opciones Top y Right establecen la distancia hacia el borde superior y derecho de la pantalla.

Una vez que hayas terminado de configurar tu ventana modal, pulsas el botón azul Publish que está en la parte superior derecha de esta pantalla.

Ficha Display Options del plugin Easy Modal
Ficha Display Options del plugin Easy Modal

Una vez publicada la configuración vamos a ir a la ficha Examples para ver las distintas formas que tenemos de insertar el modal en nuestro WordPress.

Ficha Examples del plugin Easy Modal
Ficha Examples del plugin Easy Modal

Por último, si quieres insertar el modal en una pagina concreta, en la zona de creación y configuración de la página, debemos bajar hasta abajo del todo y en el apartado Select which modals to load, elegiremos el modal que hemos creado. Y si lo que quieres es insertar el modal en un widget, sólo tienes que pegar el shortcode correspondiente:

  • Con un botón: <button class=»eModal-1″>Open Modal</button>
  • Con una imagen (debes cambiar el src por la ruta de tu imagen): <img src=»easy-modal-icon.png» class=»eModal-1″ />


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *