¿Quieres crear formularios compatibles con AMP en tu sitio de WordPress?
Accelerated Mobile Pages (AMP) ayuda a acelerar los sitios web. Sin embargo, AMP quita / 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 utilizando WPForms (de 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 los dispositivos móviles.
Aunque AMP ofrece una gran experiencia de navegación móvil al hacer que sus páginas web se carguen más rápido, desactiva muchas características ú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 los formularios de WordPress correctamente en las páginas AMP.
Otra opción es utilizar uno de los muchos temas adaptables de WordPress que ofrecen un rendimiento excelente en ordenadores y móviles. De este modo, no tendrás que renunciar al estilo de tu sitio web para ofrecer una experiencia superior en dispositivos móviles.
Sin embargo, si estás usando AMP en tu sitio de WordPress, entonces puedes usar un plugin para mostrar formularios. Veamos cómo añadir un formulario AMP a tu sitio.
Añadir formularios AMP en WordPress (paso a paso)
La mejor manera de crear un formulario AMP es utilizando WPForms. Es el plugin de formularios de WordPress más fácil de usar para principiantes que te ayuda a crear formularios de WordPress listos para AMP.
Su equipo ha trabajado recientemente con Google para facilitar el uso de formularios AMP en WordPress.
Paso 1: Instale y active el plugin WPForms
Para este tutorial, usaremos la versión WPForms Pro porque ofrece más características, plantillas de formularios, extensiones y opciones de personalización. También hay una versión WPForms Lite que se puede utilizar para empezar de forma gratuita.
Tanto la versión lite como la pro de WPForms te permiten crear un formulario de contacto básico preparado para AMP.
Primero, necesitará instalar y activar el plugin WPForms. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un plugin de WordPress.
Paso 2: Añadir AMP a su sitio WordPress
Antes de crear un formulario, es importante que tengas AMP establecido en tu sitio WordPress.
Para poder utilizar AMP con WordPress, necesitas instalar y activar el plugin oficial de AMP para WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, el plugin añadirá automáticamente soporte de Google AMP para su sitio de WordPress.
Sin embargo, puedes cambiar los ajustes de AMP para tu sitio web yendo a AMP ” Ajustes desde tu Escritorio.
Desde la página de ajustes de AMP, puedes activar o desactivar AMP en tu sitio web, elegir un modo de sitio web para AMP y elegir plantillas compatibles.
Para obtener más información, consulta nuestra guía sobre cómo establecer correctamente Google AMP en tu 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: Crear un nuevo formulario AMP en WPForms
Simplemente diríjase a WPForms ” Añadir nueva página para crear un nuevo formulario de WordPress. WPForms es compatible con AMP por defecto, por lo que no necesitará activar ningún ajuste especial.
En la pantalla de configuración del formulario, puede elegir una plantilla de formulario e introducir un nombre en la parte superior. Puede seleccionar el formulario en blanco si desea empezar desde cero o utilizar una plantilla preconstruida para editarla rápidamente según sus necesidades.
Para este tutorial, elegiremos la plantilla‘Formulario de contacto simple‘.
A continuación, verá la página del maquetador de formularios, donde hay diferentes opciones para personalizar su plantilla.
Desde aquí, puede añadir o eliminar campos de formulario. Para añadir un nuevo campo a su formulario, sólo tiene que hacer clic en un campo de formulario del panel izquierdo y arrastrarlo a la plantilla de formulario.
Nota: los campos Desplegable de estilo moderno y Número deslizante no son compatibles con Google AMP. En su lugar, deberá utilizar los campos Número y Desplegable de estilo clásico.
A continuación, puede configurar las opciones de campo. Basta con hacer clic en un campo y aparecerán las opciones de campo a la izquierda.
Por ejemplo, puede editar la etiqueta y el formato de un campo, convertirlo en obligatorio, establecer una lógica condicional, etc. Del mismo modo, puedes personalizar todos los demás campos.
A continuación, puede hacer clic en la pestaña “Ajustes” para configurar los ajustes del formulario.
Los ajustes “Generales” le permiten cambiar el nombre del formulario, el texto del botón de envío, el texto de procesamiento del botón de envío, etc.
A continuación, puede hacer clic en la pestaña “Notificaciones” para establecer avisos por correo electrónico cuando un usuario complete el formulario.
A continuación, puede hacer clic en la pestaña “Confirmación” para establecer 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: Añade tu formulario AMP a una página
Ahora que su formulario de WordPress está listo, puede añadirlo a una página.
En el maquetador de formularios WPForms, verá un botón ‘Incrustar’ en la parte superior. Simplemente haga clic en él para añadir su formulario a una página nueva o a una ya existente.
A continuación, se abrirá una ventana emergente que le pedirá que cree una página nueva o que elija una página existente.
Seleccionaremos la opción “Crear nueva página” para este tutorial.
A continuación, deberá introducir un nombre para su nueva página de formulario.
Una vez hecho esto, basta con hacer clic en el botón “Let’s Go”.
Desde aquí, verás una vista previa de tu formulario AMP en el editor de contenido.
También puedes utilizar el bloque WPForms para añadir el formulario en el editor de contenido. Simplemente selecciona tu formulario AMP en el menú desplegable.
A continuación, puede publicar o actualizar su página.
Eso es todo. No necesita configurar nada más. El plugin WPForms añadirá soporte completo de AMP a su formulario ahora.
Si quieres ver cómo queda, puedes abrir la página en tu teléfono móvil. O puede abrir la página en su navegador / explorador de sobremesa añadiendo /amp/ o /?amp al final de la URL de su página, así:
https://www.example.com/contact/?amp
Añadir Google reCAPTCHA a tu formulario AMP
Por defecto, WPForms incluye ajustes anti-spam para atrapar y bloquear el spam. Además, puede utilizar Google reCAPTCHA para reducir los envíos de Spam.
Para utilizar Google reCAPTCHA con tus formularios AMP, debes registrar tu sitio para Google reCAPTCHA v3 y obtener las claves de API de Google.
En primer lugar, deberá acceder al sitio web de Google reCAPTCHA y hacer clic en el botón “Consola de administrador v3” situado en la esquina superior derecha de la página.
A continuación, accede con tu cuenta de Google. Una vez hecho esto, verás la página “Registrar un nuevo sitio”.
A continuación, debes introducir el nombre de tu sitio web en el campo Etiqueta. Google AMP solo es compatible con reCAPTCHA v3, por lo que debes elegir la opción de tipo de reCAPTCHA “Basado en puntuación (v3)”.
A continuación, introduzca el nombre de su 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 correcto junto con la clave del sitio y la clave secreta para añadir reCAPTCHA a su sitio.
Sólo tienes que copiar estas claves.
Ya tienes las claves de la API de Google para añadir reCAPTCHA a tus formularios. Sin embargo, hay un ajuste más obligatorio / requerido / necesario para garantizar la compatibilidad de AMP con el reCATCHA.
En primer lugar, deberá enlazar con “Ir a ajustes”.
A continuación, volverás a ver los ajustes de reCAPTCHA con la casilla de verificación “Permitir que esta clave funcione con páginas AMP”. Simplemente marca la casilla y haz clic en el botón ‘Guardar’ de abajo.
Ahora que tienes las claves de la API de Google para añadir reCAPTCHA en los formularios AMP, necesitas introducirlas en WPForms.
Puede abrir la página WPForms ” Ajustes ” CAPTCHA en su escritorio de WordPress.
A continuación, puede desplazarse hacia abajo y elegir la opción “reCAPTCHA v3”.
Después, sólo tienes que pegar la clave del sitio y la clave secreta. Cuando haya terminado, sólo tiene que hacer clic en el botón “Guardar ajustes”.
Ahora que Google reCAPTCHA está añadido a WPForms, puedes activarlo en tus formularios donde sea necesario.
Vaya a WPForms ” Todos los Formularios y seleccione el formulario donde desea activar el 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 “Ajustes” y seleccione la pestaña “Protección y seguridad contra el spam”.
Desde aquí, simplemente active la opción Google v3 reCAPTCHA.
Una vez hecho esto, guarda el formulario haciendo clic en el botón “Guardar” de la esquina superior derecha.
Después, 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 a crear formularios AMP en WordPress fácilmente. Puede que también quieras ver nuestra guía sobre cómo crear formularios compatibles con el RGPD en WordPress y el mejor editor de arrastrar y soltar páginas para WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
That’s great news. I can finally use the potential of the paid WP Forms I have on the site (that is, besides being able to use it on all the sites I’ve done thanks to unlimited sites). Thank you for the detailed instructions on how to use WP Forms on websites with AMP.
Konrad says
Great info! For those on a budget, are there any good free alternatives to WPForms that offer AMP compatibility?
WPBeginner Support says
If we find one we would recommend we will be sure to share!
Administrador
Adrian says
This article is a game-changer for anyone seeking to optimize their WordPress site for mobile performance with Accelerated Mobile Pages (AMP). The clear and concise explanation of how AMP impacts WordPress forms, and the subsequent guidance on creating AMP-friendly forms using WPForms, is incredibly valuable.
WPBeginner Support says
Glad you found it helpful!
Administrador
Shafqat Khan says
Great tutorial! AMP forms are crucial for mobile performance, and your guide simplifies the process with WPForms. I appreciate the clear steps, especially for adding Google reCAPTCHA, which is essential for security. Your articles are always a valuable resource!
WPBeginner Support says
Glad you’ve found our content helpful!
Administrador
Ralph says
Seems like it is good idea to do this if my site can be faster for mobile. I personally don’t like using my smartphone for reading websites, but from Google Analytcis i see my website went from 55-60% mobile users montly to 73-75% mobile users montly. Sometimes it is lower but it is inevitable trend that all bloggers should respect and adapt.
WPBeginner Support says
Glad you liked our recommendation
Administrador
Aman says
Thanks WP Begginer, Helpful for my website and works completely well.
WPBeginner Support says
Glad to hear our guide could help!
Administrador
faizan says
I learned information from WP Beginner and collected many things that can help me for creating best website
WPBeginner Support says
Glad to hear our guides have been helpful
Administrador
Mikolaj says
Great article! It’s super helpful for anyone who wants to keep their WordPress site AMP-friendly while still having forms. WPForms looks like the way to go. Thanks for sharing!
WPBeginner Support says
Glad you found the post helpful!
Administrador
Czarek says
This article is a valuable resource for anyone looking to optimize their WordPress site for mobile users while still maintaining the functionality of forms. It’s important to acknowledge that while Accelerated Mobile Pages (AMP) can significantly boost website speed, it often comes at the cost of removing certain features, including forms. The fact that this article addresses this issue by providing a solution is highly beneficial.
The recommendation to use WPForms for creating AMP-friendly forms is particularly noteworthy as it offers an easy and efficient method for ensuring your website remains user-friendly on mobile devices. This approach can help website owners strike a balance between speed and functionality, ensuring a positive user experience.
My question is: Are there any specific considerations or best practices to keep in mind when implementing AMP forms on a WordPress site using WPForms, especially in terms of form design, user experience, and potential impacts on SEO?
WPBeginner Support says
For AMP forms the main thing to keep in mind is ensuring that your users can use the form and there are not strange formatting issues when viewed.
Administrador
Ronald says
What about user-submitted content forms (for posts or custom post types)? How about user registration/login forms? I know WP Forms has those features at premium costs, but do they still work with AMP?
WPBeginner Support says
Currently the AMP support is valid only for the basic contact form feature.
Administrador
Irene says
This is nice. I’m so adding AMP and reCaptcha to my site as I’m already using wpforms lite. But I hope it doesn’t take up much resources.
Thanks WPbeginners. Following you has been one of the best decisions I made this year. God bless the day I found you.
WPBeginner Support says
Glad our guide could be helpful
Administrador