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 incrustar formularios en WordPress (Guía definitiva para principiantes)

Los formularios de WordPress son esenciales para conectar con los visitantes y hacer crecer tu audiencia. Tanto si añades un formulario de contacto, como una encuesta o un formulario de comentarios, incrustarlo en tu sitio web es una forma rápida y sencilla de recopilar información de los visitantes.

Utilizamos formularios en todos nuestros proyectos, desde páginas de contacto hasta suscripciones a boletines e incluso formularios de pago. En el camino, hemos aprendido todos los pasos necesarios para incrustar un formulario de WordPress, y estamos aquí para guiarte a través de todo el proceso de principio a fin.

En esta guía, le mostraremos cómo incrustar formularios utilizando los creadores de formularios de WordPress más populares.

How to Embed Forms in WordPress

¿Qué es un formulario de WordPress y por qué es importante?

Un formulario de WordPress es una herramienta para recopilar información valiosa en su sitio web. Permite a los visitantes introducir datos como su nombre, dirección de correo electrónico y comentarios.

Los formularios tienen muchos usos. Por ejemplo, puede crear un formulario de contacto para que los usuarios puedan ponerse en contacto con usted y crear una lista de correo electrónico, una encuesta para recabar opiniones o un formulario de inscripción para eventos.

También puede utilizar formularios para reservar citas o recaudar donativos. Algunas empresas también utilizan formularios para gestionar las solicitudes de atención al cliente.

Sin formularios, puede perder oportunidades de interactuar con los visitantes. Por lo tanto, añadir formularios a su sitio web WordPress es una decisión inteligente para cualquier propietario de un sitio web.

Cómo incrustar formularios en WordPress

En las siguientes secciones, le guiaremos a través de cada paso para añadir formularios a su sitio WordPress. Si estás interesado en un tipo de formulario en particular, puedes hacer clic en el enlace para avanzar en el artículo:

¿Preparados? Empecemos.

1. Cómo incrustar WPForms en su sitio WordPress

WPForms es el mejor creador de formularios multipropósito del mercado. También es uno de los más populares, con más de 6 millones de usuarios activos.

Con esta herramienta, puede utilizar cualquiera de sus más de 2000 plantillas listas para usar y personalizables para crear cualquier formulario que desee.

WPForms' homepage

Además de los formularios de contacto, WPForms puede ayudarle a crear fácilmente formularios simples o más avanzados, como:

Cuando se trata de incrustar WPForms, puede utilizar un bloque WPForms o un shortcode.

Entonces, instalemos y activemos WPForms y probemos esto juntos. Si necesita ayuda, puede consultar nuestra guía sobre cómo instalar un plugin de WordPress.

A continuación, puede seguir nuestra guía paso a paso sobre cómo crear un formulario de contacto en WordPress.

Incrustación de formularios WPForms con el bloque WPForms

Una vez que el formulario esté listo para publicarse, simplemente haga clic en el botón ‘Incrustar’ dentro del constructor de formularios para agregar el formulario a su página web utilizando un bloque WPForms.

The Embed button in WPForms form builder

Se abrirá una ventana emergente en la que podrá elegir una página existente o crear una nueva para el formulario.

Si haces clic en el botón “Seleccionar página existente”, verás un menú desplegable con todas las páginas disponibles en tu sitio web. Y si haces clic en “Crear nueva página”, verás un campo “Nombre de la página” para rellenar.

Una vez que hayas elegido una página o hayas dado nombre a tu nueva página, puedes hacer clic en el botón “¡Vamos!”.

Embed contact form WPForms

A continuación, se le redirigirá al editor de bloques de la página.

Desde aquí, puede hacer clic en el botón ‘+’ y buscar el bloque WPForms.

Adding WPForms block

El siguiente paso es abrir el desplegable del bloque WPForms y elegir el formulario que quieres incrustar.

Una vez que seleccione un formulario, WPForms lo cargará en el editor de bloques.

Después de eso, es posible que desee jugar con la “Configuración del formulario” en el panel de la derecha.

Por defecto, WPForms no carga el título de su formulario. Por lo tanto, es posible que desee activar la opción ‘Título del formulario’ para añadir el título del formulario y dar a los visitantes más contexto. Si escribe una descripción del formulario, también puede activar la opción.

Y lo que es mejor, puede personalizar su formulario con un tema que combine con el aspecto general de su sitio web.

WPForms form settings in block editor

Cuando esté satisfecho con el aspecto del formulario, puede seguir adelante y hacer clic en “Guardar”.

Y así es como se incrusta WPForms usando un bloque WPForms.

WPForms embedded on a live website

Incrustar formularios WPForms usando un Shortcode

Otra forma de incrustar WPForms es usando un shortcode.

Para ello, tendrá que dirigirse a WPForms ” Todos los formularios para encontrar la columna ‘Shortcode’ para cada formulario.

The shortcode column in WPForms page

Desde aquí, simplemente copie el shortcode del formulario que desea incrustar. Por ejemplo, copiaremos el shortcode de nuestro formulario ‘Opinión del cliente’.

El siguiente paso es abrir la página o el post donde quieres incrustar el formulario. Para ello, ve a “Páginas” o “Entradas”. A continuación, pasa el ratón por encima de uno de ellos y haz clic en “Editar” cuando aparezca.

Esto te enviará al editor de la página o entrada.

Para incrustar el formulario, hagamos clic en el botón ‘+’ y busquemos el bloque ‘Shortcode’.

The shortcode block in block editor

Una vez añadido el bloque, puede pegar el shortcode de su formulario WPForms en el campo de texto.

Esto es lo que podría parecer:

Adding WPForms shortcode

El editor de bloques no carga el formulario en el área de edición en vivo.

Así que, primero, guarda los cambios y, a continuación, haz clic en el botón “Ver página” cuando aparezca en la esquina inferior izquierda.

WPForms embedded using shortcode on a live website

2. Cómo incrustar formularios de donación en WordPress

Añadir un formulario de donativos a su sitio web facilita que la gente apoye su causa. Los visitantes son más propensos a donar cuando ven una forma clara y sencilla de hacerlo.

La forma más sencilla de incrustar formularios de donación en WordPress es utilizar el plugin Charitable. Esta popular herramienta te permite crear y personalizar múltiples campañas de recaudación de fondos con más de 100 plantillas ya preparadas.

Charitable's homepage

Así que vamos a instalar y activar Charitable para crear tu formulario de donación. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, vamos a Charitable ” Settings para activar la licencia Pro. Simplemente pegue su clave de licencia y haga clic en “Verificar clave” para iniciar el proceso.

Adding the WP Charitable license key

Una vez hecho esto, ya está listo para crear su formulario de donación. Para obtener instrucciones detalladas, puedes leer nuestra guía sobre cómo crear un formulario de donación recurrente en WordPress.

Cuando esté satisfecho con el aspecto del formulario, puede incrustarlo en una entrada o página de WordPress.

En el constructor de campañas, simplemente haga clic en el menú desplegable “Borrador” para abrir sus opciones. A continuación, haz clic en “Publicar” y Charitable creará automáticamente una nueva página para tu campaña.

Publishing a campaign in WP Charitable

Y eso es todo: ¡ha creado y publicado con éxito su primera campaña benéfica!

Ahora, si visita su sitio web, podrá ver su formulario de donación en acción.

WP Charitable crowdfunding campaign on a live website

Dicho esto, es posible que también observe el enlace “Asistente para incrustar” en la ventana emergente o el botón “Incrustar” en el editor Caritativo.

También puede utilizar cualquiera de estas funciones para añadir su formulario de donación a otras entradas o páginas.

Para ello, basta con hacer clic en el enlace “Asistente de incrustación” o en el botón “Incrustar”, y se activará la solicitud de incrustación.

Charitable's embed wizard

En la ventana emergente que aparece, tendrá que elegir entre seleccionar una página existente o crear una nueva.

Como ya tenemos una página dedicada al formulario de donación, es una buena idea elegir “Seleccionar página existente”. Siga adelante y haga clic en el botón.

Select existing page for embedding Charitable campaign

A continuación, verás un desplegable con una lista de todas las páginas de tu sitio WordPress.

Puede desplegar el menú desplegable, elegir una página y pulsar el botón “Vamos”.

The Let's Go button

Esto le redirigirá al editor de bloques de la página.

Desde aquí, puede hacer clic en el botón “+” y buscar el bloque “Campaña benéfica”. A continuación, basta con hacer clic en el resultado de la búsqueda para añadirlo al editor de contenidos.

Charitable Campaign block

A continuación, podrás elegir un formulario de donación para incrustar en el desplegable del bloque “Campaña benéfica”.

Amplíe el menú desplegable. A continuación, simplemente haga clic en la campaña que desea añadir.

Choosing a campaign

No te preocupes si no puedes ver la vista previa en el editor de contenido. El bloque funciona perfectamente.

Hagamos clic en el botón “Guardar”, “Actualizar” o “Publicar” para activarlo.

Y ya está. Ya puedes visitar la página para ver el formulario de donación en acción:

Charitable donation form on a live website

3. Cómo incrustar formularios de HubSpot en WordPress

HubSpot es una gran plataforma para hacer crecer tu negocio, con herramientas como una plataforma de gestión de relaciones con los clientes (CRM) donde puedes gestionar la información de los clientes, un creador de sitios web y mucho más.

La buena noticia es que también tienen un creador de formularios que funciona muy bien con WordPress. Cuando alguien rellena un formulario, su información va directamente a HubSpot CRM, por lo que puedes hacer fácilmente un seguimiento con ellos a través de correos electrónicos y mensajes.

Incluso puedes conectar HubSpot con otras herramientas de formularios, incluyendo WPForms. Esto hace que la plataforma sea realmente práctica porque funciona con muchas otras herramientas que ya podrías estar utilizando.

Para este tutorial, le mostraremos cómo incrustar formularios de HubSpot utilizando el plugin HubSpot Form Builder y el complemento HubSpot de WPForms.

Cómo incrustar formularios de HubSpot utilizando el plugin de HubSpot

Para incrustar HubSpot Forms usando el plugin, primero tendrás que instalar el plugin de HubSpot. Si necesitas ayuda, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, deberás hacer clic en el menú “HubSpot” de tu escritorio de WordPress. En este panel, verás varias formas de conectar tu sitio web con HubSpot:

  • Si tienes una cuenta de HubSpot, simplemente haz clic en “Iniciar sesión”.
  • Si no lo haces, continúa con tu cuenta de Google, Microsoft o Apple.
  • Si lo desea, puede utilizar el mismo correo electrónico que utilizó para registrar su sitio web.
Signing up for HubSpot in WordPress

Una vez que hayas iniciado sesión o creado una cuenta de HubSpot, se te pedirá que la conectes a tu sitio web de WordPress.

Simplemente haz clic en el botón “Conectar sitio web” y HubSpot iniciará el proceso.

Connecting HubSpot with WordPress website

Una vez conectado, estás listo para crear tu formulario de HubSpot utilizando el plugin de HubSpot.

Ve a HubSpot ” Formularios. A continuación, haz clic en el botón “Crear formulario”.

Creating HubSpot forms

Desde aquí, puedes elegir un tipo de formulario y una plantilla. A continuación, se te redirigirá a una nueva pestaña en la que podrás utilizar el creador de formularios para personalizar tu formulario de HubSpot.

Para obtener instrucciones detalladas, puedes ver el primer método en nuestra guía sobre cómo crear un formulario de HubSpot en WordPress.

Cuando estés satisfecho con el aspecto de tu formulario, el siguiente paso es incrustarlo en tu sitio. Naturalmente, querrás usar el botón ‘Incrustar’ dentro del constructor de formularios.

Embed button in HubSpot's form builder

Sin embargo, este método es un poco confuso.

Sólo te permite compartir el enlace del formulario y utilizar un fragmento HTML en tu entrada o página de WordPress.

Embed methods in HubSpot form builder

En su lugar, puedes hacer clic en el botón “Volver a WordPress” e incrustar tus formularios desde el panel de HubSpot en tu área de administración.

Haz clic en el botón de la esquina superior izquierda.

Back to WordPress button in HubSpot form builder

A partir de aquí, sólo tendrás que pasar el ratón por encima del formulario que quieras incrustar.

A continuación, haz clic en el botón “Incrustar” cuando aparezca.

HubSpot embed button in the WP admin area

A continuación, verás una ventana emergente donde HubSpot comparte varias formas de incrustar tu formulario.

Aquí, puedes elegir incrustar tu formulario de HubSpot en un post o página usando el bloque de HubSpot. Y si cambias a la otra pestaña, encontrarás el shortcode del formulario.

Para este tutorial, haremos clic en el botón ‘WordPress Post’.

HubSpot's Your Form Is Ready popup window

Se abrirá la página “Entradas” en una nueva pestaña. Abre una entrada en la que quieras incrustar el formulario pasando el ratón sobre ella y haciendo clic en “Editar” cuando aparezca.

A continuación, podrás añadir el bloque HubSpot Form a la página a través del editor de contenido.

Desde aquí, puedes hacer clic en el botón ‘+’ y utilizar la barra de búsqueda para buscar el bloque Formulario de HubSpot. Dale un clic cuando lo veas.

Adding a HubSpot form block to a post

Esto añadirá el bloque HubSpot Form al área de contenido.

A continuación, vamos a hacer clic en el menú desplegable para abrir las opciones disponibles. A continuación, puedes elegir el formulario de HubSpot que deseas incrustar.

HubSpot form embedded

Y ya está. Ahora puede hacer clic en el botón “Guardar” para almacenar los cambios.

Este es el aspecto que tiene en nuestro sitio de demostración:

HubSpot form on a live website

Integrar formularios de HubSpot usando el complemento HubSpot de WPForms

Usar WPForms para crear un formulario de HubSpot es una manera más fácil y eficiente de gestionar formularios y contactos sin la molestia de hacer malabares con múltiples plugins.

WPForms maneja tanto la creación de formularios como la integración con HubSpot en un solo lugar. Esto simplifica el proceso, ya que le da acceso al constructor de arrastrar y soltar y plantillas de WPForms mientras sincroniza los datos de su formulario con HubSpot automáticamente.

Nota: Para utilizar el complemento HubSpot en WPForms, necesitará el plan Elite. Además del addon HubSpot y todo lo que incluye el plan Pro, puedes utilizar el plugin para un número ilimitado de sitios WordPress y desbloquear el soporte premium. Esto lo hace perfecto si diriges una agencia de marketing.

Lo primero que debe hacer es instalar y activar el plugin WPForms. Consulte nuestra guía detallada sobre cómo instalar un plugin de WordPress.

Luego de la activación, deberá verificar su clave de licencia en WPForms ” Configuración.

Puede encontrar su clave de licencia en su cuenta WPForms. Simplemente haga clic en el icono del portapapeles para copiarla. A continuación, puede volver a su pestaña de WordPress y rellenar el campo ‘Clave de licencia’.

Haz clic en el botón “Verificar clave” para activar tu plan.

Activating license key to WPForms

Ahora, vamos a WPForms ” Addons desde el panel de control de administración para instalar el HubSpot Addon.

Desde aquí, desplázate hacia abajo y localiza el complemento de HubSpot. A continuación, haz clic en el botón “Instalar complemento”.

Installing the HubSpot Addon in WPForms

Después de activar el addon, debe ir al panel de ‘Ajustes’ de WPForms desde el escritorio de WordPress y luego cambiar a la pestaña ‘Integración’.

Aquí, usted puede conectar su cuenta de HubSpot CRM a WPForms. Simplemente haga clic en ‘+ Añadir nueva cuenta’ e introduzca los detalles de su cuenta.

Adding HubSpott account to WPForms

Una vez hecho esto, es hora de crear e incrustar un formulario de HubSpot desde WPForms.

Primero, necesitará crear su formulario navegando a WPForms ” Agregar Nuevo. En la siguiente pantalla, le darás un nombre al formulario y seleccionarás una plantilla de formulario.

Después, puede personalizar la plantilla utilizando el creador de formularios.

Si todo se ve bien ya, no dude en cambiar al panel de ‘Marketing’. Desde aquí, vamos a abrir la opción ‘HubSpot’ para conectar el formulario con la plataforma.

Adding new HubSpot connection in WPForms

Introduce los datos de tu cuenta de HubSpot y sigue las instrucciones de configuración.

Una vez hecho esto, puedes publicar el formulario utilizando el bloque WPForms o el shortcode del formulario. Para más detalles, puedes consultar nuestra guía sobre cómo crear un formulario de HubSpot en Wordpress.

4. Cómo incrustar formularios de Google en WordPress

WPForms y otros creadores de formularios de WordPress son realmente fáciles de usar. Funcionan directamente en tu sitio de WordPress y te permiten hacer muchas cosas, como crear formularios que acepten pagos, crear formularios de inicio de sesión, crear formularios de registro de usuario personalizados y mucho más.

Pero a veces, puede que necesite compartir un formulario en diferentes sitios web o plataformas.

En esos casos, los formularios de Google pueden ser muy útiles. Son fáciles de compartir, funcionan muy bien en teléfonos móviles y mantienen todas las respuestas en un mismo lugar. Además, puedes añadir colaboradores que te ayuden con las respuestas, todo ello almacenado en Google Drive.

Para incrustar un formulario de Google en WordPress, puedes empezar por crear un formulario en el sitio web de Google Forms. Solo tienes que hacer clic en el botón “Ir a formularios”.

The Go to Forms button in Google Forms

En la siguiente pantalla, verás varias plantillas de formularios. Adelante, haz clic en una de ellas para empezar a construir.

También puede empezar desde cero haciendo clic en “Formulario en blanco”.

Google Forms' templates

Una vez elegida la plantilla, puede empezar a personalizar el formulario. Aquí tienes varias cosas que puede que necesites hacer:

  • Cree el título del formulario.
  • Proporcione la descripción del formulario.
  • Personalice los campos para adaptarlos a sus objetivos.
Adding fields to Google Forms

También puede utilizar herramientas de IA para elegir los campos más adecuados para sus preguntas.

Cuando estés satisfecho con el aspecto del formulario, haz clic en el botón “Enviar”. Se abrirá una ventana emergente en la que podrás obtener el código de incrustación del formulario.

Copying Google Forms' embed code

Después de copiar este código, puede abrir una página o entrada en WordPress en la que desee mostrar el formulario.

En el editor de contenido de la página o entrada, haz clic en el botón “+” y busca el bloque “HTML personalizado”. Haz clic en él para añadirlo a tu página.

Adding custom HTML block in WordPress

A continuación, sólo tienes que pegar el código de incrustación de los formularios de Google en el bloque HTML personalizado.

Una vez hecho esto, no olvides hacer clic en el botón “Actualizar” o “Publicar”. Ahora, si visitas tu sitio web, deberías ver el formulario de Google en acción.

Google Form preview on a live WordPress site

Para obtener instrucciones paso a paso más detalladas, puedes consultar nuestra guía sobre cómo incrustar un formulario de Google en WordPress.

5. Cómo incrustar Zoho Forms en WordPress

Zoho For ms es una gran herramienta que te permite crear fácilmente todo tipo de formularios. Tanto si necesitas un formulario de contacto, una encuesta, un formulario de registro o un formulario de pedido, Zoho Forms te lo ofrece.

Lo que es más, incrustar un Formulario Zoho en tu sitio WordPress es fácil. Pero antes de llegar a esta parte, primero vamos a crear el formulario.

Para empezar, tendrá que crear una cuenta en el sitio web de Zoho Forms. Simplemente haga clic en “Registrarse gratis”.

Zoho Forms' homepage

Una vez que hayas creado una cuenta, puedes empezar a crear tu formulario.

En primer lugar, tendrás que hacer clic en el botón “Nuevo formulario” del generador de formularios.

The New Form button in Zoho Forms

A continuación verá que Zoho Forms ofrece 3 formas de crear formularios:

  • Cree formularios desde cero utilizando el tipo de formulario estándar o de tarjeta.
  • Utilice plantillas de formularios ya preparadas.
  • Hacer formularios CRM, que es una característica que sólo está disponible si se actualiza al plan Pro.
Three ways to create Zoho Forms

Para esta guía, elegiremos la plantilla “Comentarios sobre el sitio web”.

Hagamos clic en el botón “Utilizar esta plantilla”.

Zoho Forms' Use this template button

Una vez hecho esto, aterrizarás en el constructor de formularios de Zoho Forms.

El panel de la izquierda tiene todas las opciones de personalización, y la vista previa del formulario está a la derecha. Puedes añadir elementos a tu formulario simplemente arrastrándolos y soltándolos.

Con Zoho Forms, también puede cambiar el tema del formulario para que coincida con el tema de su sitio web.

Para ello, ve a la pestaña “Temas”. A continuación, pasa el ratón por encima del tema que quieras utilizar y haz clic en “Aplicar”.

Applying Zoho Forms theme

Si todo va bien, puedes pasar a la pestaña “Compartir”.

En esta pestaña, puedes ver que Zoho Forms tiene muchas opciones para incrustar formularios.

Puesto que vamos a incrustarlo en un sitio de WordPress, dirijámonos a Incrustar ” Creadores de sitios web. A continuación, haz clic en el botón “Ir a WordPress”.

The Go to WordPress button in Zoho Forms

A continuación, se le redirigirá a la página de Zoho Forms en el directorio de plugins de WordPress.

Todo lo que tienes que hacer es instalar el plugin. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes abrir un post o página donde quieras incrustar Zoho Forms. Desde aquí, haz clic en el botón “+” y selecciona el bloque Zoho Forms.

Adding the Zoho Forms block to WP content editor

Una vez añadido el bloque, puede hacer clic en el botón “Acceder a Zoho Forms”.

También está el enlace “Incrustar con permalink”, pero no recomendamos este método porque no es tan fácil para los principiantes.

The Access Zoho Forms button in Zoho Forms block

A continuación, se le pedirá que elija el dominio en el que registró su cuenta Zoho.

En este caso, elegiremos"zoho.com” en el menú desplegable y haremos clic en “Conectar”.

Connecting Zoho account

A continuación, puede elegir el formulario que desea incrustar.

Sólo tienes que hacer clic en el menú desplegable y seleccionar una de las opciones disponibles. A continuación, desplázate hacia abajo y haz clic en el botón “Incrustar”.

Embedding the Website Feedback form

Su editor de contenidos cargará entonces su formulario Zoho.

Si te gusta lo que ves, haz clic en el botón “Guardar”.

Saving the post with Zoho Forms

Ahora, si visitas la página, verás tu formulario Zoho en acción.

Esto es lo que podría parecer:

Zoho Forms on a live website

En la imagen de arriba, también puedes ver que el tema Zoho Forms hace que sea más fácil combinar el formulario con el diseño de tu sitio web.

6. Cómo incrustar formularios de suscripción por correo electrónico en WordPress

OptinMonster, aunque no es el típico creador de formularios, es una gran herramienta para crear formularios de registro de usuarios y construir una lista de correo electrónico.

En WPBeginner, hemos visto excelentes resultados utilizando esta herramienta de generación de leads. Por ejemplo, con OptinMonster, aumentamos nuestros suscriptores de correo electrónico en un 600%.

Al configurar formularios de registro por correo electrónico, puede utilizar varios tipos de campaña, como los slide-ins y los lightbox pop-ups. Así que, antes de hablar de incrustar el formulario de suscripción por correo electrónico de OptinMonster, vamos a asegurarnos de que ese formulario está listo.

En primer lugar, deberá crear una cuenta de OptinMonster en su sitio web haciendo clic en el botón “Obtener OptinMonster ahora”.

OptinMonster's homepage

Accederá a la página de precios.

Recomendamos el plan Pro porque es popular e incluye la función ‘Exit Intent’. También puede utilizar nuestro exclusivo WPBeginner OptinMonster código de cupón para obtener 10% de descuento.

Para finalizar su compra, sólo tiene que introducir sus datos de pago y proceder al pago.

Una vez hecho esto, vamos a instalar y activar el plugin de WordPress OptinMonster. Si necesitas ayuda, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Este plugin conectará su sitio WordPress a OptinMonster. Simplemente vaya a OptinMonster ” Configuración desde su panel de administración de WordPress. A continuación, haga clic en “Conectar su cuenta existente”.

Connect your existing account

Una vez conectado, estarás listo para crear tu formulario de suscripción por correo electrónico de OptinMonster. Para obtener instrucciones detalladas, puedes leer nuestra guía sobre cómo crear tu lista de correo electrónico en WordPress con OptinMonster.

Las detalladas reglas de visualización de OptinMonster le permiten mostrar la campaña adecuada a la persona adecuada en el momento adecuado, lo que ayuda a aumentar las tasas de conversión. Puede encontrar estos ajustes en la sección Reglas de visualización del constructor de campañas.

The Display Rules tab in OptinMonster

Aquí puede controlar cuándo y dónde aparecen sus campañas en función del comportamiento de los clientes.

También puede personalizar las campañas para diferentes públicos, como mostrar diferentes diseños para usuarios de móviles y de ordenadores de sobremesa.

Adding display rules to a marketing or advertising campaign

OptinMonster le permite establecer reglas basadas en días o lugares específicos, para que pueda realizar campañas específicas como ofertas de Black Friday o ventanas emergentes con temas navideños para diferentes países.

Además, la tecnología exit-intent de OptinMonster ayuda a recuperar a los visitantes que están a punto de abandonar su sitio. Esta función rastrea el comportamiento de los usuarios y activa un mensaje dirigido justo antes de que salgan, lo que le permite captar más suscriptores de correo electrónico y aumentar las conversiones.

Exit intent display rules

Cuando esté satisfecho con todo, es el momento de integrar el formulario de generación de clientes potenciales en su sitio web.

Basta con hacer clic en el botón “Guardar” del constructor para iniciar el proceso.

OptinMonster's Save button

Tras asegurarte de que has guardado los cambios, puedes pasar a la pestaña “Publicar”.

A continuación, cambie el estado de “Borrador” a “Publicar”. Verá que la pestaña “Publicar” ha cambiado a “Publicado” y que el icono de pausa ha cambiado a una marca de verificación.

Publishing OptinMonster popup

Ahora puede cerrar el editor de campañas y navegar a OptinMonster ” Campañas.

El siguiente paso es cambiar el estado “Pendiente” a “Publicar” de la ventana emergente de registro de correo electrónico. Simplemente haga clic en el enlace “Pendiente” para abrir el menú desplegable y seleccione la opción “Publicar”.

Changing OptinMonster campaign's status

¡Ya está!

Ahora, si visita su sitio web, verá la ventana emergente de suscripción por correo electrónico en acción.

OptinMonsters' email sign up on a live website

7. Cómo incrustar formularios de pago en WordPress

Si sólo quieres vender un único producto o no quieres configurar un carrito de la compra completo, entonces utilizar plugins de comercio electrónico completos como Easy Digital Downloads o WooCommerce puede ser excesivo. Crear un formulario de pago sencillo suele ser una mejor opción para aceptar importes personalizados o vender unos pocos artículos.

Aquí es donde WP Simple Pay puede ayudar.

WP Simple Pay

WP Simple Pay es la mejor opción para aceptar pagos de Stripe sin necesidad de un plugin completo de comercio electrónico.

También te permite aceptar otros métodos de pago, como pagos con tarjeta de crédito, Apple Pay, Google Pay y mucho más. Es ideal para organizaciones sin ánimo de lucro, pequeñas empresas y voluntarios que necesitan una solución sencilla para recaudar pagos.

Para incrustar un formulario de pago, primero tendrás que instalar el plugin WP Simple Pay. Si necesitas ayuda, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, sólo tiene que seguir el asistente de configuración para conectarse a Stripe.

Connecting your WordPress website to Stripe

Una vez conectado, estás listo para crear tu formulario de pago usando WP Simple Pay.

Para obtener instrucciones detalladas, puede seguir el primer método de nuestra guía sobre cómo crear un formulario de WordPress con opciones de pago.

Cuando estés satisfecho con tu formulario de pago, haz clic en el botón “Publicar”. A continuación, puedes copiar el shortcode del formulario para incrustarlo en tu post o página.

WP Simple Pay's shortcode

En el editor de contenidos de WordPress, basta con hacer clic en el botón “+” y seleccionar el bloque “Shortcode”.

A continuación, puedes pegar el shortcode del formulario en el área de texto.

Adding a shortcode block in Gutenberg

Tenga en cuenta que WP Simple Pay crea su formulario de pago en modo de prueba por defecto. Esto significa que aún no puedes aceptar pagos de los visitantes.

Para solucionarlo, navegue hasta WP Simple Pay ” Formularios de pago en el escritorio de WordPress. A continuación, pasa el ratón por encima del formulario que acabas de crear y haz clic en “Editar” cuando aparezca.

Editing WP Simple Pay form

En este panel, deberás ir a la sección “Pagos”.

Por último, haz clic en el botón de opción “Modo directo” y luego en “Actualizar”.

Setting WP Simple Pay form to live mode

Y así es como puedes incrustar un formulario de WP Simple Pay y empezar a aceptar pagos de tu audiencia.

Este es el aspecto que tiene en nuestro sitio de demostración:

Buy Me a Coffee WP Simple Pay button on a live website

8. Cómo incrustar formularios Formidable en WordPress

Formidable Forms es una gran herramienta para crear formularios avanzados, como una calculadora de hipotecas, pagos de coches o seguros de vida. Ofrece más de 225 plantillas de formularios que puedes utilizar en tu sitio web WordPress.

Para más detalles sobre cómo hacer un formulario con Formidable Forms, puede ver nuestra reseña completa de Formidable Forms.

Formidable Forms hace que sea super fácil poner tus formularios en cualquier post o página. Una vez que hayas terminado de crear tu formulario, puedes hacer clic en el botón ‘Incrustar’ en el constructor de formularios.

Formidable Forms' Embed button

Esto abrirá una ventana emergente donde puede seleccionar dónde añadir el formulario. Hay 3 opciones: ‘Seleccionar página existente’, ‘Crear nueva página’ e ‘Insertar manualmente’.

Si selecciona la opción “Insertar manualmente”, tendrá que manejar un poco de código. Esto puede ser un poco intimidante para los principiantes, por lo que no lo recomendamos.

Para este tutorial, elegiremos ‘Seleccionar página existente’.

Formidable Forms' Embed form options

A continuación, aparecerá otra ventana emergente.

Aquí, querrás abrir el menú desplegable y elegir una página. Por ejemplo, hemos elegido incrustar el formulario en la página de inicio de nuestro sitio de demostración.

Choosing a page to embed Formidable Forms

Después de elegir la página, haz clic en el botón “Insertar formulario”.

Esto abrirá el editor de bloques de la página, y debería ver que el formulario ya está incrustado en la página.

Formidable Forms embedded in the block editor

Ahora ya puede actualizar la página.

Pulsa el botón “Guardar”.

Este es el aspecto que tiene en nuestro sitio de demostración:

Formidable Forms on a live website

9. Cómo incrustar Gravity Forms en WordPress

Gravity Forms es un potente plugin constructor de formularios para WordPress, pero aquí está el truco – es sólo premium.

Este creador de formularios tiene una amplia gama de funciones y opciones de personalización. Permite crear muchos tipos de formularios, como encuestas, cuestionarios, registros y formularios de pedido.

Para crear un formulario con Gravity Forms, deberá adquirir el plugin en el sitio web de Gravity Forms.

Gravity Forms homepage

A continuación, puede instalarlo y activarlo en su sitio. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, deberá ir a Gravity Forms ” Nuevo formulario en el escritorio de WordPress y hacer clic en “Añadir nuevo”.

Creating a new form with Gravity Forms

En la siguiente pantalla, elegirás una plantilla de formulario.

No hay prisa: puedes explorar esta ventana emergente para encontrar la plantilla que deseas utilizar. Una vez encontrada, simplemente pasa el ratón por encima de la plantilla y haz clic en el botón “Usar plantilla”.

The Use Template button in Gravity Forms

A continuación, se le pedirá que asigne un nombre a su formulario y que escriba una breve descripción del mismo.

Puede utilizar la siguiente imagen como ejemplo:

Form name and description examples

Haga clic de nuevo en “Usar plantilla” para empezar a crear el formulario.

Esto abrirá el constructor de arrastrar y soltar de Gravity Forms, donde puedes personalizar tu formulario usando los campos de la derecha.

Gravity Forms' form builder

Una vez que el formulario esté listo, puedes hacer clic en el botón “Guardar formulario” para asegurarte de que has guardado todos los cambios.

A continuación, haz clic en “Incrustar”.

Esto abrirá 3 opciones para incrustar su formulario Gravity Forms – en una página existente, una nueva página, o un método de código corto para las personas que utilizan el editor clásico.

Embedding Gravity Forms

Para este tutorial, le mostraremos cómo incrustar Gravity Forms en una página web existente.

Desde aquí, vamos a seleccionar el botón de radio ‘Post’. A continuación, puede abrir el menú desplegable para elegir un post publicado en su sitio web WordPress.

Embedding Gravity Forms into an existing post

Haga clic en el botón “Insertar formulario”.

A continuación, se le redirigirá al editor de contenido de la página, donde se le pedirá que añada el bloque “Formulario”. Haz clic en él.

The Gravity Forms block to add to content editor

Gravity Forms añadirá el formulario que acaba de crear a la entrada.

También puede observar que incluye el “Título del formulario” y la “Descripción del formulario” por defecto.

Gravity Forms includes title and descriptions by default

Si crees que todo está listo, es hora de pulsar el botón “Guardar”.

Y eso es todo – usted ha creado e incrustado un formulario Gravity Forms a su sitio web.

Gravity Forms on a live website

10. Cómo incrustar formularios de Microsoft en WordPress

Puede que algunas personas quieran usar Microsoft Forms para crear formularios porque es una herramienta con la que ya están familiarizados gracias a su cuenta de Office 365. Además, se integra automáticamente con otros productos de Microsoft como Excel, lo que facilita la recopilación y gestión de datos.

Microsoft Forms ofrece opciones integradas para crear encuestas, cuestionarios y sondeos. A continuación, puedes incrustar fácilmente formularios de Microsoft 365 en WordPress copiando el código de incrustación del formulario y añadiéndolo a tu sitio de WordPress.

En primer lugar, crearás tu formulario utilizando Microsoft Forms en tu cuenta de Office 365.

En la página principal de Office 365, haga clic en “Iniciar sesión” para empezar.

Signing in to Ms 365

Una vez iniciada la sesión, puede hacer clic en el icono de menú situado en la esquina superior izquierda de la página.

A continuación, localice “Formularios” y haga clic en él.

Ms Forms

Esto abrirá la galería de plantillas en una nueva pestaña. A continuación, puede elegir los formularios que desea construir.

Microsoft Forms tiene 4 formularios para elegir – encuesta, cuestionario, invitación y registro. Para este tutorial, elegiremos la opción ‘Invitación’. Hagamos clic en ella.

Choosing form type

El editor de Microsoft Forms se abrirá en una nueva pestaña. A partir de aquí, lo primero que hay que hacer es elegir una plantilla.

Puede explorar las opciones de plantilla en el panel de la izquierda. Como vamos a crear un formulario de invitación, disponemos de 7 plantillas ya preparadas para diversos fines.

Para este tutorial, utilizaremos la plantilla de invitación de boda. Este es el aspecto de la plantilla predeterminada en el editor:

Wedding invitation form

Si se desplaza por el panel de la derecha, encontrará los campos predeterminados que ofrece esta plantilla.

Esta plantilla tiene 4 campos preestablecidos para los nombres de los usuarios, el número de invitados que asistirán, las alergias alimentarias y las direcciones de correo electrónico.

Supongamos que desea añadir más preguntas. En ese caso, puede hacer clic en el botón “+ Insertar nueva pregunta” y elegir el tipo de pregunta, como “Fecha”, “Valoración”, “Texto” u otros.

Si desea editar las existentes, sólo tiene que hacer clic en una de ellas y aparecerán las opciones de personalización.

Editing a field

Para cambiar el aspecto, puedes hacer clic en el icono de la paleta.

Desde aquí, puede cambiar el diseño del formulario y la imagen de fondo.

Styling wedding invitation form

A continuación, puede cambiar a la pestaña de configuración haciendo clic en el icono de engranaje.

Microsoft Forms ya ha configurado algunos ajustes básicos.

Sin embargo, tal vez quieras activar “Fecha de finalización” para planificar estratégicamente el día de tu boda en función de las respuestas y “Recibir notificación por correo electrónico de cada respuesta” para tener una copia de seguridad de los datos y evitar que la respuesta se pierda.

Si lo desea, también puede editar el mensaje de confirmación preestablecido.

Configuring wedding invitation form

Una vez que el formulario está listo, es hora de lanzarlo.

En el generador de formularios, hagamos clic en el botón “Recopilar respuestas”.

Collect responses button

En la ventana emergente que aparece, puede hacer clic en el icono </> o incrustar.

Ahora deberías ver el shortcode que has añadido a tu sitio. Siga adelante y haga clic en ‘Copiar’.

Copying MS Forms shortcode

Ahora, puedes pegar este código en una entrada o página utilizando el bloque “HTML personalizado”.

En el editor de contenidos de WordPress, basta con hacer clic en el botón “+” para añadir el bloque. A continuación, puedes utilizar la barra de búsqueda para buscar el bloque ‘HTML personalizado’.

Haz clic en él para añadir el bloque al editor de contenido.

Adding custom HTML block

A partir de aquí, sigue adelante y pega el shortcode de Microsoft Forms en el área de texto.

No te preocupes si no ves una vista previa en tu editor; el shortcode funciona perfectamente.

Embedding Ms Forms shortcode

Ahora puedes pulsar el botón “Publicar” o “Actualizar” para activarlo.

Este es el aspecto que tiene en nuestro sitio de demostración:

Microsoft Forms on a live website

11. Cómo incrustar formularios HTML en WordPress

Los formularios HTML suelen estar codificados a mano, por lo que no se dispone de un editor de arrastrar y soltar para editar el formulario.

Afortunadamente, existen plugins de formularios que hacen que la configuración de formularios HTML sea más infalible. Una de las mejores opciones es el plugin HTML Forms. Este plugin es ideal para configurar formularios de contacto sencillos que te ayuden a recopilar información de los visitantes.

The form code editor in HTML Forms

Lo mejor es que no hace falta saber programar para utilizar los formularios HTML.

Añadir un nuevo campo es fácil. Solo tienes que elegir una de las opciones disponibles y Formularios HTML te pedirá que ajustes los datos del campo.

Adding a dropdown field in HTML Forms

Tras pulsar el botón “Añadir campo al formulario”, HTML Forms convertirá los datos en un fragmento HTML y lo colocará en el área “Código del formulario”.

Y eso es todo. No olvides hacer clic en el botón “Guardar cambios” para guardar tus progresos.

Ahora, es el momento de publicar el formulario.

Los formularios HTML te permiten incrustar fácilmente tu formulario en cualquier entrada, página o área de widgets. Para ello, necesitarás el shortcode del formulario. Puedes encontrar el código corto de tu formulario en la parte superior del panel “Editar formulario”.

HTML Forms' shortcode

Copiemos este shortcode en el portapapeles.

A continuación, puede abrir una página o post que desea mostrar el formulario HTML. Para este tutorial, añadiremos el formulario a nuestra página ‘Contacto’.

Cuando estés en el editor de bloques, haz clic en el botón “+” y busca “HTML personalizado”; haz clic en él para añadirlo a tu página.

The custom HTML block

A continuación, puede pegar el código abreviado en el bloque “HTML personalizado”.

El editor de bloques de WordPress no te mostrará el formulario. Pero no te preocupes. Aparecerá en la página cuando la guardes.

Adding HTML Forms shortcode

Así que vamos a pulsar el botón “Guardar” para verlo en acción.

Este es el aspecto que podría tener en su sitio web:

HTML Forms on a live website

Para obtener instrucciones detalladas, puede consultar nuestra guía sobre cómo añadir formularios HTML a WordPress.

Preguntas frecuentes sobre la incrustación de formularios en WordPress

¿Tienes preguntas sobre cómo incrustar formularios en WordPress? Aquí tienes algunas respuestas rápidas que te ayudarán a empezar.

¿Se pueden incrustar formularios en WordPress?

Sí, puede incrustar fácilmente formularios en WordPress utilizando varios plugins, incluido WPForms, que es el mejor creador de formularios multiuso.

¿Cómo instalo un formulario en WordPress?

En primer lugar, dirígete a Plugins Añadir nuevo desde el administrador de WordPress. El siguiente paso es encontrar un plugin de formulario de su elección y luego simplemente instalarlo y activarlo. Una vez hecho esto, usarás el plugin para crear un formulario e incrustarlo en tu sitio usando un shortcode o bloque.

¿Cómo configurar WPForms en WordPress?

Para configurar WPForms, primero tendrás que instalar y activar el plugin WPForms. A continuación, puede crear un nuevo formulario utilizando el constructor de arrastrar y soltar e incrustar el formulario en su sitio web utilizando un código corto o el bloque del plugin.

¿Cómo crear un formulario en WordPress sin un plugin?

Crear un formulario en WordPress sin un plugin requiere HTML y PHP personalizados. Puedes añadir manualmente el HTML del formulario a tu página y gestionar los envíos con PHP personalizado en el archivo functions.php de tu tema. Dado que esto no es fácil para los principiantes, te recomendamos que utilices un creador de formularios.

Esperamos que este artículo te haya ayudado a aprender cómo incrustar formularios en WordPress. A continuación, puede que desee consultar nuestras otras guías sobre cómo configurar el seguimiento de formularios de WordPress en Google Analytics y cómo realizar un seguimiento y reducir el abandono de formularios.

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

1 comentarioDeja una respuesta

  1. Syed Balkhi

    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!

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.