Cómo Crear Formularios AMP en WordPress (La Forma Fácil)

Hemos escuchado a muchos propietarios de sitios de WordPress que comparten la misma frustración. Sus formularios se ven bien, pero en las páginas AMP, o cargan muy lentamente o simplemente no funcionan en absoluto.

Un propietario de una pequeña empresa incluso nos contó cómo los clientes seguían abandonando su formulario de pedido porque tardaba una eternidad en cargarse en dispositivos móviles.

Si has decidido usar AMP para acelerar tu sitio, necesitas una solución para tus formularios. Encontramos un enfoque sencillo que cualquiera puede usar para crear formularios compatibles con AMP sin dolores de cabeza ni codificación.

Después de probar muchos complementos y métodos, descubrimos una forma confiable de crear formularios rápidos y amigables para dispositivos móviles que realmente funcionan.

En esta guía, te mostraremos la forma más fácil de crear formularios AMP para tu sitio de WordPress, paso a paso. Ya sea que desees un formulario de contacto, una encuesta o un formulario de pedido que se cargue instantáneamente en dispositivos móviles.

¿Por qué crear un formulario AMP en WordPress?

Accelerated Mobile Pages, o AMP, es un proyecto de Google que hace que los sitios web carguen más rápido en dispositivos móviles.

Si bien AMP ofrece una excelente experiencia de navegación móvil al hacer que tus páginas web carguen más rápido, deshabilita muchas funciones útiles en tu sitio web de WordPress.

Una de ellas son los formularios de contacto. Dado que AMP utiliza un conjunto limitado de HTML y JavaScript, tus formularios de WordPress no pueden cargarse correctamente en las páginas AMP.

Alternativamente, podrías usar uno de los muchos temas responsivos de WordPress que ofrecen un excelente rendimiento en escritorio y móvil. De esta manera, no tienes que comprometer el estilo de tu sitio web para ofrecer una experiencia superior en móvil.

Sin embargo, si estás usando AMP en tu sitio de WordPress, entonces puedes usar un plugin para mostrar formularios. Aquí tienes un resumen rápido de todos los temas que cubriremos en esta guía:

¡Vamos a empezar!

Agregar formularios AMP en WordPress (Paso a Paso)

La mejor manera de crear un formulario AMP es usando WPForms. Es el plugin de formularios de contacto de WordPress más fácil para principiantes que te ayuda a crear formularios de WordPress listos para AMP. Su equipo ha trabajado con Google para facilitar los formularios AMP para WordPress.

Paso 1: Instala y activa el plugin WPForms

Tanto la versión Lite como la Pro de WPForms te permiten crear un formulario de contacto básico listo para AMP. Pero para este tutorial, usaremos la versión WPForms Pro porque ofrece más funciones, herramientas de IA, plantillas de formularios, complementos y opciones de personalización.

Para empezar, puedes visitar el sitio web de WPForms y crear una cuenta. Luego, haz clic en el botón 'Obtener WPForms ahora', selecciona un plan y completa el proceso de registro.

Una vez que te hayas registrado, serás dirigido al panel de tu cuenta de WPForms. Desde allí, puedes descargar el archivo del plugin y copiar tu clave de licencia; necesitarás ambas en los siguientes pasos.

Ahora es el momento de agregar WPForms a tu sitio. Desde tu área de administración de WordPress, ve a Plugins » Agregar nuevo plugin.

En la siguiente pantalla, busca “WPForms”.

Cuando veas WPForms en los resultados, haz clic en ‘Instalar ahora’ y luego en ‘Activar’.

Si necesitas ayuda adicional con este paso, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a WPForms » Configuración en tu panel.

Pega tu clave de licencia en el campo ‘Clave de licencia’ y haz clic en ‘Verificar clave’ para conectar tu cuenta.

Una vez hecho esto, WPForms está instalado, activado y listo para usar en tu sitio.

Paso 2: Agrega AMP a tu sitio de WordPress

Antes de crear un formulario, es importante que tengas AMP configurado en tu sitio de WordPress.

Para usar AMP con WordPress, necesitas instalar y activar el plugin oficial de AMP para WordPress desde tu panel de ‘Plugins’ dentro del área de administración.

Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, el plugin agregará automáticamente soporte de Google AMP para tu sitio de WordPress.

Sin embargo, puedes cambiar la configuración de AMP para tu sitio web yendo a AMP » Configuración desde tu panel.

Si eres principiante, te recomendamos elegir el Modo Lector (a veces llamado Clásico). Esto asegura que tu sitio principal de escritorio permanezca exactamente igual, mientras que los visitantes móviles obtienen la versión AMP súper rápida.

Para más detalles, consulta nuestra guía sobre cómo configurar correctamente Google AMP en tu sitio de WordPress.

Una vez que hayas configurado AMP, el siguiente paso es crear un formulario de contacto compatible con AMP en tu sitio de WordPress.

Paso 3: Crea un nuevo formulario AMP en WPForms

Simplemente dirígete a la página WPForms » Agregar nuevo para crear un nuevo formulario de WordPress.

WPForms es compatible con AMP por defecto, por lo que no necesitarás activar ninguna configuración especial.

En la pantalla de configuración del formulario, puedes empezar por nombrar tu formulario.

Luego, elegirás cómo construirás el formulario.

Puedes seleccionar Formulario en blanco si quieres empezar desde cero. Si prefieres la opción más fácil y rápida, entonces puedes usar el constructor de formularios con IA. Esto te permitirá crear tu formulario con solo una indicación simple.

O, usa una plantilla preconstruida que puedes editar rápidamente según tus necesidades. ¡WPForms Pro viene con más de 2,000 plantillas prehechas entre las que puedes elegir!

Para este tutorial, elegiremos la plantilla de 'Formulario de contacto simple'.

A continuación, verás la página del constructor de formularios, donde hay diferentes opciones para personalizar tu plantilla.

Desde aquí, puedes agregar o eliminar campos del formulario. Para agregar un nuevo campo a tu formulario, simplemente haz clic en un campo del formulario del panel izquierdo y arrástralo a la plantilla del formulario.

Después de eso, puedes configurar las opciones de los campos.

Simplemente haz clic en un campo y luego aparecerán las ‘Opciones de campo’ a la izquierda.

Por ejemplo, puedes editar la etiqueta y el formato de un campo, hacerlo un campo obligatorio, configurar lógica condicional y más. De manera similar, puedes personalizar todos los demás campos.

También puedes agregar más campos a tus formularios. WPForms viene con campos básicos como desplegables y deslizadores, así como otros más avanzados como selectores de fecha y saltos de página.

Simplemente arrastra y suelta los tipos de campo del panel izquierdo al derecho, o reorganízalos dentro de la vista previa del formulario arrastrándolos hacia arriba o hacia abajo.

Después de eso, puedes hacer clic en la pestaña ‘Configuración’ para configurar los ajustes de tu formulario.

La configuración ‘General’ te permite cambiar el nombre de tu formulario, el texto del botón de envío, el texto de procesamiento del botón de envío y más.

A continuación, puedes hacer clic en la pestaña ‘Notificaciones’ para configurar notificaciones por correo electrónico para que te avisen cuando un usuario complete el formulario.

A continuación, puedes hacer clic en la pestaña ‘Confirmación’ para configurar un mensaje de confirmación que se mostrará cuando un usuario envíe el formulario.

WPForms te permite mostrar un mensaje, mostrar una página o redirigir a los usuarios a una URL al enviar el formulario.

Después de completar la configuración, puedes guardar tu formulario.

Paso 4: Agrega tu formulario AMP a una página

Ahora que tu formulario está listo, puedes agregarlo a tu sitio de WordPress.

En el constructor de formularios de WPForms, verás un botón de 'Incrustar' en la parte superior. Simplemente haz clic en él para agregar tu formulario a una página nueva o existente.

A continuación, se abrirá una ventana emergente que te pedirá que crees una página nueva o elijas una existente.

Seleccionaremos la opción 'Crear página nueva' para este tutorial.

A continuación, deberás ingresar un nombre para la página de tu nuevo formulario.

Una vez hecho esto, simplemente haz clic en el botón '¡Vamos!'.

Desde aquí, verás una vista previa de tu formulario AMP en el editor de contenido.

Alternativamente, también puedes usar el bloque WPForms para agregar el formulario en el editor de contenido.

Selecciona tu formulario AMP del menú desplegable.

A continuación, puedes publicar o actualizar tu página.

¡Eso es todo! No necesitas configurar nada más. El plugin WPForms agregará soporte AMP completo a tu formulario ahora.

Si quieres ver cómo se ve, puedes abrir la página en tu teléfono móvil. Si estás usando el Modo Lectura, puedes abrir la página en el navegador de tu escritorio para probarla agregando /amp/ o /?amp al final de la URL de tu página, así:

https://www.example.com/contact/?amp

Agregar Google reCAPTCHA a tu formulario AMP

Por defecto, WPForms incluye configuraciones anti-spam para detectar y bloquear spam. Adicionalmente, puedes usar Google reCAPTCHA para reducir los envíos de spam.

Para usar Google reCAPTCHA con tus formularios AMP, necesitas registrar tu sitio para Google reCAPTCHA v3 y obtener las claves API de Google.

Primero, deberás ir al sitio web de Google reCAPTCHA y hacer clic en el botón 'v3 Admin Console' en la esquina superior derecha de la página.

Después de eso, necesitas iniciar sesión con tu cuenta de Google. Una vez hecho esto, verás la página 'Registrar un nuevo sitio'.

A continuación, debes ingresar el nombre de tu sitio web en el campo Etiqueta. Las páginas AMP de Google no pueden manejar la casilla de verificación estándar “No soy un robot” (v2). Por lo tanto, debes usar reCAPTCHA v3, que funciona de forma invisible en segundo plano.

Después de eso, ingresa tu nombre de dominio (sin https://www.) en el campo Dominios.

A continuación, haz clic en el botón ‘Enviar’.

A continuación, verás un mensaje de éxito junto con la clave del sitio y la clave secreta para agregar reCAPTCHA a tu sitio.

Simplemente copia estas claves.

Ahora, tienes las claves de la API de Google para agregar reCAPTCHA a tus formularios. Sin embargo, hay una configuración más requerida para asegurar la compatibilidad de AMP con reCAPTCHA.

Primero, deberás hacer clic en el enlace ‘Ir a Configuración’.

A continuación, verás nuevamente la configuración de reCAPTCHA con la casilla de verificación ‘Permitir que esta clave funcione con páginas AMP’. Simplemente marca la casilla y haz clic en el botón ‘Guardar’ de abajo.

Ahora que tienes las claves de la API de Google para agregar reCAPTCHA en formularios AMP, necesitas ingresarlas en WPForms.

Puedes abrir la página WPForms » Configuración » CAPTCHA en tu panel de WordPress.

A continuación, puedes desplazarte hacia abajo y elegir la opción ‘reCAPTCHA v3’.

Después de eso, simplemente pega la clave del sitio y la clave secreta. Cuando hayas terminado, haz clic en el botón ‘Guardar Configuración’.

Ahora que Google reCAPTCHA se ha agregado a WPForms, puedes habilitarlo en tus formularios donde sea necesario.

Ve a WPForms » Todos los Formularios y selecciona el formulario donde deseas habilitar reCAPTCHA. Simplemente haz clic en el botón ‘Editar’ debajo del nombre del formulario.

Una vez que aparezca la pantalla de configuración del formulario, haz clic en la pestaña ‘Configuración’ y selecciona la pestaña ‘Protección contra Spam y Seguridad’.

Desde aquí, simplemente habilita la opción Google v3 reCAPTCHA.

Una vez hecho esto, guarda tu formulario haciendo clic en el botón ‘Guardar’ en la esquina superior derecha.

Después de eso, puedes volver a visitar tu página de contacto y ver el formulario AMP con reCAPTCHA en acción.

Consejo extra: Haz que tu sitio de WordPress sea amigable para móviles

Crear formularios AMP es un gran comienzo, pero hacer que todo tu sitio sea compatible con dispositivos móviles mejorará aún más tu experiencia de usuario. Aquí tienes algunos consejos rápidos:

• Utiliza un menú de navegación adaptable a dispositivos móviles: Facilita a los visitantes la navegación por tu sitio y la búsqueda de lo que necesitan, incluso en pantallas pequeñas.
• Ajusta la ubicación y el tamaño de tus botones de CTA: Asegúrate de que tus botones de llamada a la acción sean fáciles de tocar y visibles sin tener que desplazarse demasiado.
• Prioriza la velocidad de tu sitio web: Comprime imágenes y utiliza plugins de caché para ayudar a reducir los tiempos de carga.

¡Un sitio optimizado para móviles mantiene a los visitantes interesados y te ayuda a obtener más conversiones de tus formularios!

Para más detalles, puedes consultar nuestra guía sobre cómo crear un sitio de WordPress compatible con dispositivos móviles.

Preguntas frecuentes: Crear formularios AMP en WordPress

Antes de terminar, aquí tienes respuestas rápidas a algunas preguntas comunes sobre AMP y su uso con formularios de WordPress.

¿Qué es AMP en WordPress?

AMP (Accelerated Mobile Pages) es un marco que ayuda a que tus páginas se carguen más rápido en dispositivos móviles utilizando una versión simplificada de HTML y JavaScript. En WordPress, AMP generalmente significa crear una versión ligera de tus páginas que está optimizada para la velocidad en teléfonos y tabletas.

¿Sigue siendo relevante AMP?

Para la mayoría de los sitios web, AMP ya no es necesario. Google ahora prioriza las Core Web Vitals, que puedes mejorar usando un tema rápido y adaptable y un buen plugin de caché. Sin embargo, los editores de noticias y los sitios de medios grandes aún pueden beneficiarse de AMP.

¿Cómo crear páginas AMP en WordPress?

La forma más fácil es usar un plugin de AMP. Puede generar automáticamente versiones AMP de tus páginas y publicaciones. Después de instalar uno, puedes elegir qué contenido debe tener una versión AMP y ajustar la configuración básica desde tu panel de WordPress.

¿Cuáles son las desventajas de AMP?

Tienes menos control sobre el diseño, algunos plugins y scripts no funcionarán, y las funciones avanzadas (como ciertas animaciones, herramientas de seguimiento o JavaScript personalizado) pueden estar restringidas. Esto puede hacer que tu sitio se sienta más limitado en comparación con una página normal de WordPress.

Más guías sobre el uso de formularios de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo crear formularios AMP en WordPress fácilmente. A continuación, también puedes consultar nuestras guías sobre:

• Cómo personalizar y dar estilo a tus formularios de WordPress
• Cómo usar formularios de contacto para hacer crecer tu lista de correo en WordPress
• Cómo crear formularios compatibles con GDPR en WordPress
• Guía definitiva para usar formularios de WordPress
• Los mejores creadores de formularios en línea (selecciones de expertos)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.