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

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...
WordPress – WPML – Saber idioma activo Si tenemos instalado el plugin WPML en WordPress, encargado de traducir la página en diferentes idiomas, con código en nuestra plantilla podemos saber...
WordPress – Migrar de servidor Puede ocurrir dos cosas: que tengas wordpress en local y tengas que subirlo a producción, o que tengas que migrar WordPress de un servidor a otro serv...
WordPress – Plugins – WP Maintenance En muchas ocasiones necesitamos poner una pantalla temporal de "Trabajando" en nuestro WordPress mientras lo actualizamos o inicialmente cuando estamo...

3 comentarios

Deja un comentario

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

*