Cómo crear formularios AMP en WordPress (The Easy Way)

¿Quieres crear formularios compatibles con AMP en tu sitio de WordPress?

Páginas Móviles Aceleradas o AMP es un proyecto de Google que hace que los sitios web se carguen más rápido en los dispositivos móviles.

Aunque AMP ofrece una gran experiencia de navegación móvil al hacer que sus páginas web se carguen más rápido, desactiva muchas características útiles de su sitio web.

Uno de ellos es el formulario de contacto. Como AMP usa un conjunto limitado de HTML y JavaScript, no puede cargar sus formularios de WordPress correctamente en las páginas de AMP.

Pero afortunadamente, ahora hay una solución fácil disponible. WPForms, el plugin de formularios de WordPress más amigable para principiantes, ahora te ayuda a crear formularios de WordPress listos para AMP. Su equipo trabajó recientemente con Google para hacer los formularios AMP fáciles para WordPress.

En este artículo, te mostraremos cómo crear formularios AMP en WordPress usando WPForms (la forma más fácil).

Creación de formularios AMP en WordPress (paso a paso)

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

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

Sin embargo, puede cambiar la configuración del AMP para su sitio web yendo a AMP " General desde su tablero de mandos.

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

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

Paso 1. Crear un formulario de WordPress con WPForms

Para empezar, instala y activa el plugin WPForms Lite en tu sitio. Es la versión lite del plugin WPForms Pro.

Tanto la versión lite como la pro de WPForms te permite crear un formulario de contacto básico listo para AMP. En nuestro artículo, usaremos la versión gratuita para las capturas de pantalla.

Una vez que el plugin esté instalado y activado, debes ir a la página WPForms " Add New para crear un nuevo formulario de WordPress.

En la pantalla de configuración del formulario, puede elegir una plantilla de formulario para empezar rápidamente. Puede seleccionar el formulario en blanco si quiere empezar desde cero.

A continuación, abrirá la página de construcción de formularios.

Desde aquí, puede añadir o eliminar campos de formulario. Para añadir un nuevo campo a su formulario, puede simplemente hacer clic en un campo del formulario desde el panel izquierdo, y aparecerá en el panel de construcción del formulario a la derecha.

Después de eso, puede configurar las opciones de campo. Simplemente haga clic en un campo, y entonces aparecerán las opciones de campo.

Del mismo modo, puede personalizar todos los demás campos.

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

La configuración general le permite cambiar el nombre del formulario, enviar el texto del botón, enviar el texto de procesamiento del botón, habilitar el Honeypot antispam y mucho más.

A continuación, puede hacer clic en la pestaña Notificaciones para configurar las notificaciones por correo electrónico que le notificarán cuando un usuario complete el formulario.

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

Una vez que la configuración esté completa, puede guardar su formulario.

Paso 2. Añadir su formulario AMP a una página

Ahora que tu formulario de WordPress está listo, puedes añadirlo a una página.

Primero, necesitas crear una nueva página o abrir una existente donde quieras añadir el formulario.

En la pantalla de edición de tu página, haz clic en el icono Añadir nuevo bloque y selecciona el bloque WPForms.

Después de eso, puedes ver el widget WPForms añadido a tu pantalla de edición de página. Sólo tienes que seleccionar el formulario que has creado antes, y el widget lo cargará instantáneamente en el editor de la página.

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

¡Eso es todo! No necesitas configurar nada más. El plugin WPForms Lite agregará soporte completo de AMP 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 añadiendo /amp/ o /?amp al final de la URL de tu página. Por ejemplo, https://www.example.com/contact/?amp.

Añadiendo Google reCAPTCHA a su formulario AMP

Por defecto, WPForms incluye un honeypot anti-spam para atrapar y bloquear el spam. Además, puedes usar Google reCAPTCHA para reducir el envío de spam.

Para usar Google reCAPTCHA con sus formularios AMP, debe registrar su sitio en Google reCAPTCHA v3 y obtener las claves de la API de Google.

Ve al sitio web de Google reCAPTCHA y haz clic en el botón "Consola de Administración" en la esquina superior derecha de la página.

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

Primero, tienes que introducir el nombre de tu sitio web en el campo de la etiqueta. Google AMP sólo soporta reCAPTCHA v3, así que tienes que elegirlo de las opciones de tipo reCAPTCHA.

Después de eso, introduzca su nombre de dominio en la sección Dominios.

La sección Propietarios muestra su dirección de correo electrónico de forma predeterminada. También puedes añadir otro correo electrónico si lo deseas.

A continuación, debe aceptar los términos de servicio de reCAPTCHA para continuar. Además, selecciona la casilla de verificación "Enviar alertas a los propietarios", lo que permitirá a Google notificarte problemas como una configuración incorrecta y tráfico sospechoso en tu sitio.

Una vez hecho esto, haz clic en el botón de envío.

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

Ahora tienes las claves de la API de Google para añadir reCAPTCHA a tus formularios. Sin embargo, se requiere un ajuste más para asegurar la compatibilidad de AMP con reCATCHA. Haz clic en el enlace "Ir a la configuración".

A continuación, verá la configuración de reCAPTCHA de nuevo con la casilla de verificación "Permitir que esta tecla funcione con las páginas AMP". Simplemente marque la casilla y haga clic en el botón Guardar abajo.

Ahora que tienes las claves de la API de Google para añadir reCAPTCHA en los formularios AMP, necesitas abrir la página WPForms " Settings " reCAPTCHA en tu panel de control de WordPress.

En esta pantalla, tienes que elegir la opción reCAPTCHA v3 y pegar la clave del sitio y la clave secreta. Después de eso, haz clic en el botón Guardar configuración.

Ahora que Google reCAPTCHA se ha añadido a WPForms, puedes habilitarlo en tus formularios donde sea necesario. Ve a WPForms " All Forms y selecciona el formulario donde quieras habilitar el reCAPTCHA.

Una vez que aparezca la pantalla de configuración del formulario, haga clic en la ficha Configuración y seleccione la sección Configuración general. En la parte inferior, puedes ver la casilla de verificación "Habilitar Google v3 reCAPTCHA".

Marque la casilla y luego guarde su formulario haciendo clic en el botón Guardar en la esquina superior derecha.

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

Esperamos que este artículo te haya ayudado a aprender a crear fácilmente formularios AMP en WordPress. También puede que quieras ver nuestra guía sobre cómo crear formularios compatibles con GDPR en WordPress.

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