Cómo personalizar el estilo de contacto del formulario 7 para que se ajuste a su sitio web

Con más de un millón de instalaciones activas, el Formulario de contacto 7 es, con mucho, uno de los complementos de WordPress más populares. Su popularidad probablemente tiene mucho que ver con la verdad detrás de su descripción: “Simple pero flexible”. El formulario de contacto 7 le permite crear más formularios de contacto utilizando algo más que un marcado HTML simple (que genera para usted). Una vez creado, cada formulario se puede implementar rápidamente colocando el código corto correspondiente donde desea que aparezca el formulario; En la página, publicación o área de widgets. Los mensajes enviados a través de los formularios se envían a la dirección de correo electrónico proporcionada en la configuración del complemento, y el spam se libra por asistencia para Captcha y Akismet.
El Formulario de contacto 7 es tan simple que parece literalmente que cualquiera puede usarlo de manera efectiva. Y el estilo está destinado a ser simple. Pero tal vez sea demasiado simple para algunos. Por defecto, el Formulario de contacto del complemento 7 no da forma a sus formularios. Cualquier estilo que tengan es el resultado de los estilos predeterminados presentes en la hoja de estilo de un tema de WordPress. Por lo general, resulta en algo simple, como este:

Desafortunadamente, este tipo de forma, aunque simple y flexible, puede no estar tan bellamente diseñado como los otros elementos en el sitio web. Dejando a muchos otros usuarios felices que buscan alternativas al Formulario 7 de contacto con varias opciones de estilo. Afortunadamente, sin embargo, con solo un poco de CSS, no se requiere alternativa al complemento.
En la publicación de hoy compartiré una serie de consejos que abrirán una amplia gama de posibilidades de estilo de contacto Formulario 7 para cualquier persona, utilizando cualquier tema. Cómo personalizar el estilo del Formulario de contacto 7 para que se ajuste a su sitio web. Suscríbase a nuestro canal de YouTube donde editar su formulario de contacto 7 CSS (y por qué) es importante que al agregar CSS no se agregue a la hoja de estilo del formulario de contacto 7 o el tema principal. Cualquier cambio o adición que realice allí se sobrescribirá tan pronto como se actualice el tema y / o el complemento. En su lugar, querrá agregar el CSS a continuación al CSS de su hijo. También puede usar la función CSS personalizada en JetPack o , si su tema ofrece una sección en su panel de administración CSS personalizado, también puede usarla. Ok, ahora que sabemos dónde colocar los estilos que iremos debajo, ¡comencemos! Cómo crear estilos de formularios en el sitio Comienza haciendo algunas ediciones generales que se aplicarán a todo el formulario. Podemos hacer esto usando el selector de clase .WPCF7 y luego agregar estilos debajo. (También me gustaría sugerirle que coloque el título comentado que escribí a continuación en la hoja de estilo para indicar dónde comienza su formulario de contacto 7).
/* Formulario de contacto 7 estilos
——————————-*/
.wpcf7 {
Color de fondo: #F0F0F0;
Borde: 5px Solid #666666;
}
Después de agregar el código anterior a la hoja de estilo, cada forma que cree con el Formulario de contacto 7 tendrá el fondo y los estilos de borde que acaba de definir. A continuación se muestra un ejemplo. Después de ver, hay algunos problemas de separación. Para remediar esto, querrá ajustar los bordes entre el borde y los elementos interiores. Puede hacer esto con el código a continuación..wpcf7-form {
Margen-izquierda: 25px;

Margen-derecha: 25px;
margen-top: 25px;
En mi sitio de prueba, lo siguiente resultó:
Nota: Estos estilos pueden afectar sus formas de maneras ligeramente diferentes debido al hecho de que probablemente trabajemos con diferentes temas. Esto no significa que este código no funcionará para usted, pero solo que es posible que necesite cambiar un poco los números para hacer las cosas correctas. Las solicitudes que las personas tienen cuando se trata del estilo del Formulario 7 de contacto es la forma en que es la forma. Pueden ajustar el ancho del campo. Especialmente el área de mensajes que no se extienden muy lejos.
El siguiente código extenderá el área de mensaje al ancho deseado (cuando se ajuste). Establecí el mío en un ejemplo para el 95%, porque esto se veía mejor en mi uso imaginado. También puede configurarlo para satisfacer sus necesidades: usando un porcentaje o un número fijo de píxeles..WPCF7 -Text {

Ancho: 85%;
}
Puede ajustar y el ancho de los otros campos ajustando el selector de clase de entrada ..wpcf7 Entrada {
Ancho: 50%;
}
Si no desea ajustar todos los campos introductorios con los mismos criterios, puede describir un poco seleccionando solo a quienes le interesan. En el ejemplo a continuación, elegí cambiar mis campos de texto, por lo que mi botón de envío tampoco se ve afectado … WPCF7-Test {
Ancho: 50%;
}
Después de todos los cambios anteriores, pude modelar el formulario que ve a continuación.
Personalmente, no quería cambiar el color de mi botón, pero creo que es muy probable que sea otro deseo común. Entonces, si desea cambiar el color del botón, puede usar CSS a continuación para experimentar..WPCF7-SUBMIT {
Antecedentes: #555555;
Color: #ffffff;


}
Con estos bits CSS en su lugar, cada forma creado con el Formulario de contacto 7 se verá como la imagen final anterior. Pero, ¿qué sucede cuando quieres que una forma se vea especialmente diferente de todos los demás?
Cómo estilizar una forma específica mediante la obtención de la ID de CSS específica necesaria para hacer ediciones de estilo en una determinada forma puede ser un poco inquietante, pero es posible con una pequeña disposición. Lo primero que desea hacer es agregar el código de formulario corto a su sitio y obtener una vista previa. (Notará que en este código corto hay un número para ID, pero esta no es en realidad la identificación completa que necesitará). Luego, utilizando la función de inspección de los elementos de Google Chrome o algo similar en otro navegador, eche un vistazo al Código de formulario. Usando esto encontrará la identificación del formulario.
En mi caso, el número de identificación en mi código corto fue 4407. Se ha demostrado que la ID completa es WPCF7-F4407-P4405-O1. Lo que significaba que podía hacer cambios adicionales, solo en esa forma específica, utilizando el código a continuación con diferentes criterios que difieren de la configuración de mi sitio.
Borde: 5px Solid #0074A2;
}
Cómo estilizar campos específicos Puede hacer lo mismo con campos específicos. En lugar de ver una clase o identificación CSS en particular en su navegador, todo lo que tiene que hacer es agregarlo al generador de formulación.
Cuando genere una etiqueta para colocarla en el generador de formulación, notará que hay dos opciones para crear una identificación, una clase o ambas.
En este ejemplo, elegí crear una clase llamada Custom-Field. Si hace lo mismo (o algo similar) podrá estilizar solo ese campo usando su nueva ID (o clase) como tenemos a continuación.#Campo personalizado {
Color: #ffffff;
Borde: 2px Solid #3333333;
}

Cómo crear modelos de formulario personalizados para cuadros de selección y botones radiales de forma predeterminada, los cuadros de selección y los rayos se muestran de izquierda a derecha.
Pero debido a la preferencia personal o un caso de uso específico, en el que su pantalla de arriba a abajo podría ser preferible, puede usar una de las dos opciones a continuación. Para mostrar los cuadros de selección o los botones radiales de arriba a izquierda, use este … WPCF7 List-Litem {
Bloqueo de pantalla;
}
Para mostrar los cuadros de selección y los botones radiales de arriba a abajo, use esto. Además, asegúrese de que cuando genere la etiqueta para esta opción, elija el cuadro de selección “Etiqueta primero”. WPCF7-List-Litem {Display: Table-Row;

}
.wpcf7-list-weitem * {
Display: Table-Cel;

}
Consejo de bonificación: cómo eliminar los títulos de campo y usar el texto sustituyente Este consejo no requiere el uso de CSS como los demás anteriores, sino un mero cambio en el Formulario 7 de contacto de marcado. A veces no es necesario tener títulos de campo, especialmente cuando puede ingresar un texto sustituyente en los campos mismos, explicando a qué información pertenecen. Si este es el caso en su sitio, todo lo que tiene que hacer es eliminar los títulos en el entrenador de formularios y agregar texto de sustitución, como lo hice en el siguiente ejemplo.
[correo electrónico* su marcador de posición “dirección de correo electrónico”] [Textinidad su marcador de posición “Talk to Me”] El resultado es una forma más limpia, con menos trastorno.