¿Quiere crear formularios compatibles con AMP en su sitio de WordPress?
Accelerated Mobile Pages (AMP) ayuda 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 acelera la carga de sitios web en dispositivos móviles.
Aunque AMP ofrece una excelente experiencia de navegación móvil al acelerar la carga de sus páginas web, desactiva muchas funciones útiles en su sitio web de WordPress.
Uno de ellos son los formularios de contacto. Debido a que AMP utiliza un conjunto limitado de HTML y JavaScript, no puede cargar correctamente formularios de WordPress en páginas AMP.
Alternativamente, puede utilizar uno de los muchos temas responsivos de WordPress que ofrecen un rendimiento excelente en dispositivos móviles y de escritorio. 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 usa AMP en su sitio de WordPress, puede usar un complemento para mostrar formularios. Veamos cómo agregar un módulo AMP a su sitio.
Agregar formularios AMP en WordPress (paso a paso)
La mejor manera de crear un formulario AMP es utilizar 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 colaboró ​​recientemente con Google para simplificar 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 WPForm Lite versión que puedes usar 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 tengas AMP configurado en tu sitio de WordPress.
Para usar AMP con WordPress, necesita instalar y activar el archivo 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
solo ve 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á habilitar 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 prefabricada para modificarlo rápidamente y adaptarlo a 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 varias 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.
A continuación, puede configurar las opciones del campo. Simplemente haga clic en un campo y las Opciones de campo aparecerán a la izquierda.
Por ejemplo, puede cambiar la etiqueta y el formato de un campo, convertirlo en un campo obligatorio, establecer una lógica condicional y más. 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 módulo.
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 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 su formulario.
A continuación, puede hacer clic en la pestaña “Confirmación” para configurar que aparezca un mensaje de confirmación 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 el formulario.
Paso 4: agregue el módulo 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 el 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 la nueva página del formulario.
Una vez hecho esto, simplemente haga clic en el botón “Vamos”.
Desde aquà verás una vista previa de tu 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 el módulo AMP en el menú desplegable.
Luego, puede publicar o actualizar su página.
¡Eso es todo! No necesitas configurar nada más. El complemento WPForms 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. O puedes abrir la página en tu navegador de escritorio agregando /amp/ o /?amp al final de la URL de la 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 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.
A continuación, debe iniciar sesión con su cuenta de Google. Una vez que haya terminado, 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)”.
Luego 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 tienes las claves API de Google para agregar reCAPTCHA a tus formularios. Sin embargo, se requiere otra configuración 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 insertarlas en WPForms.
Puedes abrir el WPForms » Configuración » CAPTCHA página en su panel de WordPress.
Después de eso, puedes desplazarte hacia abajo y elegir la opción “reCAPTCHA v3”.
A continuación, simplemente pegue la clave del sitio y la clave secreta. Una vez que haya terminado, simplemente haga clic en el botón “Guardar configuración”.
Ahora que se agregó Google reCAPTCHA 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 módulo, haga clic en la pestaña “Configuración” y seleccione la pestaña “Seguridad y protección contra spam”.
Desde aquÃ, simplemente habilite la opción reCAPTCHA de Google v3.
Una vez hecho esto, guarde el formulario haciendo clic en el botón “Guardar” en la esquina superior derecha.
A continuación, 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 fácilmente formularios AMP en WordPress. Es posible que también desee consultar 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.