[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-una-ventana-emergente-de-formulario-de-contacto-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-una-ventana-emergente-de-formulario-de-contacto-en-wordpress\/","headline":"C\u00f3mo agregar una ventana emergente de formulario de contacto en WordPress","name":"C\u00f3mo agregar una ventana emergente de formulario de contacto en WordPress","description":"\u00bfEst\u00e1 buscando una manera f\u00e1cil de mostrar una ventana emergente de formulario de contacto en su sitio web de WordPress? Los formularios de contacto son ... Leer m\u00e1s<\/a>","datePublished":"2021-06-23","dateModified":"2021-06-23","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-una-ventana-emergente-de-formulario-de-contacto-en.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-una-ventana-emergente-de-formulario-de-contacto-en.png","height":340,"width":550},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-una-ventana-emergente-de-formulario-de-contacto-en-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":2179,"articleBody":"\u00bfEst\u00e1 buscando una manera f\u00e1cil de mostrar una ventana emergente de formulario de contacto en su sitio web de WordPress?Los formularios de contacto son excelentes para comunicarse con sus visitantes. Colocarlos en una ventana emergente hace que sea a\u00fan m\u00e1s f\u00e1cil para sus clientes comunicarse con usted acerca de sus productos y servicios. En este art\u00edculo, le mostraremos c\u00f3mo agregar una ventana emergente de formulario de contacto en WordPress. \u00bfPor qu\u00e9 utilizar una ventana emergente de formulario de contacto?Cada sitio web o blog de WordPress necesita un formulario de contacto para que los usuarios puedan comunicarse con sus preguntas, comentarios o problemas. Sin embargo, si su formulario de contacto est\u00e1 en una sola p\u00e1gina, entonces es dif\u00edcil para las personas encontrarlo y es posible que no est\u00e9n dispuestas a abandonar la p\u00e1gina en la que se encuentran. Como resultado, sus usuarios pueden terminar abandonando su sitio y usted podr\u00eda perder potenciales clientes potenciales y conversiones. Una ventana emergente de formulario de contacto ayuda a resolver este problema al permitir que sus visitantes vean r\u00e1pidamente el formulario haciendo clic en un bot\u00f3n, para que puedan comunicarse con usted desde cualquier p\u00e1gina en la que est\u00e9n.Ayuda a mantener a las personas en su sitio web, ya que no tienen que salir de la p\u00e1gina que est\u00e1n viendo. Tambi\u00e9n puede hacer crecer su lista de correo electr\u00f3nico utilizando una ventana emergente de formulario de contacto. Dicho esto, primero deber\u00e1 crear un formulario de contacto y luego colocarlo en una ventana emergente para mostrarlo en sus p\u00e1ginas web. No se preocupe, lo guiaremos para crear un formulario de contacto y agregarlo a una ventana emergente en WordPress. C\u00f3mo crear un formulario de contacto de WordPressPrimero, deber\u00e1 seleccionar un complemento de formulario de contacto de WordPress. Hay muchas opciones gratuitas y de pago entre las que puede elegir, pero le recomendamos que utilice WPForms ya que es la mejor opci\u00f3n. WPForms es un complemento de formulario para principiantes y ofrece un generador de arrastrar y soltar que le permite crear un formulario de contacto en WordPress con solo unos pocos clics. Tambi\u00e9n ofrece plantillas de formulario predise\u00f1adas y muchas opciones de personalizaci\u00f3n.Para este tutorial, usaremos WPForms Lite versi\u00f3n porque es gratuita y ofrece una plantilla de formulario de contacto. Sin embargo, tambi\u00e9n puede usar su versi\u00f3n premium para desbloquear m\u00e1s funciones. Por ejemplo, WPForms Pro ofrece m\u00faltiples plantillas de formulario, m\u00e1s opciones de personalizaci\u00f3n, complementos potentes y le permite cobrar pagos en l\u00ednea. Para comenzar, primero deber\u00e1 instalar y activar el complemento WPForms Lite. Si necesita ayuda, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress. Una vez que el complemento est\u00e9 activo, estar\u00e1 listo para crear su formulario de contacto. Todo lo que tienes que hacer es ir a WPForms \u00bbAgregar nuevo desde su panel de WordPress. Despu\u00e9s de eso, WPForms le pedir\u00e1 que ingrese un nombre para su formulario y seleccione una plantilla. Contin\u00fae y seleccione la plantilla ‘Formulario de contacto simple’.A continuaci\u00f3n, puede agregar campos en el formulario utilizando el generador de arrastrar y soltar. Simplemente arrastre los campos que desea agregar al formulario desde las opciones dadas en el men\u00fa a su izquierda. Tambi\u00e9n puede reordenar las posiciones de cada campo en el formulario.WPForms tambi\u00e9n le permite personalizar cada campo en el formulario de contacto. Por ejemplo, si hace clic en el campo Nombre, obtendr\u00e1 diferentes opciones, como cambiar su etiqueta y formato. Incluso puede agregar una descripci\u00f3n o marcar cualquier campo seg\u00fan sea necesario. Una vez que haya terminado, contin\u00fae y haga clic en la opci\u00f3n ‘Configuraci\u00f3n’ para configurar la notificaci\u00f3n y la confirmaci\u00f3n del formulario. En la configuraci\u00f3n general, puede cambiar el nombre del formulario, cambiar el texto del bot\u00f3n de env\u00edo, habilitar la protecci\u00f3n contra correo no deseado y m\u00e1s. A continuaci\u00f3n, puede ir a la opci\u00f3n de configuraci\u00f3n de Notificaciones. De forma predeterminada, las notificaciones se env\u00edan al correo electr\u00f3nico de administrador que est\u00e1 configurado en su sitio web de WordPress. Sin embargo, puede optar por enviar la notificaci\u00f3n del formulario de contacto a cualquier direcci\u00f3n de correo electr\u00f3nico que desee. Si desea recibir notificaciones en varios correos electr\u00f3nicos, separe cada correo electr\u00f3nico con una coma. Para la l\u00ednea de asunto del correo electr\u00f3nico, WPForms usa el nombre del formulario que ingres\u00f3 anteriormente. Sin embargo, puede editar el texto de la l\u00ednea de asunto como desee.Despu\u00e9s de eso, contin\u00fae y haga clic en la opci\u00f3n Confirmaciones. WPForms usar\u00e1 ‘Mensaje’ como el tipo de confirmaci\u00f3n predeterminado donde sus visitantes ver\u00e1n un mensaje de agradecimiento al enviar un formulario. Sin embargo, puede cambiar el tipo de mensaje y redirigir a los usuarios a una p\u00e1gina espec\u00edfica de su sitio web cuando completen un formulario. Una vez que haya terminado de crear un formulario de contacto, aseg\u00farese de hacer clic en el bot\u00f3n ‘Guardar’ en la esquina superior derecha para guardar sus cambios. A continuaci\u00f3n, haga clic en la opci\u00f3n ‘Insertar’ en la esquina superior junto al bot\u00f3n Guardar. Cuando aparezca una nueva ventana, seleccione la opci\u00f3n ‘usar un c\u00f3digo corto’. Tan pronto como haga clic en el enlace, WPForms mostrar\u00e1 un c\u00f3digo corto para su formulario de contacto. Le sugerimos que mantenga esta pesta\u00f1a \/ ventana abierta ya que la necesitar\u00e1 en el siguiente paso, donde le mostraremos c\u00f3mo agregar su formulario de contacto en una ventana emergente. Agregue una ventana emergente de formulario de contacto a su sitio de WordPressPara crear una ventana emergente de formulario de contacto, necesitar\u00e1 un complemento de ventana emergente de WordPress. Recomendamos usar OptinMonster ya que es el mejor complemento de optimizaci\u00f3n de conversi\u00f3n y generaci\u00f3n de leads para WordPress. M\u00e1s de 1,2 millones de sitios web utilizan esta poderosa herramienta.Para este tutorial, usaremos el Versi\u00f3n de OptinMonster Pro, ya que incluye una plantilla ordenada y reglas de visualizaci\u00f3n avanzadas para mostrar la ventana emergente. Primero deber\u00e1 registrarse para obtener una cuenta en el sitio web de OptinMonster. A continuaci\u00f3n, instale y active el complemento gratuito de OptinMonster en tu sitio web. Para obtener m\u00e1s detalles, siga nuestra gu\u00eda sobre c\u00f3mo instalar un complemento de WordPress.Una vez que el complemento est\u00e9 activo, deber\u00e1 conectarlo con su sitio web de WordPress. Para hacer eso, simplemente dir\u00edgete a OptinMonster \u00bbConfiguraci\u00f3n desde su panel de WordPress y haga clic en el bot\u00f3n ‘Conectar una cuenta existente’.Aparecer\u00e1 una ventana emergente y OptinMonster le pedir\u00e1 que se conecte a su cuenta. Simplemente haga clic en el bot\u00f3n ‘Conectarse a WordPress’. Ahora que su cuenta est\u00e1 conectada, lo siguiente es crear una nueva campa\u00f1a para la ventana emergente de su formulario de contacto. Puedes empezar yendo a OptinMonster \u00bbCampa\u00f1as y luego haga clic en el bot\u00f3n “Cree su primera campa\u00f1a”. En la siguiente pantalla, deber\u00e1 seleccionar un tipo de campa\u00f1a. Dado que crearemos una ventana emergente de formulario de contacto, seleccione ‘Ventana emergente’ como su Tipo de campa\u00f1a. Despu\u00e9s de eso, despl\u00e1cese hacia abajo para elegir una plantilla para su ventana emergente. OptinMonster ofrece m\u00e1s de 75 dise\u00f1os atractivos y de gran conversi\u00f3n para sus ventanas emergentes. Le recomendamos que seleccione la plantilla Canvas. Es una plantilla en blanco y excelente para mostrar su formulario de contacto, ya que los usuarios pueden concentrarse en completar el formulario sin distracciones. Luego, ingrese un nombre para su campa\u00f1a y haga clic en el bot\u00f3n ‘Comenzar a construir’.Ahora, usando el generador de arrastrar y soltar en OptinMonster, puede editar su plantilla emergente. Para comenzar, haga clic en el bot\u00f3n ‘+ Agregar bloques’ en la parte superior. Ahora ver\u00e1 aparecer diferentes Bloques en el men\u00fa de su izquierda. Simplemente dir\u00edjase al bloque HTML y arr\u00e1strelo y su\u00e9ltelo en su plantilla. Despu\u00e9s de eso, deber\u00e1 ingresar el c\u00f3digo corto del formulario de contacto de WPForms en su bloque HTML. Para encontrar el c\u00f3digo, vuelva a la configuraci\u00f3n de inserci\u00f3n de WPForms y copie el c\u00f3digo corto. Ahora, ingrese el c\u00f3digo corto copiado en su bloque HTML en OptinMonster, donde dice ‘Agregar HTML aqu\u00ed’.Una cosa importante a tener en cuenta es que no ver\u00e1 una vista previa del formulario de contacto en la plantilla cuando agregue el c\u00f3digo corto. Esto es normal y su formulario de contacto aparecer\u00e1 cuando se publique la campa\u00f1a. A continuaci\u00f3n, puede ir a la pesta\u00f1a Reglas de visualizaci\u00f3n en la parte superior para elegir cu\u00e1ndo debe aparecer la ventana emergente en su sitio web. De forma predeterminada, OptinMonster lo establecer\u00e1 cuando el tiempo en la p\u00e1gina sea de 5 segundos y la ventana emergente aparecer\u00e1 en cualquier p\u00e1gina. Sin embargo, puede cambiar la configuraci\u00f3n de la regla de visualizaci\u00f3n y seleccionar diferentes activadores y opciones de orientaci\u00f3n. Sugerimos utilizar el MonsterLink (al hacer clic) focalizaci\u00f3n. De esta manera, su ventana emergente aparecer\u00e1 cuando un visitante haga clic en un enlace o bot\u00f3n. Despu\u00e9s de eso, puede hacer clic en el bot\u00f3n ‘Copiar c\u00f3digo MonsterLink’ y agregarlo a cualquier texto, imagen o bot\u00f3n en su sitio web. Para obtener m\u00e1s detalles, puede seguir nuestra gu\u00eda para principiantes sobre c\u00f3mo agregar un enlace en WordPress. Su c\u00f3digo MonsterLink se ver\u00e1 as\u00ed en HTML:<a href=\"https:\/\/app.monstercampaigns.com\/c\/ep6f5qtakxauowbj8097\/\" target=\"_blank\" rel=\"noopener noreferrer\">Subscribe Now!<\/a>Sin embargo, para insertar el enlace en su publicaci\u00f3n o p\u00e1gina de blog de WordPress, solo necesita la URL del c\u00f3digo.https:\/\/app.monstercampaigns.com\/c\/ep6f5qtakxauowbj8097\/Por ejemplo, supongamos que desea agregar un bot\u00f3n de contacto en su sitio. Puede comenzar editando cualquier p\u00e1gina o publicaci\u00f3n e ir a su editor de WordPress. A continuaci\u00f3n, haga clic en el signo m\u00e1s (+) en la parte superior y agregue un bloque de ‘Botones’.Despu\u00e9s de eso, ingrese un texto para su bot\u00f3n y luego haga clic en el \u00edcono de enlace. Ahora agregue la URL de MonsterLink a su bot\u00f3n. Una vez que haya hecho eso, publique su publicaci\u00f3n o p\u00e1gina de WordPress. El MonsterLink ahora se agregar\u00e1 a su bot\u00f3n de contacto. A continuaci\u00f3n, regrese a su campa\u00f1a de OptinMonster para completar la configuraci\u00f3n. Despu\u00e9s de seleccionar MonsterLink como su orientaci\u00f3n y mostrarlo en cualquier p\u00e1gina, puede hacer clic en el bot\u00f3n ‘Siguiente’ en la parte inferior. En la siguiente pantalla, ver\u00e1 opciones para cambiar el tipo de vista de la campa\u00f1a, agregar una animaci\u00f3n MonsterEffect y reproducir un sonido cuando aparezca la ventana emergente. Contin\u00fae y haga clic en el bot\u00f3n ‘Siguiente’ cuando est\u00e9 satisfecho con la configuraci\u00f3n. Despu\u00e9s de eso, OptinMonster mostrar\u00e1 un resumen de la configuraci\u00f3n de la regla de visualizaci\u00f3n. Esto ayuda a asegurarse de haber configurado correctamente cu\u00e1ndo aparecer\u00e1n sus campa\u00f1as en su sitio web. Ahora, est\u00e1 listo para llevar su campa\u00f1a en vivo y publicar la ventana emergente de su formulario de contacto. Para hacer eso, vaya a la pesta\u00f1a ‘Publicar’ en la parte superior. A continuaci\u00f3n, puede hacer clic en el bot\u00f3n ‘Vista previa’ antes de publicar su campa\u00f1a. Esto le mostrar\u00e1 una vista previa en vivo de c\u00f3mo se ver\u00e1 su ventana emergente en su sitio web. Cuando est\u00e9 satisfecho con la apariencia de su campa\u00f1a, cambie el ‘Estado de publicaci\u00f3n’ de Borrador a Publicar. Puede salir del creador de campa\u00f1as de OptinMonster y comprobar el estado de su campa\u00f1a tambi\u00e9n desde su panel de WordPress.Solo ve a OptinMonster \u00bbCampa\u00f1as y debajo de la columna Estado, su campa\u00f1a emergente de formulario de contacto debe mostrar ‘Publicado’. A continuaci\u00f3n, vaya al bot\u00f3n de contacto que cre\u00f3 anteriormente con MonsterLink y vea la ventana emergente del formulario de contacto en acci\u00f3n. Esperamos que este art\u00edculo le haya ayudado a aprender c\u00f3mo agregar una ventana emergente de formulario de contacto en WordPress. Tambi\u00e9n puede consultar nuestra gu\u00eda sobre c\u00f3mo elegir el mejor creador de sitios web o nuestra comparaci\u00f3n del mejor software de n\u00f3mina de recursos humanos para peque\u00f1as empresas. Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.4 \/ 5 ( 298 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar una ventana emergente de formulario de contacto en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-una-ventana-emergente-de-formulario-de-contacto-en-wordpress\/#breadcrumbitem"}]}]