WordPress – Contact Form 7 poner checkbox aliniados verticalmente

En WordPress, el caso de que trabajéis con el plugin “Contact Form 7” y queráis añadir checkbox, veréis que estos se muestran uno al lado de otro. Os indico en este artículo como hacer para que los checkbox se muestren uno debajo del otro.

Para añadir en el Contact Form el short code para listar checkbox es el siguiente:

1
[checkbox Opciones "Opcion 1" "Opcion 2" "Opcion 3"]

Una vez se ‘renderiza’ la web, el código se transforma en:

1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="wpcf7-form-control-wrap Opciones">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
<span class="wpcf7-list-item">
<label><input type="checkbox" name="Opciones[]" value="Opcion 1" /> <span class="wpcf7-list-item-label">Opcion 1</span></label>
</span>
<span class="wpcf7-list-item">
<label><input type="checkbox" name="Opciones[]" value="Opcion 2" tabindex="1" /> <span class="wpcf7-list-item-label">Opcion 2</span></label>
</span>
<span class="wpcf7-list-item">
<label><input type="checkbox" name="Opciones[]" value="Opcion 3" tabindex="2" /> <span class="wpcf7-list-item-label">Opcion 3</span></label>
</span>
</span>
</span>

El problema, es que muestra los checkbox uno al lado del otro.

Para que se muestren los checkbox verticalmente (uno debajo del otro), modificamos nuestro CSS con el siguiente atributo:

1
2
3
4
span.wpcf7-list-item {
margin-left: 0.5em;
display: block;
}

Artículos relacionados

WPTouch – Tu blog en formato móvil Cuando tenemos un blog, se presenta un problema importante: si es visitado con un móvil se ve igual que en un navegador de PC y por lo tanto el conten...
WordPress – Actualizar WordPress sin configu... Podemos configurar nuestro WordPress para que a la hora de actualizar plantillas, plugins o el mismo wordpress sin necesidad de configurar una cuenta ...
Cambiar URL loguinación en WordPress Cuando instalamos nuestro WordPress en el servidor, para acceder como administrador debemos visitar la dirección: http://www.mipagina.com/wp-admin ...
WordPress – Sociable plugin para compartir e... Quisisera haceros llegar el que creo que es uno de los mejores plugins para wordpress, que permite compartir en las principales redes sociales los pos...

3 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*