¿Quiere crear formularios compatibles con AMP en su sitio de WordPress?
Las páginas móviles aceleradas (AMP) ayudan a acelerar los sitios web. Sin embargo, AMP elimina los formularios de WordPress para mejorar el rendimiento de su sitio.
En este artículo, le mostraremos cómo crear formularios AMP en WordPress usando WPForms (la forma más fácil).
¿Por qué crear un formulario AMP en 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 ofrece una excelente experiencia de navegación móvil al hacer que sus páginas web se carguen más rápido, desactiva muchas funciones útiles en su sitio web de WordPress.
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 AMP.
Alternativamente, puede utilizar uno de los muchos temas responsivos de WordPress que ofrecen un rendimiento excelente en computadoras de escritorio y dispositivos móviles. De esta manera, no tendrá que comprometer el estilo de su sitio web para ofrecer una experiencia superior en dispositivos móviles.
Sin embargo, si está utilizando AMP en su sitio de WordPress, puede utilizar un complemento para mostrar formularios. Veamos cómo agregar un formulario AMP a su sitio.
Agregar formularios AMP en WordPress (paso a paso)
La mejor manera de crear un formulario AMP es mediante el uso Formularios WP. Es el complemento de formulario de WordPress más amigable para principiantes que le ayuda a crear formularios de WordPress listos para AMP.
Su equipo trabajó recientemente con Google para facilitar los formularios AMP para WordPress.
Paso 1: instale y active el complemento WPForms
Para este tutorial, usaremos la versión WPForms Pro porque ofrece más funciones, plantillas de formulario, complementos y opciones de personalización. También hay una WPForms Lite versión que puede utilizar para comenzar de forma gratuita.
Tanto la versión lite como la pro de WPForms le permiten crear un formulario de contacto básico listo para AMP.
Primero, deberá instalar y activar el complemento WPForms. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Paso 2: agregue AMP a su sitio de WordPress
Antes de crear un formulario, es importante que tenga AMP configurado en su sitio de WordPress.
Para utilizar AMP con WordPress, necesita 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 para su sitio web yendo a AMP » Configuración desde su tablero.
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 plantillas compatibles.
Para obtener más detalles, consulte nuestra guía sobre cómo configurar correctamente Google AMP en su sitio de WordPress.
Una vez que haya configurado AMP, el siguiente paso es crear un formulario de contacto compatible con AMP en su sitio de WordPress.
Paso 3: cree un nuevo formulario AMP en WPForms
Simplemente dirígete a WPForms » Agregar nuevo página para crear un nuevo formulario de WordPress. WPForms es compatible con AMP de forma predeterminada, por lo que no necesitará activar ninguna configuración especial.
En la pantalla de configuración del formulario, puede elegir una plantilla de formulario e ingresar un nombre en la parte superior. Puede seleccionar el Formulario en blanco si desea comenzar desde cero o utilizar una plantilla prediseñadas para editarlo rápidamente según sus necesidades.
Para este tutorial, elegiremos la plantilla ‘Formulario de contacto simple’.
A continuación, verá la página del creador de formularios, donde hay diferentes opciones para personalizar su plantilla.
Desde aquí, puede agregar o eliminar campos del formulario. Para agregar un nuevo campo a su formulario, simplemente haga clic en un campo de formulario desde el panel izquierdo y arrástrelo a la plantilla de formulario.
Nota: Los campos desplegable de estilo moderno y control deslizante numérico no son compatibles con Google AMP. En su lugar, deberá utilizar los campos desplegables Número y Estilo clásico.
Después de eso, puede configurar las opciones del campo. Simplemente haga clic en un campo y luego aparecerán Opciones de campo a la izquierda.
Por ejemplo, puede editar la etiqueta y el formato de un campo, convertirlo en un campo obligatorio, configurar la lógica condicional y más. Del mismo modo, puedes 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.
La configuración ‘General’ le permite cambiar el nombre de su 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, puede hacer clic en la pestaña ‘Notificaciones’ para configurar notificaciones por correo electrónico que le avisen cuando un usuario complete el formulario.
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.
WPForms le permite mostrar un mensaje, mostrar una página o redirigir a los usuarios a una URL al enviar el formulario.
Una vez completada la configuración, puede guardar su formulario.
Paso 4: agregue su formulario AMP a una página
Ahora que su formulario de WordPress está listo, puede agregarlo a una página.
En el creador de formularios de WPForms, verá un botón «Incrustar» en la parte superior. Simplemente haga clic en él para agregar su formulario a una página nueva o a una existente.
A continuación, se abrirá una ventana emergente que le pedirá que cree una página nueva o elija una página existente.
Seleccionaremos la opción ‘Crear nueva página’ para este tutorial.
A continuación, deberá ingresar un nombre para su nueva página de formulario.
Una vez hecho esto, simplemente haga clic en el botón «Vamos».
Desde aquí, verá una vista previa de su formulario AMP en el editor de contenido.
Alternativamente, también puedes usar el bloque WPForms para agregar el formulario en el editor de contenido. Simplemente seleccione su formulario AMP en el menú desplegable.
A continuación, puede publicar o actualizar su página.
¡Eso es todo! No necesitas configurar nada más. El complemento WPForms 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 puedes abrir la página en tu navegador de 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 su formulario AMP
De forma predeterminada, WPForms incluye configuraciones antispam para detectar 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 en Google reCAPTCHA v3 y obtener las claves API de Google.
Primero, tendrás que ir al Sitio web de Google reCAPTCHA y haga clic en el botón ‘Consola de administración v3’ en la esquina superior derecha de la página.
Después de eso, debes iniciar sesión con tu cuenta de Google. Una vez hecho esto, verá la página «Registrar un sitio nuevo».
A continuación, debe ingresar el nombre de su sitio web en el campo Etiqueta. Google AMP solo admite reCAPTCHA v3, por lo que debe elegir la opción de tipo reCAPTCHA ‘Basado en puntuación (v3)’.
Después de eso, ingrese su nombre de dominio (sin https://www.) en el campo Dominios.
A continuación, 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 a su sitio.
Simplemente copie estas claves.
Ahora tiene las claves API de Google para agregar reCAPTCHA a sus formularios. Sin embargo, se requiere una configuración más para garantizar la compatibilidad de AMP con reCATCHA.
Primero, deberá hacer clic en el enlace «Ir a Configuración».
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.
Ahora que tiene las claves API de Google para agregar reCAPTCHA en formularios AMP, debe ingresarlas en WPForms.
Puedes abrir el WPForms » Configuración » CAPTCHA página en su panel de WordPress.
A continuación, puede desplazarse hacia abajo y elegir la opción ‘reCAPTCHA v3’.
Después de eso, simplemente pegue la clave del sitio y la clave secreta. Cuando haya terminado, simplemente haga clic en el botón «Guardar configuración».
Ahora que Google reCAPTCHA está agregado a WPForms, puede habilitarlo en sus formularios cuando sea necesario.
Ir a WPForms » Todos los formularios y seleccione el formulario donde desea habilitar reCAPTCHA. Simplemente haga clic en el botón ‘Editar’ debajo del nombre del formulario.
Una vez que aparezca la pantalla de configuración del formulario, haga clic en la pestaña ‘Configuración’ y seleccione la pestaña ‘Protección y seguridad contra spam’.
Desde aquí, simplemente habilite la opción reCAPTCHA de Google v3.
Una vez hecho esto, guarde su 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.
Esperamos que este artículo te haya ayudado a aprender cómo crear formularios AMP en WordPress fácilmente. Es posible que también desee ver nuestra guía sobre cómo crear formularios compatibles con GDPR en WordPress y el mejor creador de páginas de arrastrar y soltar para WordPress.
Si te gustó este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.
Fuente: Cómo crear formularios AMP en WordPress (de forma fácil)