Como alinear horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

Inicio / Blog / Snippets / Como alinear horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

Autor: Jefferson M

Publicación: 22 Jun, 2022

En este tutorial gratuito te mostraremos como alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi.

Si quieres aprender a manejar el tema Divi de forma profesional, podrƔs aprender todo desde USD 10 al mes* desde aquƭ

Los botones de radio y los checkboxes del formulario de contacto de Divi se muestran en un diseƱo vertical y apilado por defecto siempre, esto ocupa un espacio valioso y no es Ćŗtil si se agregan mĆ”s un nĆŗmero importante de opciones en Divi. Es por ello que en este tutorial te mostraremos como alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi con un pequeƱo snippet de CSS y ademĆ”s, como configurar el nĆŗmero de columnas en los que queremos que se muestren los botones de radio o checkboxes.

ƍndice

Mira el resultado:

Antes:

DespuƩs:

Paso 1: Construye un formulario de contacto en Divi

Este paso seguramente ya lo tienes realizado, pero para quienes no lo tienen aún realizado, lo explicamos rÔpidamente. En una pÔgina que quieras orientar para contacto o presupuesto de diseño web, por ejemplo, crea un formulario de contacto con Divi.

Para ello solo debes usar el módulo de formulario de contacto de Divi y crear los campos necesarios. Explicamos un poco mÔs de esto en la lección de nuestro curso de Divi donde hablamos mÔs sobre como crear un formulario de contacto en Divi.

Importante: Los checkboxes y botones de radio deben tener la configuración del campo de anchura completa para que funcione el snippet que vamos a utilizar.

Paso 2: Coloca una clase particular al formulario de contacto

Para poder alinear de forma horizontal los checkboxes y botones de radio debemos primero aplicar una clase particular al formulario de contacto para hacerlo “inline” o en lĆ­nea, la clase es: checkboxes-radio-buttons-inline checkboxes-radio-buttons-columns (colocar ambas clases separadas por un espacio)

Esta clase CSS debes colocarla en el módulo de formulario de contacto > avanzado > Clases CSS y ID. Una vez que esté identificado el formulario de contacto, podremos aplicar el CSS personalizado que harÔ que podamos alinearlo de forma horizontal.

Paso 3: Aplicar el snippet CSS

Ahora procedemos a aplicar el siguiente snippet.

/*Hacer los botones de radio y checkboxes inline*/
.checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
	display: inline-block;
	margin-right: 30px;
}

/*Desplegar botones de radio y checkboxes en 2 o mƔs columnas*/
.checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
	display: flex;
	flex-flow: row wrap;
}
.checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
.checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
	flex-basis: 40%;
}

Recuerda que si quieres que el snippet CSS se aplique en todo el sitio, debes pegarlo en Divi > opciones del tema > General > CSS personalizado. Sin embargo, si quieres que este snippet CSS se aplique solo a la pÔgina en cuestión donde tienes el formulario de contacto en Divi, puedes aplicarlo en Opciones de la pÔgina > Avanzado > CSS Personalizado.

Si quieres que este código se aplique solo para ciertos dispositivos, puedes colocar el CSS dentro de las etiquetas correspondientes y usar el código desde un módulo de código solo en ciertos dispositivos (ver video)

Este sería el código a usar:

<style>
/*Hacer los botones de radio y checkboxes inline*/
.checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
	display: inline-block;
	margin-right: 20px;
}

/*Desplegar botones de radio y checkboxes en 2 o mƔs columnas*/
.checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
	display: flex;
	flex-flow: row wrap;
}
.checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
.checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
	flex-basis: 40%;
}
</style>

Cambia el valor del porcentaje en “flex-basis” para modificar el nĆŗmero de columnas que quieres que se muestren de forma horizontal los botones de radio y checkboxes. Puedes revisar estos detalles viendo el videotutorial completo.

”Y Listo! Con ello lograrÔs alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

0 comentarios

Enviar un comentario

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

Iniciar Sesión

ĀæNo tienes cuenta? Registrarse

Otros planes

”Accede a mÔs de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD šŸ”„

$US 18/ Mes

*Pagando US$ 54 cada 3 meses



¿A qué accedes con este plan?

Lifetime

Un solo pago šŸ”„

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA



¿A qué accedes con este plan?

Con este plan accedes a:

  1. āœ… Todos los cursos
  2. āœ… Todos los tutoriales prĆ©mium
  3. āœ… Todos los plugins y layouts
  4. āœ… Soporte prĆ©mium vĆ­a email
  5. āœ… Acceso a la comunidad en Discord

Con este plan accedes a:

  1. āœ… Todos los cursos
  2. āœ… Todos los tutoriales prĆ©mium
  3. āœ… Todos los plugins y layouts
  4. āœ… Soporte prĆ©mium vĆ­a email
  5. āœ… Acceso a la comunidad en Discord
  6. āœ… Descuentos en Templates para Divi

Solicitud de cancelación de suscripción



Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderÔs el acceso a todo esto:

🚩 A mÔs de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

āœ… Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y asĆ­ no perderĆ”s el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudarÔ a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuÔl o cuÔles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿CuÔl es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

ĀæEn esta escala que tanto recomendarĆ­as a UXDIVI a un amigo o colega? donde 1 es "no lo recomendarĆ­a" y 5 es "Lo recomendarĆ­a totalmente"

12 + 4 =