El Formulario de contacto 7 Elemento de Master Addons es un widget especializado que se utiliza para integrar y diseñar formularios creados utilizando el popular complemento Formulario de contacto 7 dentro de su Diseños elementales. Esto le permite aprovechar la sólida funcionalidad de CF7 y al mismo tiempo obtener una potente personalización visual a través de Elementor.
Usando el Elemento Formulario de Contacto 7, puedes:
- Seleccionar cualquier formulario del Formulario de contacto 7 existente desde un menú desplegable.
- Elija entre múltiples Variaciones de diseño (Estilo uno a través de Estilo Once).
- Controlar la visibilidad de Mensajes de error y Errores de validación.
- Personaliza completamente el Contenedor de formulario, Campos de entrada y área de texto, Etiquetas, y el Botón Enviar para Normal y Flotar estados.
- Estila la exhibición de Mensajes de error y validación.
Entonces, veamos cómo agregar y personalizar este elemento.
¿cuál es el widget del formulario de contacto 7 en Elementor? #
El widget Formulario de contacto 7 Elementor es un elemento de complementos maestros que muestra cualquier formulario de Formulario de contacto 7 existente dentro de Elementor y le brinda control visual total sobre su diseño. Mantiene a CF7 manejando la lógica del formulario y la entrega de correo electrónico, mientras diseña el contenedor, los campos de entrada, las etiquetas, el botón de envío y los mensajes de error desde la pestaña Estilo de Elementor. Master Addons envía once ajustes preestablecidos de diseño (Estilo uno a cuatro en el complemento gratuito, Estilo cinco a once en Pro), para que pueda rediseñar un formulario CF7 simple para que coincida con su sitio sin escribir ningún CSS. Es parte del gratis Widgets y extensiones de complementos maestros biblioteca. Para obtener una descripción general y una comparación con CSS y el widget Elementor Pro Form, consulte Formulario de contacto 7 Widget Elementor página.
Agregar y configurar el elemento del formulario de contacto 7 #
Para agregar un formulario de formulario de contacto 7 con estilo en Elementor: edite su página con Elementor, arrastre el Formulario de contacto 7 widget en el lienzo, seleccione su formulario en el menú desplegable, elija una variación de diseño (los estilos uno a cuatro son gratuitos), luego ajuste el contenedor, los campos, las etiquetas y el botón de envío en el archivo Estilo pestaña. Los pasos a continuación recorren cada parte en detalle.
Siga estos pasos para agregar y configurar el Elemento del Formulario de contacto 7 en cualquier página de su sitio web.
Paso 1: cree o edite una página #
- Desde su panel de WordPress, vaya a Páginas → Agregar nuevo para crear una nueva página. También puede seleccionar una página existente y hacer clic Editar.
- A continuación, haga clic en “Editar con Elementor” botón.
Paso 2: busque el elemento Formulario de contacto 7 #
- En el panel Elementor de la izquierda, use la barra de búsqueda para encontrar “Formulario de contacto 7.”
- Arrastre y suelte el complemento en la sección deseada de la página.
Paso 3: personalice la configuración del formulario de contacto 7 #
Después de colocar el complemento, encontrará las secciones de personalización en el panel izquierdo, principalmente debajo Contenido y Estilo pestañas.
Pestaña Contenido #
Aquí es donde selecciona el formulario y define la visibilidad del error.
Formulario de contacto 7: #
- Selectați formul de contact: Elija el formulario de contacto 7 específico que desea mostrar de la lista desplegable.
- Estilo de errores (Mensajes de error / Errores de validación): Elija si desea Mostrar o Ocultar los avisos en campos individuales (Mensajes de error) y el mensaje de validación a nivel de formulario (Errores de validación).
Diseño: #
- Variaciones de diseño: Seleccione un estilo prediseñado para el formulario (Estilo uno a través de Estilo Once).
Pestaña Estilo #
Aquí es donde controlas la apariencia visual de la forma y sus elementos.
Conținutul formului: #
- Tipul de fundal: Establezca el estilo de fondo para todo el contenedor del formulario: Clásico o Degradado.
- Color superior del borde: Establezca un color para el borde superior del contenedor.
- Ancho del formulario (%) / Relleno del formulario: Controle el tamaño y el espaciado interno del contenedor de formulario.
Título: #
- Color / Alineación / Tipografía: Estilee el título de la forma (si hay una presente en la estructura CF7).
Área de entrada y texto: #
- Color de fondo / Color de texto: Establezca el fondo y el color del texto para todos los campos de entrada y área de texto.
- Relleno: Ajuste el espaciado interno de los campos.
- Ancho de campo (%): Establezca el tamaño horizontal de los campos.
- Tipo de borde / Radio de borde: Establezca el estilo del borde y las esquinas redondeadas para los campos de entrada.
Etiquetas: #
- Color / Tipografía: Diseñe el color del texto y la configuración de fuente para las etiquetas de campo.
Botón Enviar: #
- Tipografía de botones: Controle la configuración de fuente para el texto del botón.
- Normal / Flotar: Establezca lo siguiente para el botón en ambos estados:
- Tipo de fondo
- Color del texto
- Color del borde
- Radiu de border / Rellenar: Establezca las esquinas redondeadas y el espacio interior del botón.
Errores: #
- Mensajes de error (en campos): Diseñe los avisos que aparecen debajo de campos individuales, como un mensaje de campo requerido.
- Color del texto / Color de fondo / Tipo de borde.
- Errores de validación (forma completa): Diseñe el mensaje a nivel de formulario que se muestra cuando un envío no logra la validación.
- Color de fondo / Color de texto / Tipo de borde.
Paso 4: guarde y publique su página #
Una vez que hayas personalizado todo a tu gusto:
- Haga clic en “PublicarBotón ” (si es una página nueva) o “Actualizar” (si edita una página existente).
- Pruebe el envío del formulario y los mensajes de error en la interfaz para asegurarse de que todos los estilos se apliquen correctamente.
Preguntas frecuentes #
¿cómo peino el formulario de contacto 7 en Elementor?
Agregue el widget Master Addons Contact Form 7 a su página Elementor, seleccione su formulario en el menú desplegable y luego abra la pestaña Estilo. Desde allí puede rediseñar el contenedor del formulario, los campos de entrada y área de texto, las etiquetas, el botón de envío y los mensajes de error. También puede elegir un diseño preestablecido (cuatro son gratuitos, siete más vienen con Pro) para omitir el estilo manual.
¿el widget del formulario de contacto 7 es gratuito en los complementos maestros?
Sí. El widget Formulario de contacto 7 forma parte del archivo gratuito Widgets y extensiones de complementos maestros biblioteca. Sólo necesita el complemento gratuito Formulario de contacto 7 y los complementos maestros instalados y activos; no se requiere Elementor Pro. Style One a Style Four son gratuitos y Style Five a Style Eleven necesitan Master Addons Pro.
¿cuántos estilos de diseño del Formulario de contacto 7 incluye Master Addons?
Master Addons incluye once variaciones de diseño, etiquetadas del Estilo Uno al Estilo Once. Style One a Style Four son gratuitos y Style Five a Style Eleven necesitan Master Addons Pro. Elija uno en la sección Diseño de diseño para aplicar una apariencia completa al instante, luego ajuste colores, bordes y tipografía en la pestaña Estilo para que coincida con su marca.
¿puedo agregar un ícono de Font Awesome al botón de envío del formulario de contacto 7?
Sí. Más allá del estilo de botón incorporado en este widget, puede agregar un ícono al botón de envío siguiendo nuestra guía sobre cómo hacerlo aplique un ícono de Font Awesome dentro del botón enviar del formulario de contacto 7. Combina bien con los estilos de botones Normal y Hover que configuraste aquí.
¿por qué el estilo de mi formulario de contacto 7 no se muestra en Elementor?
Esto casi siempre es almacenamiento en caché o un conflicto de complementos. Confirme que tanto el formulario de contacto 7 como los complementos maestros estén activos, asegúrese de estar utilizando el widget del formulario de contacto 7 de los complementos maestros (no el código corto simple de CF7), luego purgue el caché de su página y vuelva a cargarlo. Mantener los activos ajustados también ayuda; consulte nuestros consejos para acelera tu sitio web Elementor.
