Personalização avançada de formulários
Os usuários de contas pagas podem utilizar um modo avançado para editar formulários de inscrição hospedados no Mailchimp. Saiba como mudar para o modo avançado e o que você pode editar.
Realize seu trabalho de forma profissional
De treinamentos a marketing completo, nossa comunidade de parceiros pode ajudar você a fazer as coisas acontecerem.
Ganchos de CSS para personalizar formulários
Copie o URL do artigo
Copiado
Cada público do Mailchimp vem com um formulário de inscrição hospedado que pode ser personalizado usando nosso Criador de Formulários. Para usuários em um plano pago que desejam mais controle sobre a aparência de seu formulário de inscrição hospedado, o Mailchimp tem um modo avançado que oferece acesso ao código do formulário. Use ganchos CSS dentro do código do formulário para modificar elementos front-end em seu formulário de inscrição usando código de fontes do lado do servidor.
Neste artigo, definiremos a CSS e ganchos CSS, compartilharemos ferramentas de desenvolvimento populares e forneceremos tabelas de referência com ganchos CSS que você pode usar em um formulário de inscrição do Mailchimp.
Informações úteis
Algumas coisas que você deve saber antes de iniciar esse processo:
- Esse é um recurso avançado, recomendado para usuários familiarizados com programação personalizada. Se precisar de ajuda, entre em contato com o desenvolvedor ou contrate um Especialista em Mailchimp.
- Se você tem pouca ou nenhuma experiência em codificação personalizada, pode usar o Criador de Formulários para criar, projetar e traduzir seu formulário de inscrição hospedado.
- Os formulários de inscrição do Mailchimp podem conter até 30 campos de público personalizados. O plano Premium inclui até 80 campos de público personalizados.
Definições
Elementos (HTML)
Elementos em HTML são todos os componentes que compõem uma página da web. Eles podem conter dados, texto, imagens ou nada com base nas propriedades e atributos colocados neles.
CSS
CSS (Cascading Style Sheets) é uma linguagem de folha de estilo que controla como os elementos são apresentados em uma página da web. Ela pode ser usada para estilizar textos, atribuir elementos a partes específicas de uma página, criar animações e muito mais. Confira esta introdução à CSS da W3Schools.
Seletor de CSS
Os seletores de CSS são usados para identificar elementos que você gostaria de personalizar. Existem cinco categorias de seletores que normalmente são baseadas no nome de um elemento, em uma classe ou em uma ID.
Gancho CSS
Um gancho CSS conecta bibliotecas de conteúdo do lado do servidor a elementos HTML em uma página da web através da CSS.
Ferramentas de desenvolvimento
A maioria dos navegadores da web modernos vem com um console de desenvolvedor que pode ajudar a depurar problemas, registrar erros e fornecer suporte a testes de código. Após adicionar ganchos CSS ao código do formulário, use uma das seguintes extensões de desenvolvedor para ver suas edições em tempo real.
O Firefox Developer Tools é uma poderosa extensão de desenvolvimento da web para o Firefox.
O DevTools é um pacote de desenvolvimento baseado em navegador disponível no Microsoft Edge. Para usuários do Internet Explorer, o F12 Developer Tools é um produto semelhante que funciona com todas as versões do Internet Explorer.
O Chrome DevTools faz parte das ferramentas de desenvolvimento do Google Chrome.
Tabelas de referência
As tabelas a seguir contêm ganchos CSS que você pode usar para personalizar seus formulários de inscrição.
Formar estilos globais
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| #mc_embed_signup | Elemento DIV | Este elemento DIV envolve o formulário. Use este seletor na frente dos outros seletores a seguir para garantir que os estilos sejam aplicados (por exemplo, #mc_embed_signup .mc-field-group) |
| #mc-embedded-subscribe-form | Elemento FORMULÁRIO | Use este seletor para definir estilos no elemento de formulário principal. Útil para aumentar o espaçamento em torno de elementos do formulário. |
| div.mc-field-group | Campo Grupo | Envolve cada rótulo e insere uma combinação em formulários com mais de um campo. Use para controlar o espaçamento horizontal e vertical (margem) entre as entradas. Alguns elementos mc-field-group também têm uma classe .size1of2, o que os torna metade do tamanho, permitindo dois campos por linha. |
| div.mc-field-group label | Rótulos | Seletor de rótulos padrão. Use para aplicar estilo à maioria dos rótulos de formulário. |
| div.mc-field-group input | Entrada(s) | Seletor de entradas padrão. Use para aplicar estilo à maioria das entradas de formulário. |
| div.mc-field-group select | Menus suspensos | Seletor (menu suspenso) de seleção padrão. Use para aplicar estilo a todos os menus suspensos. |
| input.button | Botão Enviar | Use este seletor para aplicar estilo ao botão Enviar. |
Caixas de seleção e botões de opção
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| div.mc-field-group.input-group | Elemento DIV | Contêiner DIV principal para grupos de caixa de seleção/botão de opção. |
| div.mc-field-group.input-group strong | Etiqueta negrito | Usada para aplicar estilo ao rótulo do campo externo de um grupo de caixa de seleção/botão de opção. |
| div.mc-field-group.input-group ul | Elemento UL | Contêiner de lista não ordenada para grupos de caixa de seleção/botão de opção. |
| div.mc-field-group.input-group ul li | Elemento LI | Elemento do item da lista que contém o rótulo e a entrada. (grupos de caixa de seleção/botão de opção) |
| div.mc-field-group.input-group label | Etiquetas de caixa de seleção/botão de seleção | Seletor de rótulos de grupos de caixa de seleção/botão de seleção padrão. Observação: o rótulo vem depois da entrada nos grupos de caixa de seleção/botão de opção. |
| div.mc-field-group.input-group input | Entradas de caixa de seleção/botão de seleção | Seletor de entrada de grupos de caixa de seleção/botão de seleção padrão. |
Campos obrigatórios
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| .indicates-required | Elemento DIV | Contêiner para a mensagem "*indica campo obrigatório" na parte superior do formulário. |
| .mc-field-group .asterisk | Elemento SPAN | Contêiner para "*" nos rótulos que são obrigatórios. |
Mensagens de resposta (Ajax)
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| #mce-responses | Elemento DIV | Recipiente para respostas de erro. |
| div.response | Elemento DIV | Recipiente de mensagem de resposta padrão. Deve ser definido como "display:none"; por padrão para que não seja exibido como caixas de estilo vazias. O JavaScript escreverá como um estilo em linha "display:block", para mostrar mensagens quando necessário. |
| div.mce_inline_error | Elemento DIV | Div com mensagem de erro colocada abaixo das entradas que têm um problema. |
| input.mce_inline_error | Entrada(s) | A classe .mce\_inline\_error também é adicionada às entradas para adicionar uma borda vermelha. |
| #mce-error-response | Mensagem de erro | Recipiente para mensagem de erro não específica de entrada. |
| #mce-success-response | Mensagem de sucesso | Recipiente para mensagem de sucesso. |
Campos de data
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| .datefield | Elemento DIV | Recipiente para campos de data. |
| .datefield input | Entrada(s) | Entradas de data padrão. |
| .datefield .monthfield input | Entrada de texto | Entrada de texto do mês |
| .datefield .dayfield input | Entrada de texto | Entrada de texto do dia |
| .datefield .yearfield input | Entrada de texto | Entrada de texto do ano |
| .datefield .small-meta | Elemento SPAN | Texto de dica para o formato de data (dd/mm/aaaa) |
Campos de endereço
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| .mc-address-group | Elemento DIV | Grupo de endereços contendo elemento. Os elementos de formulário de endereço individual têm o mesmo estilo dos elementos de formulário gerais indicados acima. |
Campos de telefone dos EUA
| Seletor de CSS | Nome/Tipo | Descrição |
|---|---|---|
| .phonefield-us | Elemento DIV | Elemento de contêiner para entradas de campo de telefone. |
| .phonefield-us .phonearea input | Entrada de texto | Entrada do código de área do telefone. |
| .phonefield-us .phonedetail1 input | Entrada de texto | Insira os três primeiros dígitos dos números de telefone dos EUA. |
| .phonefield-us .phonedetail2 input | Entrada de texto | Insira os últimos quatro dígitos dos números de telefone dos EUA. |
| .phonefield-us .small-meta | Elemento SPAN | Texto de dica para formato de entrada de telefone (###) ###-#### |
Servicio técnico
Está com alguma dúvida?
Os usuários de planos pagos podem fazer login para acessar o suporte via e-mail e chat.
Relacionados
Determinar o local de inscrição da página da web
Configure o seu formulário do Mailchimp para rastrear a página na qual os assinantes se inscreveram. Saiba mais sobre o código HTML e outras etapas necessárias para começar.