WordPress – Contact Form 7 poner checkbox aliniados verticalmente

Publicada el por

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. Empecemos con WordPress – Contact Form 7 poner checkbox aliniados verticalmente.

Si miráis la documentación de ContactForm, para añadir en el Formulario el short code para listar checkbox es el siguiente:

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

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

<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. Se muestra horizontalmente y en muchas ocasiones puede ser que no nos interese este diseño..

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

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

Aconsejamos que si queréis cambiar el CSS de la plantilla de WordPress, lo hagáis en la opción personalizar de la plantilla. Normalmente, la mayoría de plantillas disponen en su personalización, más concretamente la última opción, la posibilidad de añadir CSS personalizado. De este modo, cada vez que se actualiza la plantilla, el CSS no es eliminado. Si lo hacéis sobre unfichero CSS, cabe la posibilidad de que se machaque con nuevas actualizaciones.

Esperamos que os sea de utilidad el artículo WordPress – Contact Form 7 poner checkbox aliniados verticalmente.

Más información


Artículos relacionados: