viernes, marzo 29, 2024
No menu items!
InicioBlogsCómo crear formularios AMP en WordPress (la forma más fácil)

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

¿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).

Cómo crear formularios AMP en WordPress

¿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

🔥 Leer:  Warframe Hush Challenge: cómo matar a un Kuva Thrall

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.

Seleccione el modo de modelo AMP

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.

Seleccione la plantilla de formulario simple

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.

Personaliza tu formulario AMP

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.

Edite los campos del formulario en su formulario AMP

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.

Configuración general del módulo para el módulo AMP

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.

🔥 Leer:  ¿Qué es la persona compradora? Definición y guía

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.

Configuración de notificaciones del módulo AMP

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.

Configuración de confirmación del módulo AMP

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.

Guarde e incruste su formulario

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.

Insertar un formulario en la página

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”.

Introduce un nombre para la nueva página AMP

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.

Agregue el bloque WPForms

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.

Ver la consola de administración de captcha

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”.

🔥 Leer:  La mejor configuración de gráficos de COD Warzone 2 para 3070, 3080, 3090, 1060, 1070, 2060, 2080 y más

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)”.

Seleccione la versión captcha v3

Luego ingrese su nombre de dominio (sin https://www.) en el campo Dominios.

A continuación, haga clic en el botón “Enviar”.

Ingrese el dominio para captcha

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.

Copie el sitio y la clave secreta.

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.

Habilite la opción para que las claves funcionen con AMP

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.

Vaya a la configuración de captcha de WPForms

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”.

Ingrese las claves captcha y escriba

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.

Cambiar la configuración de su formulario de contacto

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.

Habilite la opción Google v3 en WPForms

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.

Recomendamos

Populares