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

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

Si bien AMP brinda una excelente experiencia de navegación móvil al hacer que las páginas se carguen más rápido, deshabilita muchas funciones útiles en su sitio.

Uno de ellos es un formulario de contacto. Debido a que 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 complemento de formularios de WordPress más amigable para principiantes, ahora lo ayuda a crear formularios de WordPress habilitados para AMP. Su equipo se asoció recientemente con Google para simplificar los formularios AMP para WordPress.

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

Crear formularios AMP en WordPress (la forma fácil)

Crear formularios AMP en WordPress (paso a paso)

Para usar AMP con WordPress, debe instalar y activar el complemento oficial de AMP para WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Una vez activado, el complemento agregará automáticamente el soporte de Google AMP a su sitio de WordPress.

Sin embargo, puede cambiar la configuración de AMP de su sitio visitando AMP » General desde tu tablero.

Configuración de AMP para WordPress

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

Después de configurar AMP, el siguiente paso es crear un formulario de contacto compatible con AMP en su sitio de WordPress.

paso 1.Crear un formulario de WordPress con WPForms

Para comenzar, instale y active el complemento WPForms Lite en su sitio. Es una versión simplificada del complemento WPForms Pro.

Tanto la versión Lite como la Pro de WPForms le permiten crear un formulario de contacto básico listo para AMP. En nuestro artículo, utilizaremos capturas de pantalla de la versión gratuita.

Después de instalar y activar el complemento, debe ir a WPForms » Agregar nuevo página para crear un nuevo formulario de WordPress.

En la pantalla de configuración del formulario, puede seleccionar una plantilla de formulario para comenzar rápidamente. Si desea comenzar desde cero, puede elegir un formulario en blanco.

Plantilla de formulario WPForms

A continuación, se abrirá la página del generador de formularios.

Generador de formularios de arrastrar y soltar WPForms

Desde aquí, puede agregar o eliminar campos de formulario. Para agregar un nuevo campo a un formulario, todo lo que necesita hacer es hacer clic en el campo del formulario en el panel izquierdo y aparecerá en el panel del generador de formularios a la derecha.

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

Configurar opciones de campo en el complemento WPForms

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

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

Configuración general de WPForms

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 los honeypots antispam y más.

A continuación, puede hacer clic en la pestaña Notificaciones para configurar notificaciones por correo electrónico que le notifiquen cuando los usuarios completen el formulario.

Configuración de notificaciones de WPForms

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

Configuración del mensaje de confirmación de WPForms

Una vez configurado, puede guardar el formulario.

Paso 2.Agregue su formulario AMP a la página

Ahora que su formulario de WordPress está listo, puede agregarlo a su página.

Primero, debe crear una nueva página o abrir una página existente en la que desee agregar un formulario.

En la pantalla de edición de su página, haga clic en el ícono Agregar nuevo bloque y seleccione el bloque WPForms.

Agregue el bloque WPForms al editor de páginas de WordPress

Después de eso, puede ver el widget de WPForms agregado a la pantalla de edición de la página. Solo necesita seleccionar el formulario creado previamente y el widget lo cargará en el editor de la página inmediatamente.

Agregue formularios de contacto a las páginas de WordPress usando WPForms

A continuación, puede publicar o actualizar su página.

¡eso es todo! No necesitas configurar nada más. El complemento WPForms Lite ahora agregará soporte completo de AMP a sus formularios.

Si desea ver cómo se ve, puede abrir la página en su teléfono.

Como alternativa, puede abrir la página en un navegador de escritorio agregando /amp/ o /?amp al final de la URL de la página. Por ejemplo, https://www.example.com/contact/?amp.

Agregue Google reCAPTCHA a sus formularios AMP

De forma predeterminada, WPForms incluye un honeypot antispam para atrapar y bloquear el spam. Además, puede usar Google reCAPTCHA para reducir los envíos de spam.

Para usar Google reCAPTCHA con sus formularios AMP, debe registrar su sitio web con Google reCAPTCHA v3 y obtener una clave API de Google.

Vaya al sitio web de Google reCAPTCHA y haga clic en el botón “Consola de administración” en la esquina superior derecha de la página.

Visite el sitio web de Google reCAPTCHA

Después de eso, debe iniciar sesión con su cuenta de Google. Una vez hecho esto, verá la página “Registrar nuevo sitio”.

Registrar un nuevo sitio para Google reCAPTCHA

Primero, debe ingresar el nombre de su sitio web en el campo de etiqueta. Google AMP solo admite reCAPTCHA v3, por lo que debe elegir entre las opciones de tipo de reCAPTCHA.

Después de eso, ingrese su nombre de dominio en la sección “Dominio”.

Agregar dominio y propietario para Google reCAPTCHA

La sección de propietario muestra su dirección de correo electrónico de forma predeterminada. También puede agregar otro correo electrónico si es necesario.

A continuación, debe aceptar los Términos de servicio de reCAPTCHA para continuar. Además, marque la casilla de verificación “Enviar una alerta al propietario”, lo que permitirá que Google le notifique sobre problemas como configuraciones incorrectas y tráfico sospechoso en su sitio.

Aceptar los Términos de servicio de Google reCAPTCHA

Cuando haya terminado, haga clic en el botón Enviar.

A continuación, verá un mensaje de éxito junto con la clave del sitio y la clave para agregar reCAPTCHA en su sitio.

clave reCAPTCHA

Ahora que tiene su clave API de Google, puede agregar reCAPTCHA a su formulario. Sin embargo, se requiere un ajuste más para garantizar que AMP cumpla con reCATCHA. Haga clic en el enlace “Ir a Configuración” aquí.

A continuación, volverá a ver la configuración de reCAPTCHA, con la casilla de verificación “Permitir que esta clave se use con páginas AMP”. Simplemente marque la casilla y haga clic en el botón Guardar a continuación.

Permitir que reCAPTCHA funcione en páginas AMP

Ahora que tiene su clave API de Google para agregar reCAPTCHA en los formularios de AMP, debe abrir WPForms » Configuración » reCAPTCHA Páginas en el Panel de WordPress.

WPForms reCAPTCHA Configurar WordPress

En esta pantalla, debe seleccionar la opción reCAPTCHA v3 y pegar la clave del sitio y la clave secreta. Después de eso, haga clic en el botón “Guardar configuración”.

Ahora que Google reCAPTCHA se ha agregado a WPForms, puede habilitarlo en sus formularios si es necesario.ir con WPForms » Todos los formularios y seleccione el formulario para el que desea habilitar reCAPTCHA.

Editar formularios creados con WPForms

Una vez que aparezca la pantalla de configuración del formulario, haga clic en la pestaña Configuración y seleccione la sección Configuración general. En la parte inferior puede ver la casilla de verificación “Habilitar Google v3 reCAPTCHA”.

Habilite Google v3 reCAPTCHA en WPForms

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

Después de eso, puede volver a visitar su página de contacto y ver el formulario AMP con reCAPTCHA.

Esperamos que este artículo le haya ayudado a aprender cómo crear fácilmente formularios AMP en WordPress. También puede consultar 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 videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y facebook

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.