En este artículo descubrirás cómo crear un formulario con Elementor gratuito.
Aunque el widget Formulario sólo está disponible en Elementor ProEsto no significa que no puedas agregar un formulario con la versión gratuita de Elementor.
Si desea incluir un formulario en una página creada con la versión gratuita de Elementor, hay dos métodos que exploraremos en este artículo.
ElementorTanto en su versión pro como en la gratuita, ofrece dos widgets para crear formularios: el widget HTML y el widget Shortcode. El widget HTML permite incrustar un formulario mediante código HTML, mientras que el widget Shortcode permite incrustar un formulario desde plugins que usan shortcodes, como Contact Form 7.
Indice
Cree un formulario con la versión gratuita de Elementor usando un widget HTML en 7 pasos
Crear un formulario con la versión gratuita de Elementor es totalmente posible, incluso si no tienes acceso al widget Formulario disponible en la versión Pro. Un método efectivo es usar el widget HTML, que te permite incrustar un formulario usando código HTML.
Paso 1: Crea una nueva página o edita la existente
Para comenzar, cree una nueva página y edítela con Elementor (Páginas -> Agregar). También puede editar una página existente si lo desea.
Si decide crear un formulario en una página nueva, recuerde configurar el diseño haciendo clic en el ícono de engranaje ubicado encima de su página.
Paso 2: preparar el código HTML del formulario
Para comenzar, necesitará el código HTML de su formulario. Si tiene conocimientos de HTML, puede escribir el código usted mismo. De lo contrario puedes Encuentre muchas plantillas de formularios HTML gratuitas en línea. Una vez que el código HTML esté listo, cópielo y continúe con el siguiente paso.
Paso 3: agregue una nueva sección en Elementor
En tu editor de Elementor, empieza creando una nueva sección en la página donde quieres insertar el formulario. Haz clic en el botón "+" para añadir una sección.
Luego elija el diseño que mejor se adapte a su formulario.
Paso 4: inserte el widget HTML
Después de añadir la sección, busca el widget "HTML" en el panel de widgets de la izquierda. Arrástralo y suéltalo en la sección que creaste. Este widget te permite insertar código HTML directamente en la página.
Paso 5: pegue el código HTML del formulario
Una vez instalado el widget HTML, haga clic en la pestaña "Contenido" del widget en el panel izquierdo. Pegue el código HTML del formulario en el campo correspondiente. El formulario aparecerá en la página inmediatamente.
Paso 6: personalice y diseñe el formulario
El formulario que has integrado adoptará automáticamente el estilo básico de tu tema de WordPress. Sin embargo, si quieres personalizarlo aún más, puedes añadir CSS personalizado para ajustar colores, márgenes, fuentes y más. Esto requiere conocimientos de CSS o la ayuda de un desarrollador, si es necesario.
Paso 7: Vista previa y publicación
Una vez que el formulario esté integrado y diseñado, tómese el tiempo de previsualizar la página para asegurarse de que todo se muestre correctamente. Pruebe el formulario para verificar que funcione correctamente. Cuando esté satisfecho con el resultado, publique la página.
Ver también: Cómo usar widgets/plantillas de Elementor como bloques de Gutenberg
Una cosa importante a tener en cuenta: si su formulario HTML utiliza CSS, imágenes o JavaScript externos para diseñar, asegúrese de cargar las carpetas que contienen los archivos CSS, imágenes y JavaScript en el directorio raíz de su sitio web.
Usar un widget HTML para crear un formulario en la versión gratuita de Elementor es una solución sencilla y flexible. Si bien requiere un poco más de trabajo que el widget Formulario disponible en la versión Pro, es una forma eficaz de añadir formularios funcionales a tu sitio web sin costes adicionales.
Al combinar las capacidades de Elementor con un poco de código HTML, puede crear formularios adaptados a sus necesidades manteniendo la consistencia visual de su sitio.
Cree un formulario de Elementor gratuito utilizando el formulario de contacto 7 en 7 pasos
La creación de un formulario con la versión gratuita de Elementor se puede realizar fácilmente utilizando el popular complemento Formulario de contacto 7. Este complemento ofrece un método simple y eficaz para insertar formularios en sus páginas de Elementor sin necesidad de conocimientos de codificación.
Hay muchos otros complementos de formulario disponibles, pero recomendamos Contact Form 7, ya que es el complemento de formulario más popular para WordPress y es completamente gratuito.
Paso 1: Instalar y activar el Formulario de contacto 7
Para empezar, necesitas instalar y activar el plugin Contact Form 7 en tu sitio de WordPress. Ve a tu panel de WordPress y ve a Extensiones> AgregarLuego, busque "Contact Form 7". Una vez que encuentre el complemento, haga clic en Instalar ahoray luego Activar una vez que se complete la instalación.
Paso 2: crea un nuevo formulario
Una vez que el complemento está activado, puede crear un formulario. Para hacer esto, vaya a Contacto > Añadir nuevo en su panel de WordPress. Asigne un nombre a su formulario para reconocerlo fácilmente más adelante.
De forma predeterminada, Contact Form 7 ofrece un formulario de contacto básico con campos para nombre, correo electrónico, asunto y mensaje. Puede usarlo tal cual o personalizar los campos según sus necesidades.
Si desea agregar un nuevo campo, coloque el cursor en el área donde desea agregarlo (puede colocarlo debajo o encima de un campo existente). Agregue una etiqueta para el nuevo campo de formulario en el formato <label> votre label préféré </label>.
Coloque el cursor justo después de la etiqueta del campo que desea modificar o después del último campo existente. Luego, seleccione el tipo de campo que desea agregar en la pestaña. ChampPara mejorar la legibilidad y organización de su formulario, puede insertar un salto de línea después de cada nuevo campo, lo que hará que el formulario sea más claro y esté alineado con los demás campos existentes.
Rellene los campos y haga clic en Insertar la etiqueta (puedes dejar todo por defecto).
Contact Form 7 enviará los envíos recibidos a través de su formulario a una dirección de correo electrónico. Puede configurar la dirección de correo electrónico desde la pestaña. Correo electrónico.
Puedes ir a la pestaña Mensajes Si desea reemplazar los mensajes predeterminados, puede personalizar el mensaje que aparece después de que sus visitantes envíen exitosamente el formulario, el mensaje de error cuando no se envía el formulario, etc.
Haga clic en el botón Siguiente una vez que haya terminado de editar el formulario.
Paso 3: personaliza el formulario
Si desea modificar o añadir campos adicionales a su formulario, puede hacerlo directamente desde la interfaz de Contact Form 7. Puede añadir campos para números de teléfono, casillas de verificación o cualquier otro tipo de dato que necesite. Una vez realizados los cambios, guarde el formulario.
Lea nuestra guía sobre: Cómo personalizar el formulario Formulario de contacto 7
Paso 4: obtenga el código corto del formulario
Después de crear y personalizar su formulario, Contact Form 7 le proporcionará un código corto único. Este shortcode es esencial para integrar el formulario en una página de Elementor. Simplemente copie el código corto que se encuentra debajo del nombre del formulario.
Paso 5: incrustar el formulario en Elementor
Ahora que tienes el shortcode, abre la página donde quieres añadir el formulario con el editor de Elementor. Añade una nueva sección o selecciona una existente donde debería aparecer el formulario.
Localiza el widget "Código corto" en el panel de widgets de Elementor y arrástralo a la sección deseada. Pega el código corto que copiaste previamente en el campo correspondiente.
Paso 6: personaliza y diseña el formulario
El formulario de Contact Form 7 integrado en Elementor adoptará por defecto el estilo de tu tema de WordPress. Si deseas personalizar aún más su apariencia, puedes hacerlo añadiendo... CSS personalizado. Puede cambiar colores, márgenes, tipografía y más para adaptar el formulario al aspecto general de su sitio.
Lea también: Cómo deshabilitar una ventana emergente de Elementor en teléfonos inteligentes
Paso 7: prueba y lanzamiento
Antes de publicar tu página, asegúrate de previsualizar el formulario para verificar que funciona correctamente. Envía un mensaje de prueba para asegurarte de que todas las funciones funcionan correctamente. Una vez que estés satisfecho, publica la página para que tus visitantes puedan acceder al formulario.
Entonces ! Al utilizar Contact Form 7 con Elementor gratuito, puede crear fácilmente formularios funcionales sin gastar un centavo. Este método es ideal para usuarios que desean una funcionalidad básica pero efectiva y, al mismo tiempo, mantienen la flexibilidad para personalizar su formulario.
Contact Form 7, combinado con Elementor, le brinda una solución sólida para capturar información esencial de sus visitantes.
Si desea una personalización más sencilla, puede consultar este artículo sobre cómo personalice un formulario de Contact Form 7 usando Essential Addons y Elementor.
Preguntas frecuentes: Cómo crear un formulario con la versión gratuita de Elementor
¿Puedo crear un formulario con la versión gratuita de Elementor?
Sí, puedes crear un formulario con la versión gratuita de Elementor usando widgets HTML o Shortcode. Aunque el widget Formulario está reservado para la versión Pro, existen alternativas gratuitas efectivas.
¿Cuáles son los métodos para crear un formulario en Elementor gratuito?
Puede utilizar el widget HTML para incrustar un formulario HTML directamente o el widget Shortcode para incrustar un formulario creado con un complemento como Contact Form 7.
¿Cómo agregar un formulario HTML a una página de Elementor?
Utilice el widget HTML en Elementor para insertar el código HTML de su formulario. Puede pegar el código directamente en el campo de contenido del widget.
¿Necesito saber HTML para crear un formulario con Elementor gratuito?
Si bien ayuda, no necesitas conocimientos de HTML si utilizas un complemento de formulario como Contact Form 7, que genera códigos cortos que son fáciles de incrustar.
¿Cómo diseñar un formulario creado con Elementor gratuito?
Si está utilizando un formulario HTML, necesitará usar CSS para darle estilo. Los formularios generados por complementos como Contact Form 7 heredan el estilo de su tema de WordPress, pero también puede personalizar el estilo con CSS.
¿Existen complementos gratuitos para crear formularios con Elementor?
Sí, complementos como Contact Form 7, WPForms Lite y Ninja Forms son opciones gratuitas populares para crear formularios que puedes incrustar en Elementor.
¿Cómo integrar un formulario de Contact Form 7 en una página de Elementor?
Cree su formulario en el Formulario de contacto 7, luego copie el código corto generado. Utilice el widget Shortcode de Elementor para insertar este formulario en su página.
¿Cuáles son las limitaciones de la versión gratuita de Elementor para crear formularios?
La versión gratuita de Elementor no ofrece un widget de formulario dedicado. Para crear formularios, necesitará utilizar soluciones como HTML, códigos cortos o complementos externos.
¿Cómo puedo probar mi formulario creado con Elementor?
Después de insertar su formulario en la página, obtenga una vista previa de la página con Elementor y envíe una prueba para asegurarse de que el formulario funcione correctamente.
¿Es posible utilizar formularios avanzados con la versión gratuita de Elementor?
Para funciones avanzadas, como campos condicionales o formularios de varios pasos, se recomienda actualizar a la versión Pro de Elementor o utilizar complementos de formulario con funciones avanzadas en sus versiones gratuitas.
Otros recursos relacionados
- Cómo integrar ActiveCampaign con Elementor
- Cómo integrar AWeber con Elementor
- Elementor Cómo agregar la animación de Lottie
- Elementor : Cómo crear un rastreador de progreso vertical¡Consigue Elementor Pro ahora!
Conclusión
¡Listo! Con esto concluye este artículo que te muestra cómo crear un formulario con la versión gratuita de Elementor. Si tienes alguna dificultad, déjanos un comentario. comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...