Resumo de IA
Gostaria de impulsionar o engajamento do cliente com notificações por e-mail personalizadas para o seu site WordPress? Com apenas alguns passos, você pode criar notificações por e-mail personalizadas que deixam uma impressão duradoura em seu público.
Este tutorial mostrará como personalizar seus e-mails de notificação do WPForms.
Neste Artigo
Antes de começar, você precisará criar um novo formulário ou editar um existente para acessar o construtor de formulários. Em seguida, certifique-se de completar a configuração básica de notificação do formulário.
Acessando as Configurações de Personalização de E-mail
Para personalizar suas notificações por e-mail, primeiro você precisará ir para WPForms » Configurações e clicar na aba E-mail.
Personalizando Notificações por E-mail
Após clicar na aba E-mail, você encontrará todas as configurações que permitem personalizar as notificações por e-mail enviadas através do WPForms. Cobriremos cada uma das opções de personalização nas seções a seguir.
Observação: As configurações nas seções a seguir se aplicam a todos os e-mails de notificação do WPForms para o seu site, não apenas aos de um formulário individual.
Escolhendo um Modelo de E-mail
O WPForms oferece muitos modelos que você pode usar para personalizar a aparência de seus e-mails de notificação.
Na seção Modelo, você encontrará todos os modelos disponíveis que o WPForms suporta. Cada um dos modelos de e-mail tem seu estilo e recursos exclusivos. Abaixo, descrevemos os modelos disponíveis.
- Clássico
- Compacto
- Moderno
- Elegante
- Tecnologia
- Texto Simples
Observação: Você precisará de uma licença válida do WPForms para usar os modelos Moderno, Elegante e Tecnologia.
Por padrão, todos os e-mails usam o formato Clássico. Mas você pode atualizar o modelo e o esquema de cores para corresponder aos estilos da sua marca.
Observação: Se você configurou anteriormente o modelo HTML antes de atualizar para a versão 1.8.5 ou superior do WPForms, verá o modelo Legado selecionado por padrão. Este modelo não suporta algumas das opções de estilo modernas, como definir um esquema de cores ou alterar a família da fonte. Veja nossa seção de Perguntas Frequentes para mais detalhes.
Para selecionar um modelo, basta passar o mouse sobre o modelo que deseja usar e clicar no botão Escolher. Para este exemplo, escolheremos o modelo Moderno, mas você pode escolher qualquer um que desejar.
A qualquer momento, você pode clicar no botão Visualizar para ver como cada um dos modelos ficaria na caixa de entrada do seu usuário.
Aqui está um exemplo de como o modelo de e-mail Moderno fica.
Se preferir alternar para notificações compactas, selecione Compacto na seção Modelo. Em seguida, clique em Visualizar para ver como fica.
Aqui está um exemplo de como um e-mail compactado ficaria.
A opção Texto Simples remove todos os estilos do e-mail de notificação. Veja como fica ao visualizar o modelo.
Ajustando a Configuração de Aparência
O WPForms permite personalizar suas notificações por e-mail com um tema Claro ou Escuro para combinar com o estilo da sua marca. Para alterar o tema visual de seus e-mails, basta selecionar a opção Claro ou Escuro na seção Aparência. Isso garante que seus e-mails ficarão ótimos e manterão a consistência com sua marca nas caixas de entrada de seus usuários.
Depois de escolher seu modo de aparência preferido, você pode definir sua própria imagem de cabeçalho, esquema de cores exclusivo e tipografia para esse modo, garantindo uma aparência coesa e atraente para seus e-mails em temas Claro e Escuro.
Observação: A aparência do e-mail pode variar dependendo da configuração do modo escuro do seu dispositivo. Para uma visualização precisa, certifique-se de que as configurações do seu dispositivo correspondam à opção de aparência escolhida.
Definindo uma Imagem de Cabeçalho de E-mail
Se você deseja adicionar uma imagem de cabeçalho ou logotipo aos seus e-mails de notificação, role até a seção Imagem de Cabeçalho. Em seguida, clique em Carregar Imagem para selecionar o arquivo da sua imagem de cabeçalho.
Para a melhor experiência de visualização em todos os tamanhos de tela, recomendamos o uso de uma imagem com 300 pixels de largura e 100 pixels de altura.
Após carregar sua imagem, você verá um menu suspenso para selecionar o tamanho da imagem a ser usada em suas notificações por e-mail. Os tamanhos disponíveis incluem Pequeno, Médio e Grande. Selecionar qualquer um desses tamanhos ajustará a resolução da imagem para corresponder ao tamanho escolhido.
A imagem também se ajusta à tela do usuário. Isso significa que, se você estiver visualizando o e-mail de notificação de um dispositivo móvel, ele se ajustará ao tamanho da tela.
Para mais detalhes, confira nosso tutorial sobre como adicionar uma imagem de cabeçalho a e-mails de notificação.
Alterando o Esquema de Cores
O WPForms fornece uma seção Esquema de Cores que permite personalizar as cores dos elementos no e-mail de notificação. Abaixo explicamos todos os esquemas de cores disponíveis:
Fundo
Esta cor controla a aparência externa do modelo de e-mail. Abaixo está um exemplo com uma cor de fundo azul claro.
Corpo
A cor do corpo controla a aparência do contêiner do modelo de e-mail. Esta é a área onde o e-mail de notificação real reside. Aqui está uma imagem de exemplo com um esquema de cores branco para o contêiner do corpo.
Texto
Esta é a cor que será usada para todos os textos no e-mail de notificação. O esquema de cores padrão é uma cor de texto escura, como visto na imagem abaixo.
Links
Este é o esquema de cores para todos os links no e-mail de notificação. Na imagem abaixo, o endereço de e-mail é um link que usa a cor laranja padrão para links.
Para atualizar qualquer uma das cores, você pode inserir o valor HEX no campo de cor ou clicar nele para abrir o seletor de cores.
Com o seletor de cores, você pode ajustar a cor para o seu gosto.
Atualizando a Tipografia do E-mail
Tipografia controla qual família de fontes será usada para e-mails de notificação do seu site. O WPForms atualmente suporta fontes Sans Serif e Serif.
Para atualizar a família de fontes do seu modelo de e-mail, clique no menu suspenso Tipografia e selecione a fonte que você gostaria de usar.
Depois de personalizar seu modelo de e-mail, role para baixo e clique no botão Salvar Configurações para salvar suas alterações.
Visualizando seu Modelo de E-mail
Após salvar suas alterações, você pode visualizá-lo para ver como ele ficaria na caixa de entrada do seu usuário. Para fazer isso, clique no link Visualizar Modelo de E-mail em Destaques.
Isso abrirá uma visualização do seu modelo de e-mail de notificação em uma nova guia do navegador. A visualização aplicará todas as personalizações que você acabou de configurar.
Se o dispositivo do usuário estiver configurado para usar o modo escuro, o e-mail de notificação se ajustará automaticamente para corresponder à aparência do dispositivo do usuário.
Personalizando Notificações para Formulários Individuais
Se desejar, você pode personalizar o modelo de e-mail para um formulário específico no construtor de formulários. Para fazer isso, abra o formulário desejado e vá para Configurações » Notificações.
Em seguida, role para baixo e clique em Avançado para acessar as configurações avançadas. Você deverá ver um menu suspenso Modelo de E-mail.
Por padrão, esta opção está definida como Modelo Padrão para todos os formulários em seu site. Isso significa que seus formulários usarão as configurações globais que você configurou na página de configurações.
Para substituir o modelo padrão, clique no menu suspenso Modelo de E-mail e selecione o modelo que deseja usar.
Alternativamente, você pode clicar no link ver modelos para ver todos os modelos disponíveis.
Na sobreposição que aparece, selecione o que você deseja usar para o formulário específico.
Quando terminar, certifique-se de salvar seu formulário para atualizar o modelo.
Observação: Escolher um modelo do construtor de formulários aplicará os estilos padrão do modelo. Você não poderá personalizar as cores e a tipografia do modelo a partir do construtor de formulários.
Perguntas Frequentes
Estas são as respostas para algumas perguntas frequentes sobre a personalização de modelos de e-mail de notificação.
Não estou vendo o Modelo HTML. Como posso incluí-lo na biblioteca de modelos de e-mail?
Se você estava usando o modelo HTML antes de atualizar para a versão 1.8.5 ou superior do WPForms, provavelmente ainda terá o modelo HTML disponível em sua página de configurações de E-mail. Este modelo é chamado Legado na seção Modelo.
Se você não estiver vendo o modelo Legado, pode exibi-lo adicionando um filtro personalizado ao arquivo function.php do seu tema. Abaixo está o trecho de código para adicionar ao seu site.
/** * This code snippet forces using the Legacy email template that was called the "HTML" in v1.8.4 and below. */ $settings = (array) get_option( 'wpforms_settings', [] ); $settings['email-template'] = 'default'; update_option( 'wpforms_settings', $settings );
Observação: Consulte nosso guia sobre adicionar código PHP personalizado para WPForms se precisar de orientação adicional.
Se você estiver usando o plugin WPCode, poderá importar facilmente o código acima para o seu site. Para mais detalhes, consulte nosso tutorial de integração de snippets de código.
Como o modelo HTML não é suportado por padrão na versão 1.8.5 ou superior do WPForms, você não poderá aplicar algumas das opções de estilo mais recentes a ele.
Você ainda pode atualizar a cor de fundo do seu modelo. No entanto, o uso do esquema de cores e das configurações de tipografia não é suportado no modelo Legado.
É isso! Agora você sabe como personalizar seus e-mails de notificação de formulário.
Certifique-se de explorar nossos outros tutoriais sobre notificações de formulário para aprender como você pode aproveitá-los ao máximo.