Personalizar Contact form7

Walter

Respuestas: 359

Reputable Member

Topic starter

Translate ▼

Hola, estoy necesitando realizar la siguiente personalización en el tema Orbital

Necesito que el formulario de contacto se vea igual a la pagina original. Aunque copie el css que modificaba el contact form7 de la pagina original no logro los mismos efectos.

Pagina original estudiowls.com.ar/contacto

Clon: estudiowls.com.ar/clon/contacto

Les copio el css que usa la pagina original e intenté usar en el clon

.wpcf7-form { margin-left: 25px; margin-right: 25px; margin-top: 25px;

background-color: #4B4A50;
padding: 20px;
border: 3px solid #8B8B8B;
-webkit-box-shadow: 0px 5px 40px -1px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -1px rgba(0,0,0,0.57);
box-shadow: 15px 40px -1px rgba(0,0,0,0.57);
border-radius: 6px;
}
.wpcf7-form textarea::placeholder,
.wpcf7-form input::placeholder{
color:gray;
border-radius: 6px;
}
.wpcf7-form textarea,.wpcf7-form input{
color:white;
border-radius: 6px;
}
.wpcf7-form textarea, .wpcf7-form input {
color: white;
border: solid 1px white;
border-radius: 6px;
}
@media (max-width:720px){
.wpcf7-form{
margin: 20px 0px 0px 0px !important;
}
}

@media (max-width:480px){
.wpcf7-form{
padding:8px;
}
}
@media screen and (max-width: 600px) {
textarea.wpcf7-form-control.wpcf7-textarea, input.wpcf7-form-control.wpcf7-text {
font-size: 11px;
line-height: 1.5em;
}
}
.wpcf7-form-control.wpcf7-submit {
background-color: #000000;
color: #F5FFFA;
}

Gracias!!

Contenido solo visible a usuarios registrados

Respondido : 03/01/2021 3:59 am

Pepe

Respuestas: 42239

Illustrious Member Admin

Translate ▼

Hola Walter.

Prueba con lo siguiente:


input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]), textarea, select {

background-color: #4B4A50;
}


input, button, select, textarea {
font-size: 10px;
color:#fefefe;
}

Un saludo

Respondido : 03/01/2021 5:04 pm

Walter

Respuestas: 359

Reputable Member

Topic starter

Translate ▼

@pepesoler Gracias Pepe!

Tuve que poner el texto en 13px y no entrá en el recuadro, como podria hacer que el recuadro se ajuste al contenido?

Respondido : 03/01/2021 6:44 pm

Jhon

Respuestas: 44954

Illustrious Member Moderator

Translate ▼

Hola

Para que el diseño del formulario de contacto quede similar a tu web inicial puedes gregar el siguiente código CSS:

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{
color: #f0f0f0;
opacity: 1; 
}

.wpcf7-form-control.wpcf7-submit{
padding:10px;
}

.wpcf7-response-output{
color:white;
padding:10px!important;
}

Saludos.

Respondido : 03/01/2021 8:05 pm

Walter

Respuestas: 359

Reputable Member

Topic starter

Translate ▼

@pepe muchas gracias, ahora si funcionó!

Respondido : 04/01/2021 1:27 am

[Resuelto] Personalizar Contact form7