Cómo modificar un formulario de contacto CSS 7

Escrito por jason whitaker
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo modificar un formulario de contacto CSS 7
(Comstock/Comstock/Getty Images)

El Formulario de Contacto 7 es un complemento para la plataforma de publicación WordPress. Le permite a los usuarios crear formularios de contacto personalizados de manera rápida en sus sitios web WP. Mientras que los formularios son fáciles de crear e implementar, los campos dentro de ellos tienen un estilo minimalista, lo que les permite integrarse en cualquier sitio web. Creando tu propio estilo puedes sobrescribir y aplicarlo a los campos dentro de los formularios generados por este complemento.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Acceso a la hoja de estilo de WordPress

Lista completaMinimizar

Instrucciones

  1. 1

    Abre la hoja de estilo de tu tema de WordPress y baja hasta el final de la página. Crea un área de comentarios para que puedas localizar tu código personalizado fácilmente. Aquí hay un ejemplo:/ Aquí es donde comienza mi código personalizado FC7 /

  2. 2

    Personaliza los estilos de tus campos de texto (text fields) y de las áreas de texto (text areas). Crea una entrada en tu hoja de estilo para los campos de texto y las áreas de texto en tu formulario FC7. Aquí hay un ejemplo: .wpcf7 input[type="text"], .wpcf7 textarea {} Agrega bordes personalizados, fondos, botones, rellenos y tamaños a los elementos de texto. Aquí hay algunas muestras: .wpcf7 input[type="text"] {background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #8E9BA9; padding: 5px; width:200px;}

  3. 3

    Personaliza los estilos de tus menúes desplegables y de selección (select). Crea una entrada en tu hoja de estilo para los menúes de selección en tu formulario FC7. Aquí hay un ejemplo: .wpcf7 input[type="select"] {} Haz un estilo para tus campos de selección similar al de tus campos de texto. Los campos de selección no aparecen tan grandes como los campos de texto, por lo que tendrás que agregar un par de pixeles extra a su anchura. Aquí, un ejemplo: .wpcf7 input[type="select"] { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #8E9BA9; padding: 5px; width:210px;}

  4. 4

    Personaliza los estilos de tu botón de enviar (submit). Crea una entrada en tu hoja de estilo para el botón de enviar en tu formulario FC7. Aquí hay un ejemplo: .wpcf7 input[type="submit"] {}. Haz un estilo para el botón de enviar para complementar la apariencia de tu sitio web, mientras que sigue destacando del fondo de tu formulario. Aquí hay un ejemplo de un botón de enviar rojo: .wpcf7 input[type="submit"] { background-color: #990000; border: 4px solid #B34040; color: #FFFFFF; }

  5. 5

    Guarda los cambios en tu hoja de estilo y súbelos a tu carpeta de temas.

Consejos y advertencias

  • Experimenta con bordes de diferentes colores y estilos.
  • Comprueba tus formularios en Firefox, Safari e Internet Explorer ya que cada navegador interpreta los campos de entrada (input) de manera ligeramente diferente.
  • Añade el CSS personalizado a la hoja de estilo de tu tema, no a la hoja de estilo para el complemento. Cuando el complemento se actualiza, puede que pierdas la personalización de los archivos de esa carpeta.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles