Resumen de IA
¿Te gustaría añadir un formulario de WordPress a tu sitio web usando Elementor? Puedes usar fácilmente el widget WPForms Elementor para añadir formularios a tus páginas y editarlos para que queden como deseas. Aún mejor, puedes hacerlo todo directamente desde el constructor de páginas de Elementor.
Este tutorial te mostrará cómo añadir WPForms a una página de Elementor.
Antes de empezar, asegúrate de haber instalado y activado el plugin WPForms y verificado tu clave de licencia.
1. Habilitar Marcado Moderno
Nota: Si ya has habilitado el Marcado Moderno en tus ajustes de WPForms, puedes saltarte esta sección y continuar con la sección Incrustar tu Formulario de esta guía.
Antes de estilizar tus formularios en Elementor, necesitarás habilitar el marcado moderno en WPForms. Para hacerlo, ve a WPForms » Ajustes y selecciona la pestaña General.
A continuación, desplázate hasta la sección General y asegúrate de que la opción Incluir estilo de formulario esté configurada en Estilo base y de tema del formulario.
Después de eso, ajusta el botón de alternancia Usar Marcado Moderno a la posición Activado para habilitarlo.
Asegúrate de guardar tus cambios después de habilitar esta opción. Una vez que el marcado moderno esté habilitado, estarás listo para estilizar tus formularios usando Elementor como se describe en las siguientes secciones.
2. Incrustar tu Formulario
Primero, necesitarás abrir la página o entrada donde deseas incrustar tu formulario.
Si no ves el constructor de Elementor al abrir por primera vez el editor de página o entrada, haz clic en el botón azul Editar con Elementor.
Una vez que hayas abierto el constructor de Elementor, mira la barra lateral izquierda. En la sección de widgets Básicos, deberías ver un widget llamado WPForms.
Arrastra el widget WPForms al área de widgets en el lado derecho de la pantalla.
A continuación, deberás elegir entre añadir un formulario existente o crear uno completamente nuevo en Elementor.
Añadir un Formulario Existente
Si deseas añadir un formulario que ya has creado a esta página, haz clic en el desplegable dentro del widget WPForms. Verás todos los formularios que has creado. Selecciona el que deseas añadir a tu página.
Elementor te mostrará una vista previa en vivo de tu formulario tal como aparecerá en tu sitio web. Si necesitas hacer cambios en el formulario, haz clic en el enlace Editar el formulario seleccionado en el panel de la izquierda.
El constructor de formularios se abrirá en una ventana emergente para que puedas hacer cambios en tu formulario. Cuando termines de editar, haz clic en Guardar, luego haz clic en el icono X en la esquina superior derecha para cerrar el constructor.
Verás instantáneamente cualquier cambio que hayas hecho en el constructor de Elementor.
Crear un Formulario Nuevo
Si aún no tienes formularios, o simplemente quieres crear uno nuevo para esta página, puedes crear un formulario nuevo sin cerrar el constructor de páginas de Elementor. Para hacerlo, haz clic en el botón + Nuevo Formulario en el panel de la izquierda.
El constructor de formularios de WPForms se abrirá para que puedas empezar a crear tu formulario, comenzando por añadir un nombre y elegir una plantilla.
Nota: Si necesitas ayuda para crear tu formulario, consulta nuestra guía sobre cómo crear tu primer formulario. También, echa un vistazo a nuestra plantilla de formulario de Elementor de varias páginas si deseas utilizar una plantilla de formulario preconstruida.
Cuando hayas terminado de crear tu formulario, haz clic en el botón Guardar en la esquina superior derecha del creador de formularios, y luego haz clic en el icono X para cerrarlo.
Verás tu nuevo formulario en el creador de páginas de Elementor. Si necesitas hacer más cambios, simplemente haz clic en el enlace Editar el formulario seleccionado en el panel de la izquierda.
3. Configurar Opciones de Visualización
Para mostrar el título o la descripción del formulario en la página, haz clic para expandir las Opciones de visualización del widget WPForms en el panel del lado izquierdo del creador de páginas.
Luego, activa las configuraciones para Mostrar el Nombre del formulario y la Descripción del formulario según tus preferencias.
También puedes cambiar la apariencia del formulario en el frontend en la pestaña Avanzado del creador de Elementor.
Para aprender a usar la configuración aquí, consulta la documentación de Elementor sobre opciones avanzadas de widgets.
4. Personalizar tu Formulario
WPForms se integra con Elementor y te permite personalizar la apariencia de tus formularios. Para empezar, navega a la pestaña Estilo desde el menú lateral de Elementor.
Nota: Si no ves la pestaña Estilo en tu pantalla de Elementor, deberás asegurarte de que la opción de marcado moderno esté habilitada en tu sitio. Consulta la sección Habilitar marcado moderno al principio de esta guía sobre cómo hacerlo.
La pestaña Estilo en Elementor te permite ajustar el estilo de los campos del formulario, las etiquetas y los botones sin necesidad de conocimientos de CSS. También encontrarás una opción para copiar estas configuraciones de estilo de un formulario a otro en la sección Avanzado.
Cubriremos cada una de estas opciones con más detalle a continuación.
Temas
La configuración Temas te permite elegir un tema de color predefinido para actualizar automáticamente el estilo de los campos, etiquetas, botones, contenedor y fondo de tu formulario.
Para aplicarlo, simplemente haz clic en tu tema preferido y ajustará instantáneamente los colores de los campos, etiquetas, botones, contenedor o fondo de tu formulario.
Si personalizas ajustes individuales después de seleccionar un tema, estos cambios se guardarán como un nuevo tema de formulario personalizado. Este nuevo tema se añadirá a tu lista de temas disponibles y se podrá aplicar a cualquier formulario como lo harías con cualquier otro tema de formulario.
También puedes renombrar este tema para una fácil identificación desde el campo Nombre del tema.
Para eliminar un tema de formulario personalizado, simplemente haz clic en el botón ELIMINAR TEMA debajo del nombre del tema.
Estilos de campo
En la opción Estilos de campo, verás configuraciones para Tamaño, Radio del borde y opciones de color para el Fondo, el Borde y el Texto.
Las configuraciones de Tamaño controlan el tamaño de cada campo en tu formulario. Las opciones disponibles incluyen: Pequeño, Mediano y Grande.
A continuación, encontrarás la configuración de Radio del borde. Esto cambia la redondez de las esquinas de tus campos: un número mayor significa esquinas más redondeadas.
A continuación, encontrarás opciones para actualizar los colores de Fondo, Borde y Texto de tus campos de formulario. Para cambiar los colores predeterminados, haz clic en el color adyacente a la etiqueta.
Esto abre un selector de color que te permite elegir el color deseado. Si tienes un color de marca específico para tus formularios, puedes introducir directamente el código de color en el campo HEXA. Aunque HEXA es la unidad predeterminada, también puedes cambiarla a RGBA o HSLA según sea necesario.
Estilos de etiqueta
En Estilos de etiqueta, verás opciones para ajustar el tamaño y los colores de las etiquetas de tu formulario. En el menú desplegable Tamaño, puedes elegir entre Pequeño, Mediano o Grande, según tu preferencia.
A continuación, encontrarás opciones para actualizar los colores de la Etiqueta, la Subetiqueta y ayuda y el mensaje de Error de tus campos. A continuación, hemos explicado las opciones de color disponibles.
- Etiqueta: Esta opción cambia el color del texto de tus etiquetas.
- Subetiqueta y ayuda: Esta opción controla el color de las subetiquetas y las ayudas de los campos que aparecen cuando WPForms sugiere valores a los usuarios en el frontend.
- Error: El color de los mensajes de error que se muestran si se produce un error cuando los usuarios completan tu formulario.
Estilos de botón
Los ajustes de Estilos de botón te permiten personalizar el estilo de tus botones. Para cambiar el tamaño del botón, haz clic en el menú desplegable Tamaño y selecciona la opción que deseas utilizar.
Para dar al botón bordes redondeados, simplemente introduce el valor en el campo Radio del borde.
A continuación, verás opciones para actualizar los colores de fondo y de texto de tu botón.
Nota: El color de fondo que establezcas para tu botón también se utilizará como color de acento predeterminado. Esto significa que el color del estado de enfoque para campos, barras de progreso, botones de opción y casillas de verificación utilizará el color de fondo del botón.
Estilos de contenedor
La configuración de Estilos del Contenedor te permite personalizar el relleno, el estilo del borde, el grosor del borde, el radio del borde, la sombra y los colores del contenedor de tu formulario. A continuación, hemos detallado las opciones del contenedor disponibles.
- Relleno: Esta opción establece el espacio dentro de los bordes del contenedor del formulario. Puedes aumentar o disminuir este valor para ajustar el espaciado alrededor del contenido de tu formulario.
- Borde (estilo): Este ajuste te permite elegir el contorno de tu contenedor, con opciones para un borde Sólido, Discontinuo o Punteado.
- Grosor del Borde: Determina el grosor del borde de tu contenedor. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a las necesidades de tu diseño.
- Radio del Borde: Ajusta la redondez de las esquinas de tu contenedor, añadiendo un borde más suave o más definido a la apariencia de tu formulario. La medida predeterminada es en píxeles (px) pero se puede modificar para adaptarse a tu estilo.
- Sombra: Elige el tamaño del efecto de sombra para tu contenedor para añadir profundidad al diseño de tu formulario, con opciones que van desde ninguna hasta grande.
- Borde (color): Actualiza el color del borde de tu contenedor para que coincida con tu tema visual, mejorando la estética general del formulario.
Estilos de fondo
Los ajustes de Estilos de fondo te permiten controlar la imagen y el color de fondo de tu formulario.
Para empezar, selecciona una fuente de imagen en el menú desplegable Imagen. Para imágenes ya subidas a tu sitio web o para subir nuevas, selecciona la opción Biblioteca de medios. Para explorar una selección más amplia de imágenes profesionales, selecciona la opción Fotos de stock.
Después de hacer tu selección, haz clic en la sección Elegir imagen para continuar.
Si seleccionas Biblioteca de medios en el menú desplegable Imagen, se abrirá la galería de medios de tu sitio web, lo que te permitirá elegir una imagen o subir una nueva. Si se selecciona Fotos de stock, se te presentará una selección de fotos de stock para elegir para el fondo de tu formulario.
Una vez que hayas seleccionado tu imagen, la sección Estilos de fondo ofrece opciones de personalización adicionales:
- Posición: Este ajuste te permite alinear tu imagen de fondo dentro del formulario seleccionando opciones como Arriba centro, Abajo centro y más para obtener la colocación perfecta.
- Repetir: Elige cómo se repite tu imagen de fondo. Las opciones son Sin repetición para una sola imagen, Mosaico para repetir la imagen en todo el fondo, Repetir horizontal para repetir a lo ancho y Repetir vertical para repetir a lo largo.
- Tamaño: Esto ajusta cómo tu imagen de fondo encaja dentro del formulario. Cubrir asegura que la imagen cubra todo el fondo, adaptándose al tamaño del formulario. Si se selecciona Dimensiones, puedes especificar el ancho y alto exactos para tu imagen.
- Colores: Esta opción te permite seleccionar un color de fondo, que será visible cuando no se utilice ninguna imagen.
Estilos avanzados
En esta sección, puedes añadir cualquier clase CSS a tu formulario escribiendo el nombre de la clase en el campo Clases adicionales.
A continuación, encontrarás el código CSS que refleja todos los estilos que has añadido al formulario en Copiar / Pegar configuración de estilo.
Esta opción te permite copiar estilos de un formulario a otro.
Si has copiado la configuración de estilos de otro formulario, podrás pegarla rápidamente aquí. Después de pegar el fragmento de código, el formulario utilizará los estilos del formulario anterior.
Si deseas restablecer cualquier personalización que hayas añadido a tu formulario, haz clic en el botón Restablecer configuración de estilo. Esto restauraría tu formulario a su estado original sin ningún estilo personalizado.
Después de dar estilo a tu formulario, asegúrate de guardar tus cambios publicando la página o guardándola como borrador.
5. Publicar tu Formulario
Antes de publicar tu formulario, es una buena idea probarlo y asegurarte de que funciona como esperas. Nuestra guía sobre cómo probar correctamente tus formularios de WordPress antes de lanzarlos incluye una lista de verificación completa para ayudarte en este proceso.
Cuando estés listo para publicar tu formulario, haz clic en el botón Publicar o Actualizar en la parte inferior del constructor de páginas de Elementor.
¡Eso es todo! Ahora sabes cómo incrustar WPForms en una página usando Elementor.
A continuación, ¿desea mostrar u ocultar campos basándose en las opciones o la entrada de sus usuarios en sus formularios? Consulte nuestra guía sencilla para usar lógica condicional inteligente para obtener instrucciones sobre cómo implementarla.