Cómo ajustar el Contact Form 7 del CSS

Contenido

• instrucciones
• consejos
• advertencia
• Qué necesitas

El Contact Form 7 es un plugin de la plataforma de publicación WordPress que permite a los usuarios crear rápidamente formularios de contacto personalizados. Aunque los formularios son fáciles de crear y de implementar, sus campos están minimamente personalizados, lo que permite la integración con cualquier sitio. Cree sus estilos personalizados e implemente en los campos de formularios generados por este plugin.

instrucciones

Personalice el estilo de los campos Contact Form 7 utilizando CSS (Comstock / Comstock / Getty Images)

1. Abra el stylesheet del tema de su WordPress y desplácese hasta el final. Cree un área comentada para que pueda localizar su código fácilmente. Ejemplo:

   / Aquí es donde mi código CF7 personalizado comienza /

2. Personalice los estilos de sus campos y áreas de texto. Para ello, cree una entrada en su stylesheet. Ejemplo:

   .wpcf7 input [type = "texto"], .wpcf7 areadotexto {}

   Añada bordes personalizados (bordes), fondos (fondo), espaciado y tamaños de los elementos del texto. Ejemplos:

   .wpcf7 input [type = "texto"] {background: none repeat scroll 0 0 # F9F9F9; border: 1px solid # 8E9BA9; padding: 5px; anchura: 200 píxeles; }

   
   

3. Personalice los estilos de los menús "drop-down" y de selección.Para ello, cree una entrada en su stylesheet. Ejemplo:

   .wpcf7 input [type = "select"] {

   }

   Personalice los campos de selección de forma parecida a los campos de texto. Los campos de selección no son tan amplios como los campos de texto, añada algunos píxeles adicionales a su ancho (width). Ejemplo:

   .wpcf7 input [type = "seleccionado"] {background: none repeat scroll 0 0 # F9F9F9; border: 1px solid # 8E9BA9; padding: 5px; anchura: 210px; }

4. Personalice el estilo de su botón de envío. Para ello, cree una entrada en su stylesheet. Ejemplo:

   .wpcf7 input [type = "envío"] {

   }

   Personalice el botón de envío para complementar el aspecto y la apariencia de su sitio (debe seguir destacando desde el fondo). Ejemplo de un botón de envío rojo:

   .wpcf7 input [type = "envío"] {background-color: # 990000; border: 4px solid # B34040; color: #FFFFFF; }

   
   

5. Guarde los cambios en su stylesheet y transfiera los datos a la carpeta tema.

consejos

• Pruebe varios estilos y colores de borde diferentes.
• Haga una nueva comprobación de formularios en Firefox, Safari e Internet Explorer, ya que cada navegador proporciona campos de entrada ligeramente diferentes.

advertencia

• Agregue el CSS personalizado al stylesheet de su tema y no en el stylesheet del plugin. Si lo hace, cuando se actualiza el complemento, se puede perder la personalización de los archivos de la carpeta.

Qué necesitas

• Acceso al "stylesheet" de WordPress