Resumo de IA
Gostaria de personalizar os estilos do modelo de e-mail para as suas notificações por e-mail? Desde a versão 1.8.5, o WPForms tem vários estilos de modelo diferentes para escolher para as notificações por e-mail. Pode ler mais sobre estes modelos revendo esta publicação de anúncio.
No entanto, se pretender expandir a estilização destes modelos, este tutorial irá guiá-lo pela melhor forma de o conseguir.
Por defeito, o WPForms já oferece a capacidade de alterar o esquema de cores de 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 do Texto Simples, dar-lhe-á a opção de definir o seu esquema de cores e carregar um logótipo de cabeçalho. Simplesmente navegue para o painel do WordPress » WPForms » Definições » E-mail para definir as suas preferências sobre qual modelo, bem como personalizar o design do modelo.
Criar o seu formulário
Para começar, terá de criar o seu formulário e adicionar os seus campos. Se precisar de ajuda na criação do seu formulário, consulte esta documentação.
À procura do modelo Legado? Este modelo foi descontinuado com a versão 1.8.5, no entanto, ainda pode ativá-lo se assim o desejar. Se estiver à procura deste modelo de e-mail, revise este tutorial.
Alterar as mensagens de e-mail usando HTML
Se pretender adicionar mais personalização às suas notificações por e-mail, apenas realçando os rótulos no texto do e-mail, também pode fazê-lo facilmente editando o seu formulário e, no separador Definições » Notificações dentro do construtor de formulários, altere o seu campo Mensagem. Pode substituir o {all_fields} no 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 no nosso campo Mensagem para construir esta resposta. Para mais ajuda sobre como usar campos de formulário completos como Smart Tags, revise este tutorial.
Personalizar o modelo de e-mail
Se quiser mudar o aspeto dos seus modelos de e-mail WPForms, mas achar a codificação um pouco intimidante, não se preocupe! Existe uma forma simples de o fazer sem se aprofundar demasiado em detalhes técnicos.
Imagine os seus modelos de e-mail como as roupas que os seus formulários vestem quando enviam mensagens. Podemos ajustar estas roupas ajustando os ficheiros do modelo no seu tema filho. Para mais informações sobre como criar um tema filho, revise este guia útil!
Vamos supor que quer dar uma cor de fundo diferente ao modelo Clássico. Eis o que faz:
Ir para o Guarda-roupa: Procure o ficheiro classic-style.php em wp-content/plugins/wpforms/templates/emails/.
Copiar e Colar: Pegue esse ficheiro e coloque-o na pasta wpforms/emails/ do seu tema filho. É como criar um armário personalizado para os seus formulários. Terá de criar esta pasta no seu tema filho.
Estilize-o: Abra o ficheiro que acabou de colar e pode adicionar quaisquer estilos que desejar. Pense nisso como escolher acessórios para o email do seu formulário.
Agora, por que é que isto é interessante? Quaisquer estilos que adicione serão magicamente transformados em CSS inline para cada elemento de email. Isto garante que os seus estilos ficam ótimos em diferentes plataformas e dispositivos de email.
Mas aqui fica uma dica profissional: evite usar tags de estilo no elemento head; podem não funcionar bem em todo o lado. Para mais informações, pode consultar este recurso.
Lembre-se, este método pode não funcionar perfeitamente para alguns clientes de email como o Outlook e o Windows Mail. Eles podem ser um pouco exigentes no reconhecimento de certos estilos.
Se se sentir sofisticado e quiser ajustar outros modelos, cada um tem o seu próprio ficheiro único 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 emails do seu tema filho.
É tudo! Agora os seus formulários estão vestidos com estilos que combinam com o seu gosto, sem necessidade de um curso de programação. 🌟
Gostaria também de alterar ou remover completamente o texto do rodapé? Existe uma forma fácil de o fazer com um pequeno trecho de PHP. Consulte o trecho em Como Remover ou Alterar o Texto do Rodapé da Notificação por Email.