Logo Wordpress

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 – 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 ...
Ataque a la fuerza en blogs WordPress Estos días se están produciendo ataques a la fuerza en blogs WordPress. Estos ataques consisten en intentar entrar al blog con usuarios y contraseña h...
WordPress – Limitar el número de revisiones A la hora de modificar post y páginas de wordpress, éste, se encarga de hacer copias de seguridad (revisiones) para poder ir recuperándolas en caso de...
WordPress – Permitir acceso a WP-Admin sólo ... Hay varios niveles de seguridad que pueden implementarse en WordPress. Desde la instalación de plugins que se dedican a ello, hasta la restricción del...