Como añadir COLUMNAS en Contact Form 7
Añade en tu CSS este código
/* 2 columnas para los formularios */
#responsive-form{
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
Ahora entra en tu formulario de Contact Form 7 y añade estos div en tus etiquetas.
Nombre [text* your-name]
Email [text* your-email]
Como cambiar el diseño del BOTÓN
Añade este código en CSS y cambia los parámetros a tu gusto
.wpcf7 input[type=submit] {
padding:15px 25px;
background:#0962a4;
color:#000000;
font-size:20px;
font-weight:bold;
text-tranform:uppercase;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Cambiar el estilo de RADIOBUTTONS
Añade este código CSS
/* Radio button styles*/
.wpcf7 input[type="radio"] {
position: absolute !important;
left: -9999px !important;
}
.wpcf7-radio span.wpcf7-list-item-label {
position: relative;
padding-left: 33px;
}
.wpcf7-radio span.wpcf7-list-item-label:before {
content: '';
background: #F7F7F7;
width: 15px;
height:15px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
border: 4px solid #cecece;
}
.wpcf7 input[type=radio]:not(old):checked + span:before {
background: red;
}
Cambiar los checkbox o radiobuttons y alinearlos verticalmente
Añade este código CSS
span.wpcf7-list-item {display: block;}
Cambiar el estilo de los PLACEHOLDER
Añade este código a CSS
/* Placeholder text styles */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #0962a4;
font-size:30px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #0962a4;
font-size:30px;
}
:-ms-input-placeholder { /* IE 10+ */
color: #0962a4;
font-size:30px;
}
:-moz-placeholder { /* Firefox 18- */
color: #0962a4;
font-size:30px;
}
Cambiar el estilo del MENSAJE DE GRACIAS
Añade este código a CSS
.wpcf7-response-output {
border:1px solid gray;
background-color:#ececec;
font-size:26px;
color:#0962a4;
border-radius:5px;
-webkit-border-radius: 5px;
padding: 20px;
}
Cambiar el estilo de uno de los campos
Añade en la etiqueta del campo un ID
[text your-email id:campo-importante]
Cambia en CSS ese campo a tu gusto
#campo-importante
{
color: red;
border: 1px solid #cccccc;
}
¿Necesitas algún tipo de cambio en el diseño de tu formulario? Escríbenos y te ayudaremos a resolverlo, además lo añadiremos en este artículo.