Personalización del formulario avanzado
Los usuarios de cuentas de pago pueden utilizar un modo avanzado para editar los formularios de suscripción alojados en Mailchimp. Descubre cómo cambiar a este modo avanzado y qué puedes editar.
Consigue a un experto que te haga el trabajo
Desde formación hasta servicio completo de marketing, nuestra comunidad de Partners puede ayudarte a conseguir lo que quieras.
Enlaces CSS para personalizar los formularios
Copiar la URL del artículo
Se copió
Cada público de Mailchimp viene con un formulario de suscripción alojado que se puede personalizar utilizando nuestro creador de formularios. Para los usuarios de un plan de pago que deseen tener más control sobre el aspecto de su formulario de suscripción alojado, Mailchimp tiene un modo avanzado que ofrece acceso al código del formulario. Utiliza ganchos CSS dentro del código del formulario para modificar los elementos frontales de tu formulario de suscripción utilizando código de fuentes del lado del servidor.
En este artículo, definiremos CSS y ganchos CSS, compartiremos herramientas de desarrollo populares y proporcionaremos tablas de referencia con ganchos CSS que puedes utilizar en un formulario de suscripción de Mailchimp.
Cosas que debes saber
A continuación, se detallan algunos puntos que debes conocer antes de empezar este proceso.
- Esta es una tarea avanzada que se recomienda solo a los usuarios que estén familiarizados con la codificación personalizada. Contacta con tu desarrollador o contrata a un experto de Mailchimp si necesitas ayuda.
- Si tienes poca o ninguna experiencia en codificación personalizada, puedes utilizar el creador de formularios para crear, diseñar y traducir tu formulario de suscripción alojado.
- Los formularios de suscripción de Mailchimp tienen capacidad para incluir hasta 30 campos de público personalizados. El plan Premium incluye hasta 80 campos de público personalizados.
Definiciones
Elementos (HTML)
Los elementos en HTML son todos los componentes que forman una página web. Pueden contener datos, texto, imágenes o nada, según las propiedades y atributos que se les asignen.
CSS
CSS (hojas de estilo en cascada, por sus siglas en inglés) es un lenguaje de hojas de estilo que controla cómo se presentan los elementos en una página web. Se puede utilizar para dar estilo al texto, asignar elementos a partes específicas de una página, crear animaciones, etc. Consulta esta introducción a CSS de W3Schools.
Selector CSS
Los selectores CSS se utilizan para identificar elementos que te gustaría personalizar. Hay 5 categorías de selectores que suelen basarse en el nombre de un elemento, una clase o un ID.
Gancho CSS
Un gancho CSS conecta bibliotecas de contenido del lado del servidor a elementos HTML de una página web mediante CSS.
Herramientas de desarrollo
La mayoría de los navegadores web modernos vienen con una consola de desarrollador que puede ayudar a depurar problemas, registrar errores y ayudar con las pruebas de código. Después de añadir ganchos CSS al código de tu formulario, utiliza una de las siguientes extensiones de desarrollador para ver tus ediciones en tiempo real.
Firefox Developer Tools es una potente extensión de desarrollo web para Firefox.
DevTools es un paquete de desarrollo basado en navegador disponible en Microsoft Edge. Para los usuarios de Internet Explorer, F12 Developer Tools es un producto similar que funciona con todas las versiones de Internet Explorer.
Chrome DevTools forma parte de las herramientas para desarrolladores de Google Chrome.
Tablas de referencia
Las siguientes tablas contienen ganchos CSS que puedes utilizar para personalizar tus formularios de suscripción.
Formar estilos globales
| Selector de CSS | Nombre/Tipo | Description (Descripción) |
|---|---|---|
| #mc_embed_signup | Elemento DIV | Este elemento DIV se ajusta alrededor del formulario. Utiliza este selector delante de los otros selectores siguientes para asegurarte de que se aplican los estilos. (p. ej. #mc_embed_signup .mc-field-group) |
| #mc-embedded-subscribe-form | Elemento FORM | Utiliza este selector para establecer estilos en el elemento principal del formulario. Ú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 esta opción para controlar el espaciado horizontal y vertical (relleno) entre las entradas. Algunos elementos .mc-field-group también tienen una clase .size1of2, lo que los hace de tamaño medio, permitiendo dos campos por fila. |
| etiqueta div.mc-field-group | Etiquetas | Selector de etiqueta predeterminado. Utiliza esto para estilizar la mayoría de etiquetas de formulario. |
| entrada div.mc-field-group | Entrada(s) | Selector de entrada predeterminado. Utiliza esta opción para estilizar la mayoría de entradas de formulario. |
| seleccionar div.mc-field-group | Menús desplegables | Selector de selección (desplegable) predeterminado. Utiliza esto para estilizar todos los menús desplegables. |
| input.button | Botón Submit (Enviar) | Utiliza este selector para estilizar el botón Submit (Enviar). |
Casillas de verificación y botones de opción
| Selector de CSS | Nombre/Tipo | Description (Descripción) |
|---|---|---|
| div.mc-field-group.input-group | Elemento DIV | Contenedor DIV principal para grupos de casillas de verificación/botones de opción. |
| negrita div.mc-field-group.input-group | Etiqueta negrita | Se utiliza para estilizar la etiqueta del campo exterior de un grupo de casillas de verificación/botones de opción. |
| ul div.mc-field-group.input-group | Elemento UL | Contenedor de listas desordenadas para un grupo de casillas de verificación/botones de opción. |
| ul li div.mc-field-group.input-group | Elemento LI | Elemento de lista que contiene la etiqueta y la entrada. (grupos de casillas de verificación/botones de opción) |
| etiqueta div.mc-field-group.input-group | Etiquetas de casillas de verificación/botones de opción | Selector predeterminado de etiquetas de grupos de casillas de verificación/botones de opción. Nota: La etiqueta se pone después de la entrada en los grupos de casillas de verificación/botones de opción. |
| entrada div.mc-field-group.input-group | Entradas de casillas de verificación/botones de opción | Selector predeterminado de entradas de grupos de casillas de verificación/botones de opción. |
Campos obligatorios
| Selector de CSS | Nombre/Tipo | Description (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 de CSS | Nombre/Tipo | Description (Descripción) |
|---|---|---|
| #mce-responses | Elemento DIV | Contenedor para las respuestas de error. |
| div.response | Elemento DIV | Contenedor de mensajes de respuesta predeterminado. Esto se tendrá que configurar para “display:none;”, por defecto para que no aparezcan como casillas estilizadas vacías. El JavaScript escribirá como estilo en línea "display:block;" para mostrar los mensajes cuando sea necesario. |
| 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 añade a las entradas para añadir un borde rojo. |
| #mce-error-response | Mensaje de error | Contenedor para mensajes de error no específicos de la entrada. |
| #mce-success-response | Mensaje de operación realizada correctamente | Contenedor para el mensaje de operación realizada correctamente. |
Campos de fecha
| Selector de CSS | Nombre/Tipo | Description (Descripción) |
|---|---|---|
| .datefield | Elemento DIV | Contenedor para campos de fecha. |
| entrada .datefield | Entrada(s) | Entradas de fecha predeterminadas. |
| entrada .datefield .monthfield | Entrada de texto | Entrada de texto de mes |
| entrada .datefield .dayfield | Entrada de texto | Entrada de texto de día |
| entrada .datefield .yearfield | 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 de CSS | Nombre/Tipo | Description (Descripción) |
|---|---|---|
| .mc-address-group | Elemento DIV | Elemento que contiene el grupo dirección. Los elementos individuales del formulario de dirección tienen el mismo estilo que los elementos generales de formulario mencionados anteriormente. |
Campos de teléfono en EE. UU.
| Selector de CSS | Nombre/Tipo | Description (Descripción) |
|---|---|---|
| .phonefield-us | Elemento DIV | Elemento contenedor para entradas de campo teléfono. |
| entrada .phonefield-us .phonearea | Entrada de texto | Entrada de prefijo telefónico. |
| entrada .phonefield-us .phonedetail1 | Entrada de texto | Entrada para los tres primeros dígitos de los números de teléfono de Estados Unidos. |
| entrada .phonefield-us .phonedetail2 | Entrada de texto | Entrada para los cuatro últimos dígitos de los números de teléfono de Estados Unidos. |
| .phonefield-us .small-meta | Elemento SPAN | Texto de sugerencia para el formato de entrada de teléfono (###) ### #### |
Soporte técnico
¿Tienes alguna pregunta?
Los usuarios de pago pueden acceder al soporte por correo electrónico y chat.
Relacionados
Determinar la ubicación de suscripción en la página web
Configura tu formulario Mailchimp para rastrear la página web en la que se suscriben tus contactos. Aprende a crear el código HTML y descubre todos los pasos necesarios para empezar.