Cómo crear formularios AMP en WordPress (la manera fácil)

¬ŅDesea crear formularios compatibles con AMP en su sitio de WordPress?

Las 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 dispositivos móviles.

Si bien AMP ofrece una excelente experiencia de navegaci√≥n m√≥vil al hacer que sus p√°ginas web se carguen m√°s r√°pido, deshabilita muchas funciones √ļtiles en su sitio web.

Uno de ellos son los formularios de contacto. Dado que AMP utiliza 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 lo ayuda a crear formularios de WordPress listos para AMP. Su equipo recientemente trabajó con Google para facilitar los formularios AMP para WordPress.

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

Creación de formularios AMP en WordPress (La manera fácil)

Crear formularios AMP en WordPress (paso a paso)

Para utilizar 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 un complemento de WordPress.

Una vez activado, el complemento agregar√° autom√°ticamente el soporte de Google AMP para su sitio de WordPress.

Sin embargo, puede cambiar la configuraci√≥n de AMP para su sitio web yendo a AMP ¬ĽGeneral desde su tablero de instrumentos.

AMP para la configuración de WordPress

Desde 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 las plantillas compatibles.

Una vez que haya configurado 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 la versión lite del complemento WPForms Pro.

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

Una vez que el complemento est√° instalado y activado, debe dirigirse a WPForms ¬ĽAgregar nuevo p√°gina para crear un nuevo formulario de WordPress.

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

Plantillas de formulario WPForms

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

Arrastrar y soltar Creador de formularios WPForms

Desde aquí, puede agregar o eliminar campos de formulario. Para agregar un nuevo campo a su formulario, simplemente haga clic en un campo de formulario desde 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 luego aparecerán las Opciones de campo.

Configuración de 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 de su formulario.

Configuración general de WPForms

La Configuración general le permite cambiar el nombre de su formulario, enviar el texto del botón, enviar el texto de procesamiento del botón, habilitar Honeypot anti-spam 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 un usuario complete 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 un usuario env√≠e el formulario.

Configuración de mensajes de confirmación de WPForms

Una vez completada la configuración, puede guardar su formulario.

Paso 2. Agregue su formulario AMP a una p√°gina

Ahora que su formulario de WordPress est√° listo, puede agregarlo a una p√°gina.

Primero, debe crear una nueva p√°gina o abrir una existente donde desee agregar el formulario.

En la pantalla de edición de su página, haga clic en el icono 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 WPForms agregado a la pantalla de edición de su página. Solo necesita seleccionar el formulario que creó anteriormente, y el widget lo cargará instantáneamente en el editor de páginas.

Agregar formulario de contacto a la p√°gina de WordPress con WPForms

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

¬°Eso es todo! No necesita configurar nada m√°s. El complemento WPForms Lite agregar√° soporte completo de AMP a su formulario ahora.

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

O puede abrir la p√°gina en su navegador de escritorio agregando / amp / o /? Amp al final de la URL de su p√°gina. Por ejemplo, https://www.example.com/contact/?amp.

Agregar Google reCAPTCHA a su formulario AMP

Por defecto, WPForms incluye un honeypot anti-spam 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 para Google reCAPTCHA v3 y obtener las claves 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 un nuevo sitio”.

Registre un nuevo sitio para Google reCAPTCHA

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

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

Agregar nombre de dominio y propietario para Google reCAPTCHA

La sección de Propietarios muestra su dirección de correo electrónico de forma predeterminada. También puede agregar otro correo electrónico si lo desea.

A continuaci√≥n, debe aceptar los T√©rminos de servicio de reCAPTCHA para continuar. Adem√°s, seleccione la casilla de verificaci√≥n “Enviar alertas a los propietarios”, que permitir√° que Google le notifique sobre problemas como la configuraci√≥n incorrecta y el tr√°fico sospechoso en su sitio.

Acepte los Términos de servicio de Google reCAPTCHA

Una vez hecho esto, haga clic en el botón Enviar.

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

Llaves reCAPTCHA

Ahora tiene las claves API de Google para agregar reCAPTCHA a sus formularios. Sin embargo, se requiere un ajuste m√°s para garantizar la compatibilidad de AMP con el reCATCHA. Haga clic en el enlace “Ir a configuraci√≥n” all√≠.

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

Permita que reCAPTCHA funcione en p√°ginas AMP

Ahora que tiene claves API de Google para agregar reCAPTCHA en formularios AMP, debe abrir WPForms ¬ĽConfiguraci√≥n¬Ľ reCAPTCHA p√°gina en su panel de WordPress.

WPForms reCAPTCHA Configuración WordPress

En esta pantalla, debe elegir 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 agrega a WPForms, puede habilitarlo en sus formularios cuando sea necesario. Ir WPForms ¬ĽTodos los formularios y seleccione el formulario donde desea habilitar el reCAPTCHA.

Editar un formulario creado 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”.

Habilitar Google v3 reCAPTCHA en WPForms

Marque la casilla y luego 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 en acción.

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