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.

Historias como estas nos inspiraron a encontrar una solución sencilla. Un enfoque 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:

• Agregar formularios AMP en WordPress (Paso a Paso)
• Agregar Google reCAPTCHA a tu formulario AMP
• Consejo extra: Haz que tu sitio de WordPress sea amigable para móviles

¡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

Para este tutorial, usaremos la versión Pro de WPForms porque ofrece más funciones, herramientas de IA, plantillas de formularios, complementos y opciones de personalización. También hay una versión WPForms Lite que puedes usar para empezar gratis.

Tanto la versión Lite como la Pro de WPForms te permiten crear un formulario de contacto básico listo para AMP.

Primero, necesitarás instalar y activar el plugin WPForms. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

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

Desde la página de configuración de AMP, puedes habilitar o deshabilitar AMP en tu sitio web, elegir un modo de sitio web para AMP y elegir plantillas compatibles.

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. O puedes abrir la página en el navegador de tu escritorio 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, necesitas ingresar el nombre de tu sitio web en el campo Etiqueta. Google AMP solo admite reCAPTCHA v3, por lo que debes elegir la opción de tipo reCAPTCHA 'Basado en puntuación (v3)'.

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.

Esperamos que este artículo te haya ayudado a aprender cómo crear formularios AMP en WordPress fácilmente. También te puede interesar nuestra guía sobre cómo crear formularios que cumplan con GDPR en WordPress y nuestras selecciones expertas de los mejores creadores de formularios en línea.

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.