Desea que sus formularios sean lo más fáciles de completar posible. Ahí es donde entran las casillas de verificación.
Las casillas de verificación hacen que suscribirse a un boletín informativo o realizar otras acciones en su sitio sea tan fácil como marcar una casilla. También pueden permitir a los usuarios seleccionar una o más opciones de una lista. Esto le permite preguntar a los visitantes cómo se enteraron de su marca, cuáles son sus intereses y otras preguntas complejas, sin tener que escribir respuestas largas.
También permite a los visitantes realizar acciones más complejas, como suscribirse a varios boletines al mismo tiempo. Aquí hay un ejemplo de un formulario de HubSpot que hace exactamente esto con casillas de verificación.
Ahora que comprende los beneficios de usar casillas de verificación, cubramos todo lo que necesita saber sobre cómo crearlas en HTML.
Introducir la casilla de verificación HTML
En HTML, la casilla de verificación es
<input type="checkbox">
La casilla de verificación generalmente también incluye un atributo de nombre y valor. Este par de nombre/valor se enviará al servidor después de enviar el formulario.
Por ejemplo, suponga que un formulario con casillas de verificación le pregunta cómo alguien se enteró de su empresa. En este caso, el atributo de nombre de cada elemento de entrada puede ser «fuente». Instagram puede ser uno de los atributos de valor del elemento de entrada. Entonces, los datos enviados al servidor tendrán la forma de «fuente = instagram».
Si no se especifica el atributo de valor, el valor informado se habilita de forma predeterminada.
Veamos algunos ejemplos de casillas de verificación a continuación, comenzando con este video.
Ejemplo de casilla de verificación HTML
Suponga que desea preguntar a los visitantes cómo se enteraron de su negocio. Desfilepor ejemplo, incluye este formulario en su página de confirmación de pedido.
Puede crear algo similar con la casilla de verificación HTML. En el siguiente ejemplo, el usuario puede seleccionar una o más opciones de una lista.
ver la pluma Ejemplo de casilla de verificación HTML de Christina Perricone (@hubspot) en CódigoPen.
Casilla de verificación HTML seleccionada
Muchas empresas de comercio electrónico muestran una casilla de verificación de consentimiento de correo electrónico que se selecciona previamente durante el proceso de pago. Tome el formulario de pedido en fiesta de nobullpor ejemplo.
Puede codificar la casilla de verificación que se preseleccionará en la carga de la página utilizando el atributo lógico probado. Solo necesitas agregar una palabra comprobado en la etiqueta de apertura del elemento de entrada.
Este es un ejemplo de una casilla de verificación que está activada de forma predeterminada:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Se requiere casilla de verificación HTML
Al usar un atributo booleano diferente, puede codificar la casilla de verificación requerida. Esto significa que el usuario no podrá enviar el formulario hasta que marque esta casilla. Este atributo a menudo se aplica a una casilla de verificación para aceptar los términos del servicio.
Por ejemplo, AWS requiere que los usuarios lean y acepten los términos del Acuerdo de cliente de AWS. Si esta casilla no está marcada, no pueden continuar con el proceso de registro.
Puede crear algo similar usando el atributo booleano requerido. En el siguiente ejemplo, si hace clic en un botón sin seleccionar una casilla, obtendrá el mensaje de error «Marque esta casilla si desea continuar».
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
El tamaño de la casilla de verificación HTML
Suponga que desea cambiar el tamaño de una casilla de verificación. Puedes hacer esto usando dos métodos diferentes.
El primer método es establecer las propiedades de ancho y alto en CSS. En el siguiente ejemplo, configuré el ancho y el alto de la casilla de verificación en 10 px. Esto hace que la casilla de verificación sea más pequeña que su tamaño predeterminado, que en Chrome es de alrededor de 13 por 13 píxeles.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
El segundo método es usar la propiedad de transformación CSS. Específicamente, usará el método de escala () para cambiar el tamaño de la casilla de verificación. Cada valor entre paréntesis aumentará o disminuirá el tamaño de la casilla de verificación en un múltiplo de su tamaño original. Este método funciona en todos los principales navegadores, incluido Mozilla Firefox. En el siguiente ejemplo, configuré la propiedad de transformación a escala (1.5) para que sea una vez y media su tamaño predeterminado.
ver la pluma El tamaño de la casilla de verificación HTML [Transform Property] de Christina Perricone (@hubspot) en CódigoPen.
Estilo de casilla de verificación HTML
Puede diseñar la casilla de verificación HTML con CSS personalizado. Esto requerirá varios conjuntos de reglas, ya que debe ocultar la casilla de verificación predeterminada del navegador y luego crear una casilla de verificación personalizada, así como una marca de verificación personalizada. Pero el resultado puede hacer que sus formularios se vean más consistentes con su marca.
Por ejemplo, el formulario de pedido de Natación MBM contiene una casilla de verificación que se vuelve negra cuando el usuario hace clic en ella.
Puede crear un efecto similar en su sitio web. Este es un ejemplo de una casilla de verificación personalizada con bordes redondeados que se vuelve azul marino cuando se selecciona:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Casillas de verificación de codificación
Las casillas de verificación pueden ayudar a mejorar la experiencia del usuario al completar formularios, lo que probablemente significará más conversiones en su sitio. La mejor parte es que son fáciles de codificar usando HTML y un poco de CSS.
