Creating AMP Forms in WordPress (The Easy Way)

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

¿Quiere crear formularios compatibles con AMP en su 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 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 correctamente sus formularios de WordPress en las páginas de AMP. Pero afortunadamente ahora hay una solución simple disponible. WPForms, el complemento de formulario de WordPress más amigable para principiantes, ahora lo ayuda a crear formularios de WordPress listos para AMP. Su equipo trabajó 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 más fácil).
Cree formularios AMP en WordPress (la forma más fácil)

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

Contents

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 un complemento de WordPress. Una vez activado, el complemento agregará automáticamente compatibilidad con Google AMP para su sitio de WordPress. Sin embargo, puede cambiar la configuración de AMP de su sitio web yendo a AMP »General desde su tablero.
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 modelos 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. Cree un formulario de WordPress con WPForms

Para comenzar, instale y active el complemento WPForms Lite en su sitio. Esta es la versión ligera del complemento WPForms Pro. Las versiones lite y pro de WPForms le permiten crear un formulario de contacto básico listo para AMP. En nuestro artículo, usaremos 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
Luego abrirá la página del generador de formularios.
Arrastra y suelta formularios de WPForms
Desde aquí puede agregar o eliminar campos de formulario. Para agregar un nuevo campo a su formulario, puede simplemente hacer clic en un campo de 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, luego aparecerán las opciones del campo.
Configuración de opciones de campo en el complemento WPForms
Asimismo, puede personalizar todos los demás campos. Después de eso, puede hacer clic en la pestaña Configuración para configurar los ajustes para 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 el anti-spam de Honeypot y más. Luego, 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
Luego, 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 del mensaje de confirmación de WPForms
Una vez que la configuración esté completa, puede guardar su formulario.

Paso 2. Agrega tu 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 página existente a la que desea 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. Simplemente seleccione el formulario que creó anteriormente y el widget lo cargará instantáneamente en el editor de página.
Agregar formulario de contacto a la página de WordPress con WPForms
Entonces puedes publicar o actualizar tu página. ¡Es todo! No tienes que configurar nada más. El complemento WPForms Lite ahora agregará soporte completo de AMP a su formulario. 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.

Agregue Google reCAPTCHA a su formulario AMP

De forma predeterminada, WPForms incluye un honeypot anti-spam para atrapar y bloquear el spam. Además, puede utilizar Google reCAPTCHA para reducir los envíos de spam. Para utilizar 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. Cuando esté completo, verá la página «Registrar 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.
Agregue un nombre de dominio y un propietario para Google reCAPTCHA
La sección Propietarios muestra su dirección de correo electrónico predeterminada. También puede agregar otro correo electrónico si lo desea. Luego, debe aceptar los Términos de servicio de reCAPTCHA para continuar. También marque la casilla «Enviar alertas a los propietarios», que permitirá que Google le notifique sobre problemas como errores de configuración y tráfico sospechoso en su sitio.
Acepta las Condiciones de servicio de reCAPTCHA de Google
Cuando termine, haga clic en el botón Enviar. Luego verá un mensaje de éxito con la clave del sitio y la clave secreta para agregar reCAPTCHA a su sitio.
Claves ReCAPTCHA
Ahora tiene las claves de la API de Google para agregar reCAPTCHA a sus formularios. Sin embargo, se requiere otro ajuste para garantizar la compatibilidad de AMP con reCATCHA. Haga clic en el enlace «Ir a configuración». Luego, verá la configuración de reCAPTCHA nuevamente con la casilla de verificación «Permitir que esta clave funcione con páginas AMP». Simplemente marque la casilla y presione el botón Guardar a continuación.
Permitir que reCAPTCHA se ejecute en páginas AMP
Ahora que tiene las claves de la API de Google para agregar reCAPTCHA en formularios AMP, debe abrir WPForms »Configuración» reCAPTCHA página en su panel de WordPress.
Configuración de WordPress de WPForms reCAPTCHA
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 agregó a WPForms, puede habilitarlo en sus formularios si es necesario. Ir a WPForms »Todos los formularios y seleccione el formulario en el que desea activar 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 «Activar Google v3 reCAPTCHA».
Activar 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 revisar su página de contacto y ver el formulario AMP con reCAPTCHA en acción. Esperamos que este artículo le haya ayudado a aprender a 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 le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Leave a Reply