Soporte » Plugins y Hacks » Personalizar formulario contact form 7

Personalizar formulario contact form 7

  • Gerard

    (@gerardlaya)


    hace 2 semanas

    Buenas días, estoy tratando de personalizar un formulario de contact form 7 con código css de una forma bastante chapuza. Alguien sabes cómo puedo hacer para que la configuración se aplique solo a un formulario y no a todos los de la web, y que sea menos ancho porque me ocupa mucho largo hacia abajo de la publicación. Gracias de antemano.
    Este es el código que he puesto pero no me ha servido más que para cambiar el fondo y la caja de texto: 

    .wpcf7 { 
  background-color: #A5EEFD;
  border: 2px solid #eee;    
  padding:10px 5px 5px 5px;
  -webkit-border-radius: 60px;  
  -moz-border-radius: 4px; 
  border-radius: 4px;
}
.wpcf7-textarea {
    max-width:1099px;height:42px!important
}
.wpcf7-submit{
background-color:blue!important;
color:white!important;
border: 2px solid red;
border-radius: 25px;
}
    • Este debate fue modificado hace 2 semanas por Jose Luis. Razón: Mover el debate al foro adecuado

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 1 respuesta (de un total de 1)
  • Moderador Jose Luis

    (@jose64)

    hace 2 semanas

    Hola.

    Bienvenido al foro de soporte. Con ese código modificas todos los formularios, en cada formulario tienes un ID que identifica el DIV que lo contiene que puedes visualizar con el inspector de elementos. Por ejemplo, en la página que indicas si revisas el código con el inspector de elementos del navegador verás el siguiente código:

    <div role="form" class="wpcf7" id="wpcf7-f4766-p4763-o1" lang="es-ES" dir="ltr">

    Si añades el id a la regla solamente se aplicará a ese formulario, no a todos, por lo que si añades este código el fondo rojo solo se aplicará a ese formulario específico:

    #wpcf7-f4766-p4763-o1.wpcf7 {
    background-color: red;
}

    Lo del ancho menor no lo entiendo, cuanto más estrecho sea el formulario más largo será y viceversa. Puedes cambiarlo añadiendo este código al CSS personalizado del tema:

    #wpcf7-f4766-p4763-o1.wpcf7 {
    background-color: red;
    width: 300px;
    margin: auto;
}

    Usando ese código el formulario tendrá 300px de ancho y estará centrado. En lugar de usar pixels puedes usar unidades relativas (porcentajes, rem, em)

    También tienes algún plugin en el repositorio que te permite darle estilos al formulario de forma más intuitiva, por ejemplo:

    Smart Grid-Layout Design for Contact Form 7

    Comenta si tienes alguna duda y, por favor, recuerda marcar el debate como resuelto cuando así lo consideres, de esta forma nos ayudas a mantener el foro al día.

Viendo 1 respuesta (de un total de 1)
  • Debes estar registrado para responder a este debate.

Vistas