¿Le gustaría personalizar un formulario de contacto 7 con el complemento Complementos esenciales de Elementor?
El formulario de contacto 7 es uno de plugins de WordPress de los creadores de formularios más populares. Es totalmente gratis y puedes usarlo para crear un formulario de contacto en tu sitio web de WordPress.
También puede crear muchos tipos de formularios, como un formulario de reserva o un formulario de carga de archivos. Ofrece 14 tipos de campos que puede usar al crear un formulario.
Ver también: Cómo usar widgets/plantillas de Elementor como bloques de Gutenberg
Uno de los problemas comunes con el complemento del formulario de contacto 7 es su proceso de personalización. Contact Form 7 utiliza el estilo predeterminado de su tema de WordPress activo. Puede usar un estilo diferente, pero se requerirán habilidades de CSS. Si no tiene conocimientos de CSS, puede utilizar el módulo Complementos Esenciales para darle estilo a tu formulario.
Essential Addons es un complemento de Elementor que mejora el proceso de personalización de sus formularios Contact Form 7 con Elementor. Elementor y Essential Addons son complementos freemium. Puede usar las versiones gratuitas de ambos para diseñar sus formularios Contact Form 7.
Cómo diseñar un formulario de contacto 7 con complementos esenciales
Antes de comenzar a diseñar sus formularios, asegúrese de haber instalado Elementor et Complementos Esenciales. Una vez instalado y activado, crea una nueva página (Páginas – > Agregar) y edítelo con Elementor.
Antes de comenzar el proceso de personalización, configure el diseño de la página haciendo clic en el ícono de ajustes en la esquina inferior izquierda. Establece el diseño desde el menú desplegable.
Agregue una nueva sección haciendo clic en el ícono más en el cuadro de edición y arrastrando el widget Formulario de contacto de EA 7 desde el panel izquierdo en el editor.
Vaya al panel izquierdo y seleccione el formulario cuyo estilo desea personalizar.
Después de seleccionar un formulario, vaya a la pestaña Estilo. Como puede ver, puede configurar varias opciones de estilo. Estas son las opciones de estilo comunes que puede configurar.
- Ancho del formulario, alineación y fondo
Bajo el bloque FormularioContenedor, haga clic en el selector de color en la sección tipo de fondo y establezca el color deseado para el fondo del formulario. Puede usar un color sólido o un color degradado como fondo.
Lea también: Elementor: Cómo importar o exportar plantillas
Para configurar la alineación del formulario, simplemente seleccione su opción de alineación preferida en la sección Alineación de formularios.
Para establecer el ancho del formulario, establezca el valor del Ancho máximo del formulario en el campo Anchura máxima del formulario.
- Campo de fondo, ancho y radio del borde
Para definir el fondo de los campos, el ancho y el radio del borde, puede abrir la sección Entrada y área de texto. Haga clic en el selector de color de campo Color de fondo para establecer el fondo.
También puede establecer el color de fondo de los campos en modo de depuración haciendo clic en la pestaña ENFOQUE.
Para definir el ancho de los campos, puede definir el valor en los campos Ancho de entrada. En esta sección también puede establecer el ancho del campo del cuadro de texto en Ancho del área de texto.
Para establecer el radio del borde, simplemente edite el campo Radio de frontera y establezca el valor de borde que prefiera. También puede configurar la tipografía (familia de fuentes, tamaño de fuente, estilo de fuente) haciendo clic en el ícono de lápiz en el campo tipografía.
- Etiquetas
Essential Addons también le permite personalizar el estilo de las etiquetas de sus formularios. Puede establecer el color del texto, así como la tipografía. Para ello abre la opción Etiquetas. Establezca el color del texto haciendo clic en el selector de color en el campo Color del texto.
Para configurar la tipografía, haga clic en el icono de lápiz en el campo Tipografía.
- Botón de enviar
Para personalizar el estilo del botón Enviar, abra el bloque Enviar Button. Desde aquí puede configurar la alineación de los botones, el ancho, el color de fondo, el color del texto, el radio del borde y la tipografía.
- Mensaje de error
Para personalizar el estilo del mensaje de error, puede abrir el bloque Errores. Puede configurar el color del texto del mensaje de error, la tipografía, el color de fondo del error de validación, el color del texto del error de validación, etc.
Puede establecer varias otras opciones de estilo. Puede jugar con el panel izquierdo hasta que esté satisfecho con el estilo de su formulario.
Puede agregar varios otros elementos a su página utilizando los widgets disponibles que ofrecen Elementor y Essential Addons. Cuando haya terminado, haga clic en el botón PUBLICAR en la parte inferior del panel izquierdo para publicar su página.
Integrar el formulario en una página normal
Después de hacer clic en el botón PUBLICAR, su página de contacto básicamente ha sido publicada. La página en sí está impulsada por Elementor. Si prefiere agregar su formulario de contacto 7 a una página normal (una página creada con Gutenberg, el editor predeterminado de WordPress), puede instalar el complemento Bloques Elementor para Gutenberg. Este complemento convertirá una plantilla de Elementor en un bloque de Gutenberg.
para registrar su formulario de contacto 7 como plantilla de Elementor, haga clic en el botón de flecha al lado del botón PUBLICAR / ACTUALIZAR en el panel izquierdo y seleccione Guardar como plantilla.
Asigne un nombre a su plantilla y haga clic en el botón AHORRAR.
Crear una nueva página (Páginas – > Agregar) y asígnele un nombre como “contáctenos”, “contacto” o cualquier otro nombre que desee.
Agregue un nuevo bloque y seleccione Biblioteca Elementor y seleccione la plantilla de formulario de formulario de contacto que acaba de crear.
Y ahora acaba de personalizar su formulario Contact Form 7.
¡Consigue Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo personalizar un formulario de contacto 7 con complementos esenciales. Si tiene alguna inquietud sobre cómo llegar, hágaselo saber en el 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.
...
