M谩s

    C贸mo crear formularios AMP en WordPress (de forma f谩cil)

    - Advertisement -

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

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

    Seleccione el modo de plantilla AMPSeleccione el modo de plantilla 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

    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.

    Seleccione una plantilla de formulario simpleSeleccione una 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 diferentes opciones para personalizar su plantilla.

    Personaliza tu formulario AMPPersonaliza 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.

    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.

    Editar campos de formulario en formulario AMPEditar campos de formulario en formulario AMP

    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.

    Configuraci贸n general del formulario para el formulario AMPConfiguraci贸n general del formulario para el formulario AMP

    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.

    Configuraci贸n de notificaciones del formulario AMPConfiguraci贸n de notificaciones del formulario AMP

    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.

    Configuraci贸n de confirmaci贸n del formulario AMPConfiguraci贸n de confirmaci贸n del formulario AMP

    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.

    Guarde e incruste su formularioGuarde 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谩ginaInsertar un formulario en la p谩gina

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

    Ingrese un nombre para la nueva p谩gina AMPIngrese un nombre para la nueva p谩gina AMP

    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.

    Agregue el bloque WPFormsAgregue el bloque WPForms

    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.

    Ver la consola de administraci贸n de captchaVer la consola de administraci贸n de captcha

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

    Seleccione la versi贸n captcha v3Seleccione la versi贸n captcha 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’.

    Ingrese el dominio para captchaIngrese 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.

    Copiar sitio y clave secretaCopiar sitio y clave secreta

    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.

    Habilitar la opci贸n para que las claves funcionen con AMPHabilitar 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 ingresarlas en WPForms.

    Puedes abrir el WPForms 禄 Configuraci贸n 禄 CAPTCHA p谩gina en su panel de WordPress.

    Vaya a la configuraci贸n de captcha de WPFormsVaya a la configuraci贸n de captcha de WPForms

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

    Ingrese las claves captcha y escribaIngrese las claves captcha y escriba

    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.

    Edite la configuraci贸n de su formulario de contactoEdite la configuraci贸n de su formulario de contacto

    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.

    Habilite la opci贸n Google v3 en WPFormsHabilite la opci贸n Google v3 en WPForms

    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)

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.