Resumo de IA
Gostaria de personalizar os estilos do modelo de e-mail para suas notificações por e-mail? Desde a versão 1.8.5, o WPForms oferece vários estilos de modelo diferentes para escolher em notificações por e-mail. Você pode ler mais sobre esses modelos revisando esta postagem de anúncio.
No entanto, se você quiser estender a estilização desses modelos, este tutorial o guiará pela melhor maneira de conseguir isso.
Por padrão, o WPForms já oferece a capacidade de alterar o esquema de cores em cada um dos modelos, bem como adicionar uma imagem de cabeçalho. Para mais detalhes sobre como fazer isso, revise esta documentação.
Cada modelo, com exceção de Texto Simples, lhe dará a opção de definir seu esquema de cores e fazer upload de um logotipo de cabeçalho. Simplesmente navegue até o painel do WordPress » WPForms » Configurações » E-mail para definir suas preferências sobre qual modelo, bem como personalizar o design do modelo.
Criando seu formulário
Para começar, você precisará criar seu formulário e adicionar seus campos. Se precisar de ajuda para criar seu formulário, consulte esta documentação.
Procurando pelo modelo Legado? Este modelo foi desativado com a versão 1.8.5, no entanto, você ainda pode ativá-lo se desejar. Se você está procurando por este modelo de e-mail, revise este tutorial.
Alterando as mensagens de e-mail usando HTML
Se você quiser adicionar mais personalização às suas notificações por e-mail apenas negritando os rótulos no texto do e-mail, você também pode fazer isso facilmente editando seu formulário e, na guia Configurações » Notificações dentro do construtor de formulários, altere seu campo Mensagem. Você pode substituir o {all_fields} em seu campo Mensagem por:
<b>Nome:</b> {field_id="0"}<br>
<b>E-mail:</b> {field_id="1"}<br>
<b>Mensagem:</b> {field_id="2"}
Usamos Smart Tags em nosso campo Mensagem para construir esta resposta. Para mais ajuda sobre como usar campos de formulário completos como Smart Tags, revise este tutorial.
Personalizando o modelo de e-mail
Se você quiser mudar a aparência dos seus modelos de e-mail do WPForms, mas achar a codificação um pouco intimidante, não se preocupe! Existe uma maneira simples de fazer isso sem mergulhar muito em detalhes técnicos.
Imagine seus modelos de e-mail como as roupas que seus formulários usam quando enviam mensagens. Podemos ajustar essas roupas ajustando os arquivos de modelo em seu tema filho. Para mais informações sobre como criar um tema filho, revise este guia útil!
Vamos dizer que você queira dar uma cor de fundo diferente ao modelo Clássico. Veja o que você faz:
Vá para o Guarda-Roupa: Procure o arquivo classic-style.php em wp-content/plugins/wpforms/templates/emails/.
Copiar e Colar: Pegue esse arquivo e coloque-o na pasta wpforms/emails/ do seu tema filho. É como criar um armário personalizado para seus formulários. Você precisará criar essa pasta no seu tema filho.
Estilize-o: Abra o arquivo que você acabou de colar e adicione os estilos que desejar. Pense nisso como escolher acessórios para o e-mail do seu formulário.
Agora, por que isso é legal? Quaisquer estilos que você adicionar serão magicamente transformados em CSS inline para cada elemento do e-mail. Isso garante que seus estilos fiquem ótimos em diferentes plataformas e dispositivos de e-mail.
Mas aqui vai uma dica profissional: evite usar tags de estilo no elemento head; elas podem não funcionar bem em todos os lugares. Para mais informações, você pode conferir este recurso.
Lembre-se, este método pode não funcionar perfeitamente para alguns clientes de e-mail como Outlook e Windows Mail. Eles podem ser um pouco rigorosos em reconhecer certos estilos.
Se você estiver se sentindo sofisticado e quiser ajustar outros modelos, cada um tem seu próprio arquivo exclusivo no diretório wpforms/emails/. Basta copiar, colar e estilizar! Para modelos na versão pro, encontre-os em wp-content/plugins/wpforms/pro/templates/emails/ e leve-os para a pasta de e-mails do seu tema filho.
É isso! Agora seus formulários estão vestidos com estilos que combinam com seu gosto, sem necessidade de diploma em codificação. 🌟
Gostaria também de alterar ou remover completamente o texto do rodapé? Existe uma maneira fácil de fazer isso com um pequeno trecho de PHP. Confira o trecho em Como Remover ou Alterar o Texto do Rodapé de Notificação por E-mail.