Enlaces CSS para personalizar los formularios

En MailChimp, puedes crear fácilmente un formulario de suscripción con hasta 30 campos personalizados. Así que además de la Email Address (Dirección de correo electrónico), puedes recopilar datos como "nombre" y "apellido" y "empresa" y "cargo." Utiliza CSS para personalizar la apariencia de tu formulario.

¿Qué es un CSS?

CSS (siglas en inglés para hojas de estilo en cascada) es un lenguaje de hojas de estilo diseñado principalmente para permitir la separación del contenido del documento (escrito en HTML o un lenguaje de marcado similar) de la presentación del documento, incluyendo elementos como colores, fuentes y diseño. Consulta esta introducción a CSS de la W3C.

Herramientas de desarrollo

Firebug es una extensión de desarrollo web para FireFox. Es una de las herramientas de desarrollo web más poderosas que existen. Para una información general de cómo funciona Firebug, consulta este artículo.

Barra de herramientas de IE Web Developer - Sorprendentemente, Microsoft ofrece un software similar que funcionará con Internet Explorer. (Todas las versiones). Consulta las Herramientas de desarrollo de Internet Explorer.

Google Chrome Web Inspector forma parte de las herramientas de desarrollo de Google Chrome. Parecido a Firebug, el web inspector es una herramienta para ver los elementos HTML asociados con un DOM.

Tabla de referencia

A continuación encontrarás una tabla que muestra los posibles enlaces CSS que te permitirán personalizar tus formularios.

Selector CSS Nombre/Tipo Descripción
#mc_embed_signup Elemento DIV Este elemento DIV se ajusta alrededor del formulario. Utiliza este selector delante de los siguientes otros selectores para garantizar que los estilos se apliquen. (Por ejemplo, #mc_embed_signup .mc-field-group)
#mc-embedded-subscribe-form Elemento FORM Utiliza este selector para establecer estilos en el elemento principal del formulario. Es útil para aumentar el relleno alrededor de los elementos del formulario.
div.mc-field-group Grupo campo Es el contenedor de cada etiqueta y combinación de entrada en los formularios con más de un campo. Utiliza esto para controlar el espaciado horizontal y vertical (relleno) entre las entradas. Algunos elementos .mc-field-group también tienen una clase .size1of2 que los reduce a mitad de tamaño para ajustar 2 por fila.
div.mc-field-group label Etiquetas Selector de etiqueta predeterminado. Utiliza esto para estilizar la mayoría de etiquetas de formulario.
div.mc-field-group input Entrada(s) Selector de entrada predeterminado. Utiliza esta opción para estilizar la mayoría de entradas de formulario.
div.mc-field-group select Menús desplegables Selector de selección (desplegable) predeterminado. Utiliza esto para estilizar todos los menús desplegables.
input.button Botón enviar Utiliza este selector para estilizar el botón enviar.

Elementos generales de formulario

Casillas de verificación y botones de radio

Selector CSS Nombre/Tipo Descripción
div.mc-field-group.input-group Elemento DIV Contenedor DIV principal para grupos de casillas/botones de radio.
div.mc-field-group.input-group strong Etiqueta negrita Se utiliza para estilizar la etiqueta del campo exterior de un grupo de casillas/botones de radio.
div.mc-field-group.input-group ul Elemento UL Contenedor de lista desordenada para un grupo de casillas/botones de radio.
div.mc-field-group.input-group ul li Elemento LI Elemento LI que contiene la etiqueta y entrada. (grupos de casillas/botones de radio)
div.mc-field-group.input-group label Etiquetas de casillas/botones de radio Selector de etiquetas de casillas/botones de radio predeterminado. Nota: La etiqueta se pone después de la entrada en los grupos de casillas/botones de radio.
div.mc-field-group.input-group input Entradas de casillas/botones de radio Selector de entradas de grupos de casillas/botones de radio predeterminado.

Campos obligatorios

Selector CSS Nombre/Tipo Descripción
.indicates-required Elemento DIV Contenedor para el mensaje "*indica obligatorio" en la parte superior del formulario.
.mc-field-group .asterisk Elemento SPAN Contenedor para en las etiquetas que son obligatorias.

Mensajes de respuesta (Ajax)

Selector CSS Nombre/Tipo Descripción
#mce-responses Elemento DIV Contenedor para las respuestas de error.
div.response Elemento DIV Contenedor de mensaje de respuesta predeterminado. Esto se tendrá que configurar para mostrar: ninguno, por defecto para que no aparezcan como casillas estilizadas vacías. El JS escribirá un bloque:pantalla de estilo en línea para mostrarlos cuando se necesite.
div.mce_inline_error Elemento DIV Div con mensaje de error situado debajo de las entradas que tienen un problema.
input.mce_inline_error Entrada(s) La clase .mce_inline_error también se agrega a las entradas para agregar un borde rojo.
#mce-error-response Mensaje de error Contenedor para un mensaje de error no específica a la entrada.
#mce-success-response Mensaje de error Contenedor para el mensaje de operación realizada correctamente.

Campos de fecha

Selector CSS Nombre/Tipo Descripción
.datefield Elemento DIV Contenedor para campos de fecha.
.datefield input Entrada(s) Entradas de fecha predeterminadas.
.datefield .monthfield input Entrada de texto Entrada de texto de mes
.datefield .dayfield input Entrada de texto Entrada de texto de día
.datefield .yearfield input Entrada de texto Entrada de texto de año
.datefield .small-meta Elemento SPAN Texto de sugerencia para formato de fecha (dd/mm/aaaa)

Campos de dirección

Selector CSS Nombre/Tipo Descripción
.mc-address-group Elemento DIV Elemento que contiene el grupo dirección. Los elementos individuales del formulario de dirección se estilizan del mismo modo que los elementos generales de formulario mencionados anteriormente.

Campos de teléfono EE.UU.

Selector CSS Nombre/Tipo Descripción
.phonefield-us Elemento DIV Elemento contenedor para entradas de campo teléfono.
.phonefield-us .phonearea input Entrada de texto Entrada de código de área de teléfono.
.phonefield-us .phonedetail1 input Entrada de texto Entrada para los 3 primeros dígitos de los números de teléfono de Estados Unidos.
.phonefield-us .phonedetail2 input Entrada de texto Entrada para 4 últimos dígitos de los números de teléfono de Estados Unidos.
.phonefield-us .small-meta Elemento SPAN Texto de sugerencia para formato de entrada de teléfono (###) ### ####

¿Te fue útil este artículo?
¿Hay algo más que podemos hacer para mejorar nuestro sitio?

Servicio técnico