Style forms with custom CSS guide
Define el estilo de los formularios con CSS personalizado para modificar la apariencia de los elementos del formulario directamente en tu sitio web. Puedes dirigirte a widgets de formulario y campos específicos para que coincidan con la marca y el diseño de tu sitio.
¿Por qué es importante definir el estilo de los formularios?
Personalizar los estilos de formulario mejora la consistencia con el diseño de tu sitio web, mejora la experiencia del usuario, y permite un mejor control sobre el espaciado, la alineación y la capacidad de respuesta.
¿Qué incluye la definición de estilos de formulario?
Puedes definir el estilo de:
- Todos los widgets de formulario usando
.form-widget - Instancias de formulario específicas usando
.form-widget-[FormID] - Campos de entrada individuales usando
.jsonform-error-[FieldID]
Design with AI
Acelera el proceso de diseño dejando que la IA genere un punto de partida para tu CSS.
- Abre tu formulario y ve a la pestaña
Design - Haz clic en
Design with AI - Sube una imagen de referencia (por ejemplo, tu sitio web) y agrega una instrucción como "Match form design to my website"
- Agrega instrucciones opcionales (por ejemplo, "Put first and last name on the same row")
- Revisa el CSS generado y pégalo/ajústalo en
Custom CSS
Consejo: usa los selectores CSS a continuación (por ejemplo, .form-widget, .form-widget-[FormID], .jsonform-error-[FieldID]) para dirigirte a áreas específicas al refinar los estilos generados por IA.
El CSS que generas aquí se guarda en el formulario en Design → Custom CSS y se aplica automáticamente cuando incorporas o compartes el formulario.
Cómo aplicar CSS personalizado
1. Localiza el ID del formulario o campo
Inspecciona los elementos de tu formulario en el navegador (clic derecho → Inspect) para encontrar:
- La clase
form-widget - El
form-widget-[FormID]específico - Los
jsonform-error-[FieldID]individuales para los campos de entrada
2. Agrega CSS personalizado
Ejemplo de CSS para alinear dos campos de entrada uno al lado del otro:
.jsonform-error-FieldID-211d398a-d905-43f8-a8e2-c1c952d4f5cc {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: calc(50% - 10px);
box-sizing: border-box;
}
.jsonform-error-FieldID-a1c64750-0a8e-457b-8575-bcada69db4a1 {
display: inline-block;
vertical-align: middle;
width: 50%;
box-sizing: border-box;
}
3. Aplica estilos al widget
.form-widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
padding: 32px;
margin: 48px auto;
border-radius: 12px;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.form-widget label {
display: block;
font-size: 14px;
font-weight: 500;
color: #ffffff;
margin-bottom: 6px;
}
.form-widget .form-group {
margin-bottom: 20px;
}
4. Estilo de campos de entrada
.form-widget input:not([type="submit"]):not(.pac-target-input),
.form-widget select,
.form-widget textarea {
display: block;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 14px !important;
padding: 10px 12px !important;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
color: #111827 !important;
box-shadow: none !important;
transition: border-color 0.2s ease, background-color 0.2s ease;
line-height: 1.4 !important;
}
5. Estados de enfoque y menús desplegables
.form-widget input:focus:not(.pac-target-input),
.form-widget select:focus,
.form-widget textarea:focus {
outline: none;
border-color: #0071e3 !important;
box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15) !important;
}
.form-widget select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
padding-right: 40px !important;
cursor: pointer;
}
.form-widget textarea {
min-height: 100px !important;
resize: vertical;
}
6. Estilo de botones
.form-widget .btn-primary {
background-color: #0071e3;
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 12px 16px;
width: 100%;
border: none;
border-radius: 10px;
cursor: pointer;
}
7. Capacidad de respuesta móvil
@media (max-width: 480px) {
.form-widget {
padding: 20px;
}
}
8. Guardar CSS en Divi
- Ve a tu panel de WordPress.
- Ve a
Divi→Theme Options→Custom CSS. - Pega el código CSS en el campo
Custom CSS. - Guarda tus cambios.
Asegúrate de usar los ID de widget y campo correctos para tu formulario específico.
Ajusta el espaciado, los anchos y otras propiedades según sea necesario para que coincidan con tus requisitos de diseño.
Preguntas frecuentes (FAQ)
¿Dónde encuentro el Field ID o Form ID?
Inspecciona el formulario usando las herramientas de desarrollo de tu navegador. Busca clases como .form-widget-xxxx o .jsonform-error-xxxx.
¿Puedo definir el estilo de campos de entrada individuales?
Sí. Usa .jsonform-error-[FieldID] para dirigirte a campos de entrada específicos.
¿Estos estilos se aplicarán a todas las páginas?
Sí, si se agregan a una hoja de estilos global o a las opciones de tema, los estilos se aplicarán en todo el sitio.
¿Qué sucede si no uso el ID correcto?
Los estilos no se aplicarán. Verifica dos veces los nombres de clase e ID de la estructura de tu formulario.
¿Necesito usar !important?
Usa !important solo si otros estilos están anulando los tuyos. Evita usarlo en exceso para prevenir conflictos.
¿Puedo definir el estilo de los campos de entrada de Google Places?
No. Los campos de entrada con la clase pac-target-input están excluidos de estos estilos.
¿Cómo agrego espaciado entre campos de formulario?
Usa margin-bottom o propiedades de diseño como display: inline-block o CSS Grid/Flexbox.
¿Esto es específico de Divi?
Este ejemplo usa Divi, pero las técnicas de CSS se aplican a cualquier plataforma de desarrollo de sitios web con acceso a estilos personalizados.