Cómo colocar los checkboxs de contact form 7 en vertical

Vamos a ver cómo colocar los checkboxs de contact form 7 en vertical, ya que el magnifico plugin de formularios de WordPress de forma normal los coloca en línea, algo que realmente es anti estético y que tiene bastante poca usabilidad, fastidiando totalmente la experiencia de usuario. (Ea ya he dicho un montón de palabros que están de moda en solo un parrafo).
Bueno vamos al lío que no me gusta enrollarme como ya sabéis…
De forma normal, cuando hacemos un checkbox con contact form 7 nos crea un shortcode similar a este en nuestro formulario:

1
[checkbox Opciones "Opcion 1" "Opcion 2" "Opcion 3"]
Lo que nos genera un código como este:
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>
 
Pero nos genera los checkbox uno al lado del otro.
Afortunadamente cambiar esto es muy sencillo, tan solo tenemos que introducir en nuestra hoja de estilos, o en el plugin simple custom css (que es el que yo uso), el siguiente código css:
1
2
3
4
span.wpcf7-list-item {
    margin-left: 0.5em;
    display: block;
}
De esta forma ya podemos colocar los checkboxs del contact form 7 en vertical. Espero que os haya servido de ayuda y si es así compartid en las redes sociales.

Comentarios

Publicar un comentario

Entradas populares de este blog

Como enlazar a una parte concreta de una página web

Imagen
En HTML4 y en HTML5 las diferentes etiquetas pueden tener un nombre concreto mediante un identificador . Por ejemplo, si entro en la parte de la edición HTML de este artículo puedo llamar “primerp” a este párrafo (<p>) que estoy escribiendo: <p id =”primerp”>. Que las etiquetas (sean <div>, <h2>, <p>…) estén denominadas de esta forma permite enlazar a ellas, pudiendo funcionar como ancla . Para conocer la utilidad de este atributo, tenemos que hacer primero como que hemos redactado un texto bastante largo. Párrafo – 3 Párrafo – 4 Párrafo – 5 Párrafo – 6 Párrafo – 7 Párrafo – 8 Párrafo – 9 Párrafo – 10 Párrafo – 11 Párrafo – 12 Párrafo – 13 Párrafo – 14 Párrafo – 15 Párrafo – 16 Párrafo – 17 Bien. Siempre hay dos pasos : denominar de alguna manera el párrafo al que queremos que se dirijan (id=”nombre”) y después poner un vínculo en la expresión que llevará hasta allí (<a href=”link#nombre”>Estas palabras tend
Leer más

Cómo añadir aceptación de términos y condiciones en Contact Form 7

Imagen
Esta es una parte importante si quieres cumplir la ley. Normalmente nadie te va a decir nada hasta que algún día pase y te arrepientas de no haberlo puesto. Ya verás que es muy sencillo. Aquí te mostraremos cómo lo tenemos en Weberas, del mismo modo que también verás cómo añadir Placeholder en Contact Form 7 y quitar los nombres encima de los campos del formulario. Tienes que dirigirte a tu formulario de contacto y editar el cuadro HTML donde están los campos que quieres poner. En nuestro caso: <div class="one-half"><label> [text* your-name placeholder "Nombre"] </label></div> <div class="one-half last"><label> [email* your-email placeholder "Email"] </label></div> <div class="one-half"><label> [text your-subject placeholder "Asunto"] </label></div> <div class="one-half last"><label> [tel* tel-503 placeholder "Teléfo
Leer más