Los formularios es otro de los elementos importantes que componen un sitio web. Su función principal es hacer que los usuarios entren en contacto ya sea para solicitar información, comprar productos o registrarse entre muchas de las funciones que estos ofrecen.
Existen cientos de formas de crear formularios en WordPress: ya sea manualmente mediante HTML o mediante plugins gratuitos y de pago que ofrecen esta función.
WPForms es uno de los plugins para formularios en WordPress más utilizados. Con +3 millones de instalaciones se ha convertido en uno de los favoritos de los usuarios.
Es compatible con casi el 100% de temas del mercado incluyendo Astra: el tema que estamos utilizando en el desarrollo de este curso de WordPress.
En ediciones anteriores de este curso de WordPress, hablamos de Contact Form 7: uno de los mejores plugins para formularios en WordPress.
A partir de ahora vamos a trabajar con WPForms ya que este plugin ofrece una interfaz de diseño, mediante bloques de arrastrar y soltar, mucho más sencillo de utilizar.
El plugin WPForms es un plugin FREEMIUM (es gratis = FREE con opciones básicas de diseño y ofrece una versión PREMIUM de pago). La versión gratis (Lite) se puede instalar desde el repositorio de plugins de WordPress.
Para instalar el plugin:
Una vez instalemos y activemos el plugin, el sistema nos enviará a una página de bienvenida, con varias opciones, para empezar a crear nuestro primer formulario. Puedes comenzar a crear tu primer formulario haciendo clic en Crea tu primer formulario.
También puedes comenzar a crear formularios desde el apartado WPForms >> Añadir nuevo.
En esta primera ventana vamos a darle un nombre a nuestro formulario y a seleccionar una de las plantillas que viene por defecto con el plugin. Por ejemplo: Formulario en blanco.
En esta ventana es donde vamos a confeccionar nuestro formulario de contacto. En la versión Lite, solo se incluyen los Campos estándar. Los campos elegantes y de pago solo están disponibles en la versión PRO de WPForms.
Como puedes apreciar en la imagen, los campos estándar incluyen campos básicos para la creación de un formulario. Para este ejemplo, vamos a crear un formulario de contacto simple.
Lo que tenemos que hacer es seleccionar el campo que queremos y, sin soltar el ratón, lo arrastramos a la derecha de la pantalla.
En esta pestaña vamos a configurar los ajustes generales y de envío del formulario.
Estas últimas 2 opciones son muy útiles para crear campañas de marketing. Una vez que el usuario envíe el formulario, lo podemos redirigir a una página donde ofrezcamos un servicio o producto que queremos promocionar o simplemente a una página de gracias personalizada.
Para finalizar haz clic en Guardar y luego en la X para salir.
Para añadir el formulario que hemos creado en una página usando Gutenberg, dirígete al apartado Páginas y accede a la página donde quieres añadir el formulario.
Haz clic en el Añadir un bloque y, en el campo Buscar un bloque, escribe WPForms.
WPForms ha creado un bloque del tipo widget que se integra con Gutenberg. Haz clic en el bloque para añadirlo a la página.
Selecciona el formulario que quieras añadir del bloque WPForms y haz clic en Actualizar.
Abre la página en el navegador para visualizar los cambios.
Como puedes apreciar en la imagen, el formulario no ha quedado muy simétrico. Los campos Nombre y Correo electrónico no tienen la misma longitud que el campo Texto del párrafo.
Para solucionarlo haremos lo siguiente:
Si actualizamos la página donde hemos añadido el formulario, veremos que ahora los campos del formulario tienen la misma longitud y estéticamente se ve mucho mejor.
Si has seguido todo el curso desde el inicio, sabrás que estamos trabajando con el editor de contenidos Elementor.
Si aun no conoces Elementor, en la lección instalación y configuración de Elementor, puedes encontrar una reseña de este fantástico editor de contenidos para WordPress.
Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.
Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.
Veamos cómo sería el procedimiento para añadir un formulario de contacto en Elementor.
Abre la página en el navegador para visualizar los cambios.
Anuncio publicitario
Los formularios son uno de los principales focos de SPAM en Internet. Existen robots cada vez más inteligentes dedicados a rellenar formularios automáticamente por donde quiera que pasan.
Para luchar contra estos intrusos, se han creado y perfeccionado sistemas anti SPAM como reCAPTCHA que verifican si es una persona o un robot el que envía un formulario.
reCAPTCHA es un servicio gratuito que ofrece Google para combatir con el SPAM en Internet. Solo hace falta tener una cuenta en Google y listo.
Lo primero que tenemos que hacer es registrar un nuevo sitio web en Google reCAPTCHA.
El servicio generará 2 claves: clave de sitio web y clave secreta. Cópialas en un lugar seguro y regresa a WordPress.
Últimos pasos:
Y eso es todo. Como podrás observar, el formulario no sufre ninguna alteración ya que el servicio reCAPTCHA v2 invisible no añade el típico cuadro de verificación que estamos acostumbrados a ver.
En su lugar, se mostrará el icono de reCAPTCHA en el lateral derecho del sitio web indicando que el formulario de contacto está protegido por este sistema anti SPAM.
Anuncio publicitario
Básicamente esta sería la forma más sencilla de crear un formulario en WordPress con el plugin WPForms.
Aunque es un plugin sencillo de utilizar, ofrece muchas opciones de configuración que te ayudarán a diseñar cualquier tipo de formulario para tu sitio web.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
