Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Ejemplo del uso del bloque de columnas: una casilla de aceptación

CHECKBOX-COLUMNAS-1024x576 Ejemplo del uso del bloque de columnas: una casilla de aceptación

En este post práctico, de Gutenberg y FSE, vamos a ver cómo implementar una casilla de aceptación mediante el bloque de columnas y, para hacerlo sin código, el plugin Contact Form 7.

El bloque de columnas sirve para realizar diseños de rejillas. Una rejilla muy simple sería la que se muestra en la imagen siguiente.

aceptacion Ejemplo del uso del bloque de columnas: una casilla de aceptación

Se trata de una casilla (checkbox) de aceptación, similar al que se muestra en la web WP Audit. Permite simular las casillas de una checklist y el usuario puede hacer clic. Aurooba Ahmed lo implementó con CSS y HTML pero nosotros lo queremos llevar sin código. Para ello, emplearemos el plugin Contact Form 7 y el bloque de columnas.

Este es un ejemplo muy sencillo de uso del bloque de columnas. En la columna de la izquierda insertaremos el shortcode correspondiente a un formulario de Contact Form 7 muy simple (solamente el checkbox); y en la de la derecha, un texto.

Veamos un poco más en detalle, y con ayuda de unos GIFs, el proceso completo.

1. Creación del formulario con la casilla de aceptación (checkbox)

CHECKBOX-COLUMNAS-1 Ejemplo del uso del bloque de columnas: una casilla de aceptación

En el GIF se observa, que para crear el formulario de Contact Form 7 solo hay que insertar el checkbox, haciendo clic en el botón «Aceptación». Nos aseguraremos de que la casilla sea «opcional» en la configuración. Y no haremos caso al error en la pestaña de email, ya que no vamos a utilizar el formulario para contacto.

2. Creación de una página de prueba en la que insertaremos el formulario con el checkbox

CHECKBOX-COLUMNAS-2 Ejemplo del uso del bloque de columnas: una casilla de aceptación

Si te fijas en el GIF, verás cómo creamos una nueva página para probar el nuevo formulario de contacto creado en el paso 1. En realidad, no es un formulario de contacto. Utilizamos el plugin Contact Form 7 para crear una casilla de verificación sin código. Copiamos el shortcode del formulario en el portapapeles y lo pegamos dentro del bloque de shortcode que insertamos en la página.

El checkbox ha salido muy pequeño. No importa, podemos agrandarlo añadiendo código CSS en el apartado de CSS Adicional.

3. Cómo agrandar la casilla de verificación

CHECKBOX-COLUMNAS-3 Ejemplo del uso del bloque de columnas: una casilla de aceptación

En FSE, el personalizador de temas está oculto. Tendremos que acceder a él, escribiendo «tu-sitio/wp-admin/customize.php» en la barra de direcciones del navegador y entrando al personalizador.

Después, como se ve en el GIF, podré ir al «CSS Adicional» e introducir las instrucciones CSS que agrandan las dimensiones de la casilla de aceptación. Estas son:

input[type=»checkbox»]{margin-left:0px!important;
margin-right:20px!important;
-moz-transform: scale(3);
-webkit-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}

Para hacerlo más grande o más pequeño solo hay que alterar el valor del parámetro «scale».

Ahora, procederemos a crear una página para insertar un bloque de columnas, con lo que conseguiremos situar distintos títulos a la derecha de la casilla de aceptación. Igual que en WP Audit pero lo hemos hecho sin código 🙂

4. Uso del bloque de columnas para insertar la casilla de aceptación y un texto a su derecha

CHECKBOX-COLUMNAS-4-2 Ejemplo del uso del bloque de columnas: una casilla de aceptación

Lo primero que haremos, una vez añadidos los elementos en cada columna (shortcode del formulario en la de la izquierda y texto en la de la derecha) , es deshabilitar la opción de «apilar en móviles». Esta opción, sitúa una debajo de otra las columnas, en los dispositivos móviles. Pero eso no lo queremos hacer en este caso, para que el texto no quede debajo del checkbox.

También alteramos el ancho de la columna de la izquierda (a un 5% aproximadamente) para que el texto no quede demasiado separado de la casilla de aceptación.

Por lo demás, es posible que haya que desviar un poquito hacia abajo el checkbox porque al agrandar el texto, se descuadra. Simplemente añadimos el bloque espaciador y lo configuramos con una separación de 25px aproximadamente.

Conclusiones

Hemos visto un ejemplo muy sencillo de uso del bloque de columnas para implementar, sin código, una casilla de aceptación. Con ello, podríamos hacer algo parecido a lo que se muestra en WP Audit.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=70750) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido