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]
Related Articles
كتاب الروح لابن القي…
best projectors for home
Design Tips for a Tranquil Bedroom Re…
OnePlus Nord CE: 4 Variants Leaked Be…
Vencedores dos “Prémios Angola 35 …

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.