Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir una ventana emergente de formulario de contacto en WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Estás buscando una forma sencilla de mostrar un mensaje / ventana emergente de formulario de contacto en tu sitio web WordPress?

Los formularios de contacto son excelentes para comunicarse con sus visitantes. Colocarlos en una ventana emergente facilita aún más que sus clientes se pongan en contacto con usted acerca de sus productos y servicios.

En este artículo, le mostraremos cómo añadir una ventana emergente de formulario de contacto en WordPress.

How to add a contact form popup in WordPress

¿Por qué utilizar un mensaje / ventana emergente de formulario de contacto?

Todos los sitios web o blogs de WordPress necesitan un formulario de contacto para que los usuarios puedan enviar sus preguntas, comentarios / opiniones o problemas.

Sin embargo, si su formulario de contacto se encuentra solo en una página, es difícil que la gente lo encuentre.

Como resultado, sus usuarios pueden acabar abandonando su sitio antes de ponerse en contacto con usted, y podría perder clientes potenciales y conversiones.

Una ventana emergente de formulario de contacto ayuda a resolver este problema permitiendo a sus visitantes ver rápidamente el formulario al hacer clic en un botón, para que puedan ponerse en contacto con usted desde cualquier página en la que se encuentren.

Ayuda a mantener a la gente en su sitio web, ya que no tienen que salir de la página que están viendo. También puede ampliar su lista de correo electrónico con un mensaje / ventana emergente de formulario de contacto.

Dicho esto, primero tendrás que crear un formulario de contacto y luego colocarlo en un mensaje / ventana emergente para mostrarlo en tus páginas web. No te preocupes, te guiaremos para crear un formulario de contacto y añadirlo a una ventana emergente en WordPress.

Cómo crear un formulario de contacto en WordPress

En primer lugar, tendrá que seleccionar un plugin de formulario de contacto de WordPress.

Hay muchas opciones gratuitas y de pago entre las que puedes elegir, pero te recomendamos usar WPForms ya que es la mejor opción.

WPForms es un plugin de formularios para principiantes y ofrece un maquetador de arrastrar y soltar que permite crear un formulario de contacto en WordPress en unos pocos clics. También ofrece plantillas de formularios prediseñadas y un montón de opciones de personalización.

Para este tutorial, utilizaremos la versión WPForms Lite porque es gratuita y ofrece una plantilla de formulario de contacto.

Sin embargo, también puede utilizar su versión premium para desbloquear más características. Por ejemplo, WPForms Pro ofrece más de 1.800 plantillas de formularios, más opciones de personalización, potentes extensiones y permite cobrar pagos en línea sin cuotas de transacción adicionales.

Para empezar, primero tendrá que instalar y activar el plugin WPForms Lite. Si necesita ayuda, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin está activado, ya está listo para crear su formulario de contacto. Todo lo que tienes que hacer es ir a WPForms ” Añadir Nuevo desde tu escritorio de WordPress.

Add a new form

Después de eso, WPForms le pedirá que introduzca un nombre para su formulario y seleccione una plantilla.

Seleccione la plantilla “Formulario de contacto simple”.

The WPForms Simple Contact template

A continuación, puede añadir campos en el formulario utilizando el editor de arrastrar y soltar.

Sólo tiene que arrastrar los campos que desee añadir al formulario desde las opciones que aparecen en el menú de la izquierda. También puede reordenar las posiciones de cada campo en el formulario.

A contact form template

WPForms también le permite personalizar cada campo del formulario de contacto.

Por ejemplo, si hace clic en el campo Nombre, obtendrá distintas opciones, como cambiar su etiqueta y formato. Incluso puedes añadir una descripción o marcar cualquier campo como obligatorio / requerido / necesario.

Edit each field in the contact form

Una vez que haya terminado, siga adelante y haga clic en la opción “Ajustes” para configurar el aviso y la confirmación del formulario.

En los ajustes generales, puede cambiar el nombre del formulario, cambiar el texto del botón de envío, activar la protección antispam, etc.

Editing the WPForms settings

A continuación, puede ir a la opción de ajustes de Notificaciones. Por defecto, los avisos se envían al correo electrónico del administrador establecido en su sitio web de WordPress.

No obstante, puede enviar su aviso de formulario de contacto a la dirección de correo electrónico que desee. Si desea recibir avisos en varios correos electrónicos, separe cada correo electrónico con una coma.

Para el asunto del correo electrónico, WPForms utiliza el nombre del formulario que ingresó anteriormente. Sin embargo, puede editar el texto de la línea de asunto a lo que desee.

Edit notification settings

A continuación, siga adelante y haga clic en la opción Confirmaciones.

WPForms usará ‘Mensaje’ como el tipo de confirmación por defecto, donde sus visitantes verán un mensaje de agradecimiento al enviar un formulario.

Edit form confirmation settings

Sin embargo, puede cambiar el tipo de mensaje y redirigir a los usuarios a una página específica de su sitio web cuando completen un formulario.

Una vez que haya terminado de crear un formulario de contacto, asegúrese de hacer clic en el botón “Guardar” de la esquina superior derecha para guardar los cambios.

Embed your form

A continuación, haga clic en la opción “Incrustar” situada en la esquina superior, al lado del botón Guardar.

Cuando aparezca una nueva ventana, seleccione la opción “utilizar un shortcode”.

Click the use a shortcode link

WPForms mostrará un shortcode para su formulario de contacto tan pronto como haga clic en el enlace. Le sugerimos que mantenga esta pestaña / ventana abierta ya que la necesitará en el siguiente paso, donde le mostraremos cómo añadir su formulario de contacto en un mensaje / ventana emergente.

Añadir un formulario de contacto emergente a su sitio de WordPress

Para crear una ventana emergente de formulario de contacto, necesitará un plugin de ventanas emergentes de WordPress.

Recomendamos usar OptinMonster ya que es el mejor plugin de generación de clientes potenciales y optimización de conversiones para WordPress. Más de 1,2 millones de sitios web utilizan esta potente herramienta.

Para este tutorial, utilizaremos la versión OptinMonster Pro, que incluye una plantilla libre de desorden y reglas de visualización avanzadas para mostrar la ventana emergente.

Primero tendrá que acceder al sitio web de OptinMonster para crear una cuenta. Simplemente visite el sitio web y haga clic en el botón ‘Get OptinMonster Now’.

OptinMonster

A continuación, deberá instalar y activar el plugin gratuito OptinMonster en su sitio web. Para más detalles, sigue nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, aparecerá el asistente de configuración. Sigue adelante y haz clic en el botón “Conecta tu cuenta existente”.

Connect your existing account

Aparecerá una ventana emergente y OptinMonster le pedirá que se conecte a su cuenta.

Basta con hacer clic en el botón “Conectar a WordPress”.

Connect OptinMonster to WordPress

Ahora que su cuenta está conectada, lo siguiente es crear una nueva campaña para su mensaje / ventana emergente de formulario de contacto.

Puede empezar yendo a OptinMonster ” Campañas y haciendo clic en el botón “Crear su primera campaña”.

Create first OptinMonster campaign

En la pantalla siguiente, tendrá que seleccionar un tipo de campaña.

Como vamos a crear una ventana emergente de formulario de contacto, seleccione “Ventana emergente” como Tipo de campaña.

Choose a campaign type and template

Después, desplácese hacia abajo para elegir una plantilla para su ventana emergente. OptinMonster ofrece más de 75 diseños atractivos y de alta conversión para sus ventanas emergentes.

Puede seleccionar la plantilla que desee. A continuación, introduzca un nombre para su campaña y haga clic en el botón “Empezar a crear”.

Enter a name for your campaign

Ahora, utilizando el maquetador de arrastrar y soltar de OptinMonster, puede editar su plantilla de mensaje / ventana emergente.

Ahora verá que aparecen diferentes bloques en el menú de la izquierda. Simplemente dirígete al bloque ‘WPForms’ y arrástralo y suéltalo en tu plantilla.

Add the WPForms block in popup

A continuación, deberá hacer clic en el menú desplegable “Selección de formulario” de los ajustes de bloque del menú de la izquierda y seleccionar la opción “Añadir shortcode manualmente”.

Desde aquí, introduzca el shortcode de su formulario de contacto WPForms en el bloque. Para encontrar el código, vuelva a los ajustes de incrustación de WPForms y copie el shortcode.

Enter contact form shortcode

Algo importante a tener en cuenta es que no verás una vista previa del formulario de contacto en la plantilla cuando añadas el shortcode.

Esto es normal, ya que su formulario de contacto aparecerá cuando se publique la campaña.

See contact form shortcode

A continuación, puede ir a la pestaña Reglas de visualización en la parte superior para elegir cuándo debe aparecer la ventana emergente en su sitio web.

Por defecto, OptinMonster lo establecerá cuando el tiempo en la página sea de 5 segundos, y la ventana emergente aparecerá en cualquier página.

Sin embargo, puede cambiar los ajustes de las reglas de visualización y seleccionar diferentes activadores y opciones de orientación.

Le sugerimos que utilice la orientación MonsterLink (On Click). De esta forma, su ventana emergente aparecerá cuando un visitante haga clic en un enlace o en un botón.

Select MonsterLink display rule

A continuación, puede hacer clic en el botón “Copiar código MonsterLink” y añadirlo a cualquier texto, imagen o botón de su sitio web.

Para más detalles, puede seguir nuestra guía para principiantes sobre cómo añadir un enlace en WordPress.

Copy the MonsterLink code

Su código MonsterLink tendrá este aspecto en HTML:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

Sin embargo, para incrustar el enlace en la entrada o página de su blog de WordPress, sólo necesita la URL del código.

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Por ejemplo, digamos que desea añadir un botón de contacto en su sitio. Para empezar, edita cualquier página o entrada y ve al editor de WordPress. A continuación, haz clic en el signo (+) de la parte superior y añade un bloque de “Botones”.

Add a button block

A continuación, puede introducir un texto para el botón y hacer clic en el icono de enlace.

Ahora añade la URL de MonsterLink a tu botón.

Enter the MonsterLink in the button

Una vez hecho esto, publique su entrada o página en WordPress. El MonsterLink se añadirá a su botón de contacto.

A continuación, vuelva a su campaña de OptinMonster para completar la configuración.

Después de seleccionar MonsterLink como su objetivo y mostrarlo en cualquier página, puede hacer clic en el botón ‘Siguiente’ en la parte inferior.

Complete display rules setup

En la siguiente pantalla, verás opciones para cambiar el tipo de vista de la campaña, añadir una animación MonsterEffect y reproducir un sonido cuando aparezca el mensaje / ventana emergente.

Siga adelante y haga clic en el botón “Siguiente” cuando esté satisfecho con los ajustes.

Setup additional display rule settings

A continuación, OptinMonster mostrará un resumen de los ajustes de las reglas de visualización.

Esto le ayudará a establecer correctamente cuándo aparecerán sus campañas en su sitio web.

View display rules summary

Ahora ya puedes lanzar tu campaña y publicar tu ventana emergente de formulario de contacto. Para ello, vaya a la pestaña “Publicar” en la parte superior.

A continuación, puedes hacer clic en el botón “Vista previa” antes de publicar tu campaña. Esto le mostrará una vista previa en vivo de cómo se verá su mensaje / ventana emergente en su sitio web.

Cuando esté satisfecho con el aspecto de su campaña, cambie el “Estado de publicación” de Borrador a Publicar.

Change the publish status

También puede salir del maquetador de campañas de OptinMonster y comprobar el estado de su campaña desde su escritorio de WordPress.

Sólo tiene que hacer clic en el menú desplegable “Estado” de la derecha y cambiar el estado de Pendiente a Publicado.

Change the campaign status

No olvides guardar los cambios.

A continuación, vaya al botón de contacto que creó anteriormente con MonsterLink y vea el mensaje / ventana emergente del formulario de contacto en acción.

Contact form popup preview

Esperamos que este artículo te haya ayudado a aprender cómo añadir una ventana emergente de formulario de contacto en WordPress. También puedes marcar / comprobar nuestra guía sobre cómo elegir el mejor maquetador de sitios web o nuestra comparativa del mejor software de nóminas para pequeñas empresas.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

28 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Isaac says

    This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.

  3. Ruben says

    Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.

  4. Jhorene says

    Hello,

    Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?

    Thank you.

    Regards,
    Jhorene

  5. Mike Whaling says

    Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.

    Any tips or suggestions?

  6. Silvan says

    could this work as well in a WordPress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.