Cómo crear formularios AMP en WordPress (Fácilmente)

¡Compartir es de sabios!

¿Deseas crear formularios compatibles con AMP en tu sitio WordPress?

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

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

Uno de ellos por ejemplo, son los formularios de contacto. Dado que AMP utiliza un conjunto limitado de HTML y JavaScript, no puede cargar sus formularios WordPress correctamente en las páginas AMP.

Pero afortunadamente, ahora hay una solución fácil disponible. WPForms, el plugin de WordPress más amigable para principiantes, ahora puede ayudar a crear formularios WordPress listos para AMP.

En este artículo, te vamos a mostrar cómo crear formularios AMP en WordPress de forma rápida y sencilla.

Creating AMP Forms in WordPress (The Easy Way)

AMP for WordPress Settings

En la pantalla de configuración de formularios, puedes elegir una plantilla predefinida de formulario para empezar rápidamente. También puedes elegir el formulario en blanco si lo que deseas es empezar un formulario desde cero.

Form Templates WPForms

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

Drag and Drop Form Builder WPForms

Desde esta sección, puedes editar los campos del formulario. Para añadir un nuevo campo al formulario, simplemente clickea en un campo del formulario desde el panel izquierdo, y aparecerá en el panel del constructor del formulario a la derecha.

Después deberás de configurar las opciones de campo. Simplemente haz clic en un campo y, a continuación, aparecerán las opciones de campo.

Configuring Field Options in WPForms Plugin

Puedes llevar a cabo la misma acción para editar todos los demás campos del formulario.

Después, entra en Configuración para configurar las opciones del formulario.

WPForms General Settings

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

A continuación, puedes entrar en Notificaciones para configurar las notificaciones por correo electrónico que te avisará cuando un usuario complete el formulario.

WPForms Notification Settings

Ahora puedes hacer clic en la ficha Confirmación para configurar un mensaje de confirmación que se mostrará cuando un usuario envíe el formulario.

WPForms Confirmation Message Settings

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

Paso 2. Agregar su formulario AMP a una página

Ahora que has creado el formulario de WordPress, puedes insertarlo en una página.

En primer lugar, crea una nueva página o abre una ya existente en la que desees añadir el formulario.

En la pantalla de edición, haga clic en el icono Agregar nuevo bloque y seleccione el bloque WPForms.

Add WPForms Block to WordPress Page Editor

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

Add Contact Form to WordPress Page with WPForms

Publica o actualiza la página.

Eso es todo! No hay que configurar nada más.

Si quieres comprobar cómo ha quedado, visita la página donde tienes el formulario desde tu smartphone.

O también puedes abrir la página desde el navegador de escritorio añadiendo /amp/ al final de la URL de la página. Por ejemplo:

https://www.example.com/contact/amp/

Cómo añadir Google reCAPTCHA a un formulario AMP

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

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

Vaya al sitio web de Google reCAPTCHA y haga clic en el botón Admin Console en la esquina superior derecha de la página.

Visit Google reCAPTCHA website

Después de eso, debes acceder con tu cuenta de Google. Una vez hecho esto, verás la página ‘Registrar un nuevo sitio’.

Register a New Site for Google reCAPTCHA

Ahora debes de introducir el nombre de tu sitio web en el campo Etiqueta. Google AMP sólo soporta reCAPTCHA v3, por lo que debes elegir entre las opciones de tipo reCAPTCHA.

Después, introduce tu nombre de dominio en la sección Dominios.

Add Domain Name and Owner for Google reCAPTCHA

La sección Propietarios muestra su dirección de correo electrónico de forma predeterminada. También puedes agregar otro correo electrónico si así lo deseas.

Acepta los Términos de Servicio de reCAPTCHA para seguir avanzando. Además, selecciona la casilla de verificación «Enviar alertas a los propietarios», que permitirá a Google notificarte sobre problemas como errores de configuración y tráfico sospechoso en tu sitio.

Accept Google reCAPTCHA Terms of Service

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

Luego, verás un mensaje de éxito junto con la clave del sitio y la clave secreta para agregar reCAPTCHA a tu web.

reCAPTCHA Keys

Ya están en tu poder las claves de la API de Google para añadir reCAPTCHA a tus formularios. Sin embargo, hay un ajuste más requerido para asegurar la compatibilidad de AMP con reCATCHA. Haz clic en el enlace «Ir a Configuración».

A continuación, volverás a ver la configuración de reCAPTCHA con la casilla de verificación Allow this key to work with AMP pages (Permitir que esta tecla funcione con páginas AMP). Simplemente marca la casilla y haz clic en el botón Guardar.

Allow reCAPTCHA to work on AMP Pages

WPForms reCAPTCHA Settings WordPress

Edit a Form Created with WPForms

Una vez que aparezca la pantalla de configuración del formulario, ves a Configuración y selecciona la sección Parámetros generales. En la parte inferior, puedes ver la casilla de verificación Habilitar Google v3 reCAPTCHA.

Enable Google v3 reCAPTCHA in WPForms

Marca la casilla y luego guarda el 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 le haya ayudado a aprender a crear formularios AMP en WordPress fácilmente. También puede ver nuestra guía sobre cómo crear formularios compatibles con GDPR en WordPress.

TE PUEDE INTERESAR

Deja un comentario

shares