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.

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.

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.

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.

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.

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″ />

ACTUALIZACIÓN DEL ARTÍCULO
Nuestro compañero y amigo Rogama nos ha advertido que el plugin Easy Modal se ha quedado anticuado, y por cuestiones de seguridad no es aconsejable utilizarlo. En su lugar aconsejan utilizar Popup Maker, que funciona de forma similar a Easy Modal.
Muchas gracias de nuevo a Rogama por la advertencia y la solución aportada.
¡Así da gusto!

[whatsapp]

¿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.