Cuando tienes un sitio web de negocios, los formularios son un elemento básico. Facilitan que los clientes se pongan en contacto contigo y que te proporcionen información y comentarios importantes. Sin embargo, averiguar cómo crearlos puede ser un reto.
Si buscas una estrategia sencilla y directa, te recomendamos que utilices los formularios de Elementor. Este popular constructor de páginas ofrece soluciones para construir una variedad de formularios que son tanto estéticos como fáciles de usar.
En este post, hablaremos de por qué querrías crear formularios en Elementor. A continuación, te guiaremos a través del proceso de creación, y cubriremos algunos complementos útiles y consejos para la resolución de problemas. ¡Empecemos!
Por qué crear formularios en Elementor
Crear formularios para tu sitio de WordPress tiene muchas ventajas. Para empezar, puedes proporcionar a tus visitantes un método rápido y sencillo de comunicarse contigo. Además, puedes utilizarlos para generar clientes potenciales y adquirir información importante de tu audiencia.
Los formularios también pueden ser herramientas útiles para registrar a tus usuarios y aceptar pagos. Sin embargo, si quieres añadir un formulario a tu sitio de WordPress, tendrás que utilizar un plugin. Como alternativa, puedes utilizar un constructor de páginas como Elementor.
Elementor te permite construir impresionantes formularios sin tocar una línea de código. Puedes utilizar el editor de arrastrar y soltar para crear formularios responsivos que se ajusten a la estética de tu marca y de tu sitio web.
También puedes elegir entre varios tipos de formularios, como:
- Formularios de contacto de Elementor: puedes utilizar esta función para crear un formulario sencillo para que los usuarios se pongan en contacto contigo.
- Elementor Gravity Forms: este widget de Gravity Forms te da más flexibilidad en cuanto a la personalización y el estilo de tus formularios.
- Formularios de registro de Elementor : esta función te permite configurar formularios de registro de usuarios en tu sitio web.
Como puedes ver, cada uno de estos formularios tiene su propio caso de uso específico y puede ayudar a mejorar la funcionalidad de tu sitio. A continuación, te mostraremos cómo construir un formulario de contacto con Elementor.
Cómo crear un formulario de contacto de Elementor en WordPress (en 6 pasos)
Ahora que entendemos mejor por qué quieres utilizar los formularios de Elementor, vamos a ver cómo puedes crear uno en unos sencillos pasos. Ten en cuenta que para este tutorial, asumiremos que ya tienes Elementor instalado y activado en tu sitio web.
Hay una herramienta gratuita y un plugin de pago. Para acceder a las funciones del formulario, necesitarás la versión premium.
Paso 1: Añadir el widget de contacto de Elementor
Para empezar, navega hasta la página o el post en el que quieres insertar tu formulario de contacto. A continuación, haz clic en el botón Editar con Elementor en la parte superior de la pantalla:
Esto lanzará la interfaz del editor de Elementor. En los widgets de la izquierda, busca y selecciona el widget Formulario:
A continuación, puedes arrastrar y soltar el widget en tu página. Esto insertará un formulario de contacto estándar.
Paso 2: Configurar los campos de tu formulario de contacto
Una vez que hayas colocado tu formulario de contacto en la página, hay un puñado de ajustes que puedes configurar. Por ahora, vamos a centrarnos en la configuración de los campos del formulario.
Puedes editar los campos básicos del formulario haciendo clic en el widget y personalizando el texto (si quieres cambiar alguna de las opciones por defecto). Si quieres añadir campos adicionales, puedes hacerlo seleccionando Añadir elemento:
Puedes seleccionar el tipo de campo que quieres añadir en la lista desplegable. A continuación, puedes añadir una etiqueta, que es el nombre del campo del formulario. Esto muestra a tus visitantes qué entrada se espera.
En la opción Marcador de posición, puedes personalizar el texto que aparece en el campo del formulario antes de que el usuario introduzca su información. Puedes utilizarlo para dar a los visitantes ejemplos de los datos que quieres que proporcionen.
Además, puedes optar por activar la opción Obligatorio y modificar el ancho de la columna. También puedes hacer clic en el panel Botones para personalizar la apariencia de los botones de tu formulario. Puedes cambiar el tamaño, así como la fuente y los colores.
Paso 3: Configurar los envíos de tu formulario
Cuando hayas terminado de crear los campos del formulario, el siguiente paso es configurar los ajustes de envío del formulario. Puedes navegar hasta el correo electrónico dentro del editor de Elementor para acceder a la variedad de opciones.
Por ejemplo, puedes introducir tu dirección de correo electrónico en el campo Para donde quieres que se entreguen los envíos. Puedes introducir varias direcciones de correo electrónico si lo deseas:
También puedes personalizar el asunto del correo electrónico y el mensaje. Cuando hayas terminado de configurar todas las opciones, asegúrate de guardar los cambios.
Paso 4: Personaliza los mensajes de tu formulario de contacto
Si quieres personalizar aún más tu formulario de contacto, puedes hacerlo activando la mensajería personalizada. Selecciona Opciones Adicionales, y luego mueve el interruptor de la Mensajería Personalizada a Sí:
Hay cuatro tipos de mensajes que puedes modificar:
- Mensaje de éxito: aparece una vez que el usuario envía el formulario
- Mensaje de error: aparecerá si hay un problema durante el proceso de envío
- Mensaje obligatorio: para informar a los usuarios de que un campo concreto no se ha rellenado
- Mensaje inválido: para informar a los usuarios de que algo en el envío del formulario está mal
Puedes personalizar estos mensajes para que coincidan con la voz y el estilo de tu marca. Por ejemplo, puedes modificar la redacción para añadir un poco de personalidad.
Paso 5: Estilizar tu formulario de contacto de Elementor
Una vez que te hayas ocupado del texto y los campos básicos de tu formulario, puedes empezar a dar estilo al diseño de tu formulario de contacto de Elementor. Por ejemplo, puedes asegurarte de que coincide con tu marca.
Para empezar, puedes hacer clic en la pestaña Estilo en la parte superior del editor de widgets:
Aquí encontrarás una gran variedad de opciones y ajustes que puedes utilizar para personalizar el diseño de tu formulario de contacto. Por ejemplo, puedes ajustar el espaciado y el relleno, así como cambiar los colores, el tamaño, las etiquetas y los botones.
Paso 6: Guardar y publicar tu formulario
Cuando estés satisfecho con el aspecto y el contenido de tu formulario de contacto de Elementor, lo único que queda por hacer es guardarlo y publicarlo. Puedes hacerlo seleccionando el botón Publicar en la parte inferior izquierda de la pantalla.
Y ya está Luego puedes previsualizar tu formulario de contacto en el front end para confirmar que tiene el aspecto que deseas.
Los mejores complementos para los formularios de Elementor
El constructor de páginas de Elementor viene con un montón de opciones para crear formularios para tu sitio web de WordPress. Sin embargo, también puedes considerar la posibilidad de añadir plugins que te ayuden a ampliar la funcionalidad de tus formularios. Veamos algunas opciones.
Master Addons para Elementor
El plugin Master Addons for Elementor es una herramienta freemium que proporciona una colección de herramientas útiles para mejorar el constructor de páginas y, a su vez, tu sitio web. Incluye las siguientes características:
- Creador de formularios de cabecera, pie de página y comentarios
- Creador del Mega Menú
- Efectos de imagen por encima de la pantalla
- Condiciones de visualización
También es compatible con una gran variedad de plugins de formularios. Esto incluye Contact Form 7, Ninja Forms, WP Forms y Caldera Forms. Para acceder a todas las funciones del plugin, tendrás que comprar la versión pro, que está disponible por 39 dólares al año.
The Plus Addons
Otra práctica herramienta que puedes utilizar con Elementor es Plus Addons. Este plugin está repleto de más de 8.000 opciones de personalización y más de 300 bloques de interfaz de usuario (UI) que pueden ayudarte a crear y diseñar tus páginas y formularios con facilidad.
Sus características incluyen:
- Cajas de iconos
- Secciones del mapa
- Formularios
- Tablas de precios
También hay más de 18 plantillas entre las que puedes elegir. Se han diseñado específicamente para determinados tipos de negocios, como agencias, restaurantes, salones de belleza y otros.
Hay una versión gratuita disponible. Sin embargo, para aprovechar todo el conjunto de funciones útiles, te recomendamos que adquieras una licencia premium, disponible por 39 dólares al año.
Consejos y trucos adicionales para crear formularios Elementor
Si quieres crear formularios de contacto de Elementor para tu sitio de WordPress sin pagar una licencia premium, hay formas de hacerlo. Para ello tendrás que combinar el constructor de páginas con otro plugin de formularios de WordPress, como WPForms o Formidable Forms.
Digamos que optas por Formidable Forms. Una vez que hayas instalado y activado el plugin en tu sitio, puedes ir a Formidable > Formularios > Añadir nuevo:
A continuación, puedes seleccionar Formulario de contacto de la lista de opciones, y elegir entre un puñado de plantillas prefabricadas. Cuando hayas terminado de crear tu formulario, ve a la página en la que quieres colocarlo y lanza la interfaz del editor de Elementor.
En el panel izquierdo, busca y selecciona el widget Formidable Forms. Puedes ajustar el formato, los colores, los botones, el texto, etc:
Cuando hayas terminado, puedes guardar y publicar los cambios. Este método requiere un poco más de tiempo y esfuerzo del que sería necesario con el plugin Elementor Pro. Sin embargo, puede ayudarte a ahorrar algo de dinero si no quieres adquirir un plan premium.
Solución de problemas de los formularios de Elementor
Los formularios de contacto de Elementor son bastante sencillos y fáciles de usar. Sin embargo, puedes encontrarte con problemas al utilizarlo. Uno de los problemas más comunes que la gente reporta son los correos electrónicos no entregados.
Elementor utiliza la función wp_mail para distribuir sus correos electrónicos. Esto significa que tu proveedor de alojamiento toma el correo electrónico enviado y lo entrega.
Sin embargo, algunos alojamientos desactivan la función de PHP que se suele utilizar para el envío de correos electrónicos, por lo que puede producirse este problema. Para resolver este error, te recomendamos que te pongas en contacto con tu proveedor de alojamiento y le pidas que habilite la función send_mail.
Como alternativa, puedes utilizar un servidor de Protocolo Simple de Transferencia de Correo (SMTP). Se trata de un servidor de correo electrónico que dirigirá tus correos electrónicos en formularios a la bandeja de entrada de tus clientes, utilizando una fuente externa como Gmail. Esto puede reducir las posibilidades de que tus correos electrónicos acaben en las carpetas de spam. Para configurar el SMTP, puedes utilizar un plugin como WP MAIL SMTP.
Resumen
Los formularios desempeñan un papel fundamental en los sitios web. Permiten que los clientes se pongan en contacto contigo, se registren en una cuenta, envíen información de pago y mucho más. Sin embargo, averiguar cómo diseñar formularios estéticamente agradables para tu sitio puede ser un reto. Afortunadamente, Elementor lo hace fácil.
Una vez que añades el widget de formulario de Elementor a tu página, puedes establecer tus campos y configurar los ajustes del formulario. También puedes personalizar el diseño de tu formulario para que se alinee con tu marca.
¿Tienes alguna pregunta sobre cómo crear formularios de Elementor en WordPress? ¡Háznoslo saber en la sección de comentarios más abajo!
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
Deja una respuesta