Como criar um portfólio em wordpress #15 – Formulário de contato e contas de email

0
50

Neste vídeo você vai aprender como configurar suas contas de email utilizando o serviço de hospedagem e o seu domínio. Você aprenderá também como utilizar seu próprio serviço de webmail personalizado e como utilizar clientes de email locais em seu computador.

Clique aqui para acessar a X2 Network
Link para download do EM Client
Link para download do Thunderbird

Veja a transcrição do vídeo a seguir

Olá gente! Bem-vindos a mais uma vídeo-aula do canal: Clube do Design. Eu sou Liute Cristian.

E, estamos de volta com mais um vídeo da série: Como Criar Seu Portfólio em WordPress. Eu fiquei devendo pra vocês, um vídeo sobre: Como criar formulários de contato, pra o seu blog, pra sua loja, pra o seu portfólio… E, nesse vídeo, eu vou mostrar pra você, como fazer isso! Você vai aprender a criar a sua página de contato, pelo meio da qual, os seus clientes, seus potenciais clientes, os seus leitores, podem entrar em contato, através desse formulário, podem entrar em contato com você. Isso, é um recurso muito importante, é fundamental, que você tenha uma maneira de que as pessoas possam entrar em contato com você. Seja em seus perfis sociais, seja um endereço de e-mail… Você precisa facilitar o contato das pessoas, com você.

Bom! Aqui, no Clube do Design, a gente tem uma página de contato. É só você clicar aqui em cima, nesse link, que você vai ser direcionado pra essa página. Que, também pode ser acessada, digitando no navegador: clube.design/contato. E aqui, a gente tem um formulário que foi feito, pra ser funcional. Uma pequena mensagem, e a partir daí, a pessoa pode colocar o nome, o endereço de e-mail, o assunto e escrever a mensagem. Existem outros plug-ins, vários plug-ins, na verdade, de formulário de contato, que permitem inclusive, que você coloque um botão aqui, pra pessoa anexar um arquivo… Mandar pra você, um documento… Uma foto, uma pasta compactada, enfim… Você pode expandir as funcionalidades do seu formulário, de acordo com as suas necessidades. Como, o meu objetivo é receber apenas mensagens, o meu formulário, ele é muito simples e a pessoa pode entrar em contato comigo facilmente, através desse formulário.

Página de contato do Clube do Design
Página de contato do Clube do Design

Pra que, a gente possa criar um formulário de contato pra o nosso blog, pra o nosso site, pra nossa loja… A gente precisa obrigatoriamente, de um endereço de e-mail. E, pra você utilizar um formulário de contato no seu site, você não precisa necessariamente, pagar pra usar um e-mail. Você pode usar um e-mail gratuito do Google, Hotmail, da Microsoft, que é o Outlook… Ou, qualquer outra conta de e-mail, que você já tiver disponível. No nosso caso, como a gente já fez a compra do nosso domínio… Vocês aprenderam como comprar um domínio, lá nas primeiras aulas. Aprendemos também, como comprar… Contratar um serviço de hospedagem, nada melhor do que a gente caminhar com as nossas próprias pernas… Pra quê, que eu vou usar um serviço de e-mail gratuito, se eu posso utilizar o meu próprio serviço de e-mail? Um serviço que eu já pago pra utilizar?! E, nada melhor claro, também, de vincular o meu e-mail a marca da minha empresa, a marca do meu negócio, a minha marca, ao meu nome, enfim… Seja lá, qual foi o domínio que você registrou. Então, por exemplo: O e-mail de contato do Clube do Design é: [email protected] Anteriormente, eu tinha um que se chamava: [email protected], eu desativei, porque deu vontade… Acabei querendo usar aí, um outro endereço de e-mail.

Bom gente, então, além de mostrar pra você, como você pode criar o seu formulário de contato nesse vídeo e como configurá-lo no seu site, vou te mostrar também, como você pode criar e gerenciar as suas contas de e-mail, utilizando o seu serviço de hospedagem e o seu próprio domínio. O vídeo, vai ficar um pouquinho longo, então, se recline, sente, se você tiver com ele praticando junto comigo, fazendo junto comigo, fique à vontade.

Antes de começar, eu quero dar um aviso pra vocês: Eu perdi acesso aos domínios que a gente vinha utilizando até agora, na série: Como Criar Seu Portfólio em WordPress. Na verdade, o período de validade desse domínio, que era o: aftereffects.blog, ele expirou e eu não tinha interesse em renová-lo. Então, eu deixei que ele acabasse, deixei que ele expirasse… Ele não está mais disponível. Então, a gente vai começar a utilizar a partir de agora, o domínio do Clube do Design mesmo, a conta de acesso do CPanel e o domínio do Clube do Design, o que não vai ter problema nenhum! Todos os passos que você vai executar aqui, são universais, vamos dizer assim! Você pode criar com qualquer domínio, com qualquer site… E, o que eu vou mostrar também, como colocar ali, a página de contato no Clube do Design, funcionaria do mesmo jeito, se eu tivesse utilizando a minha conta antiga. Então, você pode continuar com o seu domínio, com o seu blog, com o seu portfólio, sem problema nenhum.

Bom! Aqui, eu fiz login no meu CPanel. Se, você não sabe como fazer login no CPanel, volta um pouquinho, vai assistir as aulas… As primeiras aulas, onde eu mostrei como fazer isso. E aqui, eu utilizo claro, a X2 Network. O link pra X2 Network, que é o serviço de hospedagem que eu uso e recomendo, sempre está na descrição do vídeo. Em todos os vídeos dessa série. O CPanel, da X2 Network, passou por uma atualização, então, ele recebeu a última versão do CPanel, que é esse painel customizado aqui, mais bonitão… Tem um design mais flat, e alguns ícones trocaram de nome… E, se você utiliza a versão anterior do CPanel, se você utiliza outros hosts, como: Hostgator, UolHost, LocaWeb, Deus te livre, se você usa LocaWeb, mas enfim… Se você usa qualquer servidor, que o utilize o CPanel antigo, não tem problema! Você vai encontrar, basicamente as mesmas opções.

Painel inicial do cPanel
Painel inicial do cPanel

Você deve então, depois de fazer o login, no seu CPanel… Procurar a opção: E-mail. Você vai encontrar um painel, só de e-mails, onde você vai encontrar várias opções. Aqui, eu tenho: Contas de E-mail Encaminhadores, Entrada MX, Endereço Padrão… Entre outras opções. O que a gente vai fazer agora, é criar o nosso endereço de e-mail personalizado. O endereço de e-mail, que a gente vai utilizar como contato aí, pra que os nossos leitores, os nossos clientes entrem em contato com você, comigo né?! Com a gente, através aí, do nosso site. Então, você vai clicar na opção: Contas. Eu não me lembro, qual que é a opção, na versão antiga, mas é basicamente a mesma… Você vai ser direcionado pra esta tela aqui, onde você pode adicionar novas contas de e-mail, criar novas contas de e-mail, pra todos os seus domínios registrados nessa sua conta de acesso, do CPanel. Tanto, que se eu clicar aqui embaixo, olha, eu vou ter acesso a todos os domínios que eu tenho registrado nesse Host. Okay?! Então, olha só! Aqui em cima, você pode adicionar o… Vamos dizer assim… Como é que eu posso chamar?! O pré-nome do seu e-mail, vamos dizer assim. O pré-texto, tá?! O texto, que vem antes do @ (arroba), do seu endereço de e-mail. Então, eu já tenho, por exemplo, um endereço que se chama: Atendimento, um endereço que se chama: Contato, um endereço que se chama: [email protected] e assim por diante. Eu recomendo, que se for o seu endereço de e-mail padrão pra o seu site, ou que você vá utilizar para as pessoas entrarem em contato com você, você utilize o padrão: Contato. E vai ficar assim: [email protected] O seu domínio, não é?! Que você registrou, no meu caso: [email protected]

Painel de contas de email
Painel de contas de email

Você também pode, utilizar outros nomes, como por exemplo: [email protected]ínio.com… [email protected]ínio.com, só não me cometa a gafe, ou o deslize de colocar o nome do seu site, ou o nome do seu domínio, na frente do arroba. Eu já vi muito isso, tá gente?! A pessoa coloca: [email protected] Por exemplo: Se o site da pessoa se chama lá: Roger Maurício, a pessoa coloca: [email protected] Isso é ridículo, tá gente?! Utilize um nome fácil de lembrar, e que não repita duas vezes o nome do seu site, o nome do seu domínio. Tá bom?! Então, vamos fazer isso. Fazer com segurança, criar um nome de domínio aí, um endereço de e-mail que seja fácil de lembrar, e que não seja cafona! Tá legal?!

Bom! Como eu já tenho o: Contato, eu vou utilizar aqui o e-mail: [email protected], pra que a gente possa utilizar de teste, essa vídeo-aula. Aqui embaixo, vou colocar uma senha qualquer… Pronto! Você pode definir a senha que você achar conveniente. Aqui embaixo, ele vai medir a força da sua senha… Tá bom?! A minha senha tá forte. E aqui, você pode configurar o limite… O espaço, que essa caixa de entrada vai ter disponível. Nesse caso, por padrão, o meu servidor de hospedagem, tá me dando: 2 Gigas de espaço. Eu vou configurar como: Limitado. Se, você quiser configurar como: Ilimitado, também não tem problema. O importante, é que esse tamanho é em megabytes. Se você utiliza e-mail corporativo, onde várias pessoas, vão ter acesso a vários e-mails… Por exemplo: Antônio, Carlos, João, Maria… Cada um vai ter o seu próprio e-mail… Você pode limitar a quantidade de mensagens na caixa de correio, o espaço na caixa de correio, pra acabar não sobrecarregando o seu servidor, e acabar forçando aí, na verdade, força os seus usuários a irem apagando as mensagens mais antigas, justamente, pra economizar espaço na caixa de correio.

Bom, depois então, de configurar o meu endereço de e-mail, é só clicar em: Criar conta, e esse endereço de e-mail vai ser criado. Conta criada! [email protected], ela vai aparecer aqui embaixo, olha: [email protected], espaço ilimitado… A partir daqui, eu ainda posso: Alterar a minha senha, posso alterar a minha conta, e posso excluir a conta. Aqui também, a gente vai encontrar algumas opções interessantes, clicando em: Mais, a gente pode por exemplo, acessar a opção: Webmail, deixa eu clicar aqui em: Acessar Webmail, que é justamente, onde você pode acessar a sua conta de e-mail on-line. Exatamente! Funciona, como se você tivesse acessando o gmail, o hotmail, tanto faz! Você pode acessar a sua conta de e-mail online, utilizando um desses três leitores de e-mail, por padrão. Recomendo que você use, ou o horde, ou o roundcube, são os dois que eu uso… Nunca usei o SquirrelMail, nunca gostei dele, mas enfim… Você escolhe, o que você achar conveniente.

Só, recapitulando, tá gente?! Depois que você cria sua conta de e-mail, ela já tá disponível pra uso. Ou seja, você já pode começar a distribuir esse endereço de e-mail, pra os seus clientes, pra os seus amigos… E, a sua caixinha de correio, já vai começar a funcionar, a receber mensagens. Se você, quiser acessar o seu endereço de e-mail, em qualquer lugar a partir do celular, a partir do computador de um amigo, ou do trabalho… Basta, você acessar o seu endereço de webmail. Na maioria dos clientes… Na maioria dos servidores de hospedagem, o endereço do seu e-mail, é composto… Do seu webmail aliás, o endereço pra você fazer login no seu webmail, é composto: Pelo nome do seu domínio / (barra) webmail. Vamos fazer um teste?! Vou clicar aqui, olha, abrir uma nova janela anônima, aqui no google chrome, e vou digitar: clube.design/webmail. Okay?!

Então, isso, lembrando que é: Se você usa serviço de hospedagem próprio, aquele que você contratou, lá no comecinho dessa série… E, também, CPanel, tá bom?! Existem alguns serviços de hospedagem, como: Locaweb, Deus te livre, né?! Locaweb, que utiliza o seu próprio sistema de webmail, que eu considero horrível, é ridículo. Mas, enfim… Se você utilizar serviços de e-mail personalizados no seu serviço de hospedagem, muito provavelmente, esse endereço, não vai funcionar. Mas, enfim… Digitando: clube.design/webmail, ou o seu endereço do… O endereçodoseusite.com.br/webmail, apertando enter… Você vai ser direcionado, pra um endereço IP, que nada mais é, do que o endereço IP, do seu servidor, onde você pode fazer o login no webmail.

Tela de login do webmail
Tela de login do webmail

A partir daqui, eu posso digitar o meu endereço de e-mail: [email protected] e aqui, na minha senha, eu vou colocar a mesma senha que eu configurei. Pressionando enter, ele vai fazer o login, na minha conta de e-mail, onde eu posso acessar o meu e-mail e desfrutar das vantagens dele, como se fosse qualquer webmail padrão: Gmail, Hotmail, Yahoomail, tanto faz. Aqui, eu tenho a possibilidade de selecionar 3 leitores de e-mail diferente… Eu vou selecionar aqui, o horde, porque ele é mais simplão (simples), ele é mais bonitinho… Ele é mais minimalista. Desculpe! O roundcube, se você quiser um cliente de e-mail com mais recursos, você pode usar o horde, porque o horde tem: Agenda, tem lista de tarefas, tem calendário, tem um bocado de coisa legal, que você pode utilizar em um cliente de webmail. Mas, se você quiser uma coisa mais simples, só pra enviar e receber mensagens… Configurar uma assinatura… É só utilizar o roundcube.

Painel inicial do webmail
Painel inicial do webmail

Se você clicar aqui embaixo, você pode definir, pra que o CPanel, toda vez que você fizer login, ele abra automaticamente já, esse cliente de e-mail, por padrão, tá bom?! Sendo que, você pode alterar isso, clicando aqui em cima, nesse menu, e acessando qualquer uma dessas opções. Menu este, que só está disponível a partir dessa versão mais recente do CPanel. Então, vou clicar aqui no roundcube, só pra você ver tá?! Não vou me estender muito no roundcube, é um serviço de e-mail qualquer… Você, com certeza, vai precisar gastar aí, alguns minutos pra aprender a utilizar, mas, se você usa gmail, utilizar hotmail, outlook… Você vai tirar de letra a utilização do roundcube, ou do horde.

Reoundcube
Reoundcube

 

Olha só gente! Então, nada mais é do que uma caixa de correio normal, aqui você tem, as suas pastas de rascunho, enviados e lixeira… Você pode atualizar, criar e-mail, aqui tem mais opções, enfim… Tá bom?! E aqui, tem o botão de configurações, onde, você pode acessar e configurar a sua conta, a sua caixinha de correio. Só uma dica: Se você quiser configurar a sua assinatura, a assinatura que fica embaixo da sua conta de e-mail, quando você enviar suas mensagens… Clique aqui, em: Identidades, tá?! E aqui, você seleciona o seu endereço de e-mail. A partir daqui, você pode criar a sua assinatura, aquilo que aparece lá no finalzinho do seu endereço de e-mail. Beleza?!

Bom! Não vamos estender muito, nesses clientes de e-mail, até mesmo porque, eu vou indicar pra você, um cliente de e-mail local. Se ficar um pouquinho difícil, tá gente?! Não se preocupem, depois vocês podem tirar suas dúvidas, aqui nos comentários e depois, se tiverem muitas dúvidas aí, pertinentes, eu posso criar um outro vídeo, só pra responder as dúvidas que surgirem a partir dessa aula. Ela vai ficar bem extensa, bem complexa, eu entendo… É um conteúdo, realmente, que não dá pra resumir muito… E que, é importante pra você, mas, se você tiver dúvidas, é só comentar aqui embaixo, nesse vídeo mesmo, que eu respondo. Não importa o ano que você esteja assistindo esse vídeo, eu vou ficar respondendo todas as mensagens, até que a minha vida se acabe, não é?!

Então, vamos lá gente! Olha só! Eu acessei aqui o site do: eM Client, emclient.com, que vai ficar aqui embaixo, na descrição do vídeo. Se você não sabe o quê que é um cliente de e-mail, eu explico pra você: É um programa, é um aplicativo, que serve pra você receber e-mails no seu computador. Se você, já teve contato com: Outlook, com Thunderbird, que é da Mozilla, você já sabe do que eu tô falando. Então, porquê que eu utilizo o eM Client? É um dos melhores que eu já conheci até hoje, nunca tive problemas com ele, já tive problemas com: Outlook… Já tive problemas com: Thunderbird, enfim… Já tive problemas com vários clientes de e-mail, até o da Microsoft também lá, o Windows Live Mail, eu tive problemas. E, eu encontrei o eM Client, que é simplesmente: Sensacional! Possui diversos recursos muito legais, muito bacanas que eu vou mostrar já, já, pra você… E, também, tem a vantagem de ele ser gratuito, para até duas contas.

Não é gratuito como o Thunderbird, tá?! Se você quiser, você pode acessar aí o: Thunderbird, deixa eu colocar aqui, pra você… Thunderbird, eu vou abrir aqui, e vou deixar o link na descrição do vídeo, tá?! Se você quiser, você pode usar o Thunderbird também. Mas, nesse vídeo, vou mostrar como usar o eM Client. O Thunderbird, também é um cliente de e-mail, a vantagem é que ele é totalmente gratuito. Você pode usar ele, em quantas contas você quiser. O eM Client, não! Ele é grátis apenas pra duas contas, okay?! Mas, ele oferece suporte a diferentes tipos de recursos, diferentes tipos de contas e serviços de e-mail, serviços de calendário, serviços de agenda… Tudo online, tudo bacaninha, tudo bem alinhado, então, é por isso que eu recomendo que você utilize o eM Client.

Eu tenho uma licença, eu adquiri a minha licença, uma licença de atualização vitalícia. Você também pode comprar, se eu não me engano tá custando R$ 70,00, a licença do eM Client, pra você usar com quantas contas você quiser. São contas individuais, tá certo?! Se você quiser utilizar na sua empresa, vai ter que comprar aí, uma licença por volume, especificamente pra empresas. Bom! Então, acesse aí na, no seu navegador: emclient.com, e você faz o download do eM Client. A instalação é normal, como qualquer outro aplicativo. Baixe o aplicativo e instale na sua máquina. Pra quê, que vai servir o eM Client? Pra que, você possa receber as suas mensagens, diretamente no seu computador, sem precisar ficar acessando webmail o tempo todo.

Então, com o cliente de e-mail, você deixa o aplicativo aberto, ele recebe as suas contas, as suas mensagens, tudo automaticamente sincronizando de tempo em tempo, com o seu servidor. Então, a gente vai utilizar o eM Client, pra que a gente possa acessar o nosso e-mail, no computador. Obviamente, claro que, você só tem acesso ao aplicativo, no computador que você instala. Então, se você trocar de computador, for lá pro seu trabalho e quiser acessar o seu e-mail, você vai ter que acessar pelo webmail. Mas, isso não chega a ser um problema, porque tudo que você faz no eM Client, você reflete essa alteração, no seu servidor e vice-versa. Então, tudo que você faz, se você apagar uma mensagem no aplicativo, ela é apagada no servidor e assim por diante, okay?!

Vamos aprender então, como configurar o cliente de e-mail, no seu computador. Eu já tenho o eM Client instalado na minha máquina… Você, vai fazer o download e vai fazer a instalação, normalmente, sem problema nenhum, tá?! Clica lá, pra acessar e depois, clica lá pra baixar e depois instala. É só ir avançando, avançando, avançando… Beleza?! Depois que ele fizer a instalação, você vai ser direcionado, pra uma tela, mais ou menos parecida com essa, que eu vou mostrar aqui agora: Eu vou falar sobre o cliente, já, já… Tá?! Vamos passar, pra parte de instalação, primeiro. Bom, depois que você fizer então, a instalação do eM Client, antes dele abrir a primeira vez, ele já vai pedir que você configure a sua conta de e-mail… E você, vai ser apresentado a essa janela aqui, exatamente essa.

Tela de configuração do eM Client
Tela de configuração do eM Client

Então! Quando você fizer a instalação… For avançando, avançando… Concluindo… Ele vai te apresentar essa janela, pra que, você configure a sua primeira conta de e-mail. O que, que eu gosto de fazer aqui?! Gente! Você pode, configurar a sua conta de e-mail, de maneira automática… Ou, você pode configurar a sua conta de e-mail, utilizando esses links aqui embaixo, tá?! Por exemplo: Se você tiver o e-mail do gmail, você seleciona e vai avançando… E, ele vai configurar automaticamente. O que é, que eu gosto de fazer? Eu gosto de fazer a configuração manual, porque, eu tenho controle total de todas as etapas do processo de configuração. Então, o quê que você vai fazer? Você vai clicar, aqui em e-mail, okay?! E vai clicar aqui, em: Outro. Pra que, você possa fazer a sua configuração, manual. Eu não vou fazer a configuração, manual aqui… Porque, eu sei que muita gente, pode ter um servidor de hospedagem diferente do meu. Okay?! E isso, claro, vai refletir na maneira com que você configura o seu endereço de e-mail. Então, vamos utilizar a configuração automática e depois, eu vou comentar com vocês, como você pode fazer a configuração manual. Okay?! Vamos fazer, uma de cada vez.

Aqui, no e-mail da configuração automática, eu vou digitar o meu endereço de e-mail: [email protected]… E, aqui embaixo, vou colocar a minha senha. Fazendo isso, é só clicar em: Iniciar e pronto! O eM Client, já fez a configuração completamente automática. Não preciso mais, fazer nada! É só aguardar… Ele já vai adicionar a minha conta, no meu aplicativo… E, a partir daí, já vou conseguir acessar a minha caixa de correio, sem problema nenhum. Então, a gente só precisa aguardar e pronto! Ele já, resgatou as configurações do meu servidor de hospedagem… E, já passou pra próxima tela. Qual, que vai ser o meu nome… Pode ser o seu nome, pode ser o nome do seu site… Tá?! Pode ser o seu nome, o nome do seu projeto… E o nome da conta, eu vou deixar como está. Vou clicar em: Próximo, pra avançar… E, em seguida, concluir… Pra que ele conclua, o processo de adição dessa minha conta.

Então, esse é o primeiro passo, que você vai fazer. É o primeiro passo que você vai tomar, antes de abrir o aplicativo pela primeira vez… Deixa só, ele concluir aqui… E pronto! Claro! Obviamente que você não vai ver essa tela, porque eu abri ela manualmente. Vou cancelar aqui, beleza! E vamos aqui embaixo, pra o nosso endereço de e-mail… Então, automaticamente, o eM Client, já passa a exibir aqui, um pequeno link, com o endereço de e-mail, com o nome da conta, que você configurou… O Endereço de e-mail, no caso, no meu caso. Então, aqui embaixo, ele já vai me dar, olha… Minha caixa de entrada, meus itens enviados, a lixeira… Enfim…

Tudo o que eu tenho, lá no meu serviço de hospedagem. É a mesma coisa. Observem, que ele já tá sincronizando… Vamos fazer um teste?! Eu vou mandar um e-mail, daqui, da minha conta: Equipe, pra esse e-mail, pra ver se ele tá funcionando… Deixa, eu clicar aqui em: Novo e-mail… E pronto! Ele vai, abrir a janelinha, pra mim, criar um novo e-mail aqui. Eu vou colocar aqui, o endereço de e-mail: [email protected], colocar aqui: Teste, e vou clicar no: Enviar, pra ele mandar o meu e-mail. Lembrando, que você pode utilizar qualquer outro serviço de cliente de e-mail… Pode, inclusive, configurar o seu e-mail, olha! Chegou aqui… Pode inclusive, configurar o seu e-mail, no gmail, no hotmail, pra você acessar a partir do seu hotmail, a partir, do seu gmail, sem problema nenhum também.

Então, olha só! Aqui, chegou o meu e-mail, agora deixa eu tentar enviar um e-mail, a partir, da minha conta. [email protected]… Tá errado… Pronto! Teste 2… Teste 2… [email protected], deixa eu enviar aqui… Pra ver se ele tá funcionando também, pra o envio… Okay?! Ele vai fazer a sincronização agora… Abro minha caixinha de entrada, e pronto! Chegou! Então, tá funcionando belezinha, normalmente, com a configuração automática. Então, tudo o que você precisa fazer, pra começar a utilizar o seu cliente de e-mail: eM Client, seria isso! Fazer essa configuração inicial, colocar o seu endereço de e-mail, pra ele fazer a configuração e pronto! Você, já teria acesso a essa tela aqui… Pra que, você pudesse utilizar o seu endereço de e-mail, normalmente. A sua conta de e-mail, normalmente.

Tudo que você envia e recebe, pelo cliente de e-mail, fica armazenado no seu servidor… Em contrapartida, se você apagar uma mensagem aqui, se eu apagar essa mensagem aqui, agora, ela também vai ser apagada no servidor, quando o meu aplicativo sincronizar. Isso, porque, o eM Client, utiliza por padrão, o protocolo Imap, tá?! É um modelo aí, de envio e recebimento de mensagens, que faz uma espécie de espelho, do que você no seu servidor, com o que você tem aí, no seu cliente de e-mail. Então, todas as alterações aqui, se refletem lá. Qual que é a vantagem do eM Client? Você pode colocar quantas contas você quiser, depois que você compra a licença, ou até duas, se for gratuito… Ele, possui esse painel aqui do lado, que é muito louco, muito maneiro, onde você tem acesso a todo o histórico de mensagens que você trocou com um endereço de e-mail selecionado, aqui nesse caso, deixa eu acessar aqui: Equipe. Se eu clicar aqui, por exemplo, deixa eu ver… Em alguém… Pronto! Aqui, tem uma dúvida de um leitor, olha só… Então, aqui, ele mostra todo o histórico de mensagens, que eu conversei com esse leitor.

Paineis do eM Client
Paineis do eM Client

 

E aqui, eu posso também, exibir todos os anexos que a gente trocou… Então, olha só gente! O eM Client, é sensacional, e obviamente que eu não vou te ensinar aprofundadamente, como você pode mexer nesse cliente de e-mail, tá bom?! Você vai ter que, se aventurar aí, pra aprender a mexer… Se, for necessário, eu faço um tutorial, na próxima… Nos próximos vídeos, só mostrando, como utilizar ele, mas, enfim… Você pode ainda, adicionar calendário, adicionar tarefas, contatos, e assim, por diante… Se você quiser adicionar outras contas, é só acessar: Ferramenta, Contas e clicar aqui em: Nova conta, pra você continuar adicionando mais contas, caso, você tenha mais de uma.

Apenas, uma dica que eu dou pra você: Depois de configurar a sua conta, acesse aqui ela, nas configurações e aqui, em: Imap, marque a opção pra baixar as mensagens, pra uso off-line, assim, você pode acessar as mensagens sem precisar tá conectado à internet, e incluir os anexos… Assim, ele já baixa os anexos automaticamente. Beleza?! Então, é isso gente, a partir daí, você já consegue utilizar o seu cliente de e-mail, e enviar e receber mensagens, sem problema, você já está pronto, pra criar o seu formulário de contato. Como, esse vídeo vai ficar grande pra caramba, eu não vou me estender muito, tá bom?! A gente já vai partir agora, pra adição do nosso formulário de contato, no nosso blog, na nossa página.

Depois que você tem uma conta de e-mail, ou se você já tiver uma conta de e-mail gratuita, você pode acessar aqui, o seu site… E, a partir do painel administrativo, a gente vai utilizar um plug-in, pra gerenciar os nossos formulários de contato. O plug-in, se chama: Contact Form 7. Nos últimos vídeos, eu mostrei, como você poderia instalar e configurar o seu jetpack. O jetpack, também utiliza… Tem recursos, pra formulário de contato, embora eu não goste nem um pouquinho dele, tá bom?! Então, se você utilizar o jetpack, você pode usar sem problema nenhum. A desvantagem, é que o jetpack, cria um formulário de contato específico, toda vez que você precisa utilizar um formulário de contato.

No caso desse plug-in aqui, formulário de contato 7, não é necessário, você cria o formulário, e esse formulário, pode ser utilizado em todas as páginas do seu site, você pode ir espalhando ele pelo seu site, criando apenas, um único formulário. No jetpack, isso já é diferente, pra cada página você cria um formulário, e isso é chato pra caramba. Então, olha só! Pra adicionar o formulário de contato, tá?! Você, claro, vai clicar aqui em: Adicionar novo, na sua tela de plug-ins, no seu painel administrativo do seu site, do seu blog WordPress…

Pesquisando Plugin
Pesquisando Plugin

 

E, a partir, da tela de adicionar novo plug-in, você vai procurar pelo nome do plug-in em inglês: Contact Form 7, eu acho que é tudo junto: ContactForm7, se não for tudo junto, é separado, é só separar… Esse plug-in, é um plug-in premiado, tá bom?! É um plug-in que, é utilizado em blogs do mundo todo… Super útil, deixa eu ver aqui, eu acho que é separado, olha… Contact… É! Separado: Contact Form 7. Ele, já deve aparecer aqui, instalado no meu blog. Então, é um dos plug-ins de contato, mais utilizados do mundo todo. É muito simples, e muito fácil de configurar, você não vai encontrar problema nenhum. Tá aqui, olha! Contact Form 7, já tá instalado no meu blog, por isso, que ele já tá aparecendo aqui, como: Instalado. Depois que você instalar e ativar o plug-in: Contact Form 7. Você vai, ter acesso a este painel aqui, olha: Form Contato, ou Contact Form, o formulário de contato.

Acessando esse painel, form contato, ou contact form, você vai ter acesso a todos os seus formulários de contato, já criados no seu blog. Como, no seu caso, vai ser aí, o primeiro contato, né?! Você, não vai ter nenhum formulário de contato, vai ser seu primeiro contato, que você vai criar, seu primeiro formulário… Você não vai ter nenhum aí, na sua lista. Deixa eu apagar esses formulários aqui, que eu tava utilizando pra teste… Vou apagar eles aqui… Pronto! Eu vou apagar esse aqui também… E aí, a gente vai criar o nosso formulário de contato, do zero! Você vai ver como é fácil! Muito simples! Tá legal?! Vou dar ainda, algumas dicas legais, pra você aproveitar melhor, o seu formulário de contato. Então, só tô excluindo aqui… Pronto!

Depois então, de ter acesso ao meu formulário de contato, eu vou clicar aqui, na opção: Adicionar novo… Onde, a gente vai criar um formulário de contato, a partir do zero. Aqui, eu vou continuar… Ele, já configurou automaticamente o idioma pra: Português do Brasil, é só clicar em: Adicionar novo… Se for outro idioma, é só escolher aqui embaixo. E pronto! Automaticamente, o meu formulário de contato, já vem pré-configurado, tá?! Ele funciona, todo com shortcodes, com códigos, tá bom?! Então, você não vai ter aí, um editor visual, igual ao do jetpack, no jetpack você tem um editor visual, você pode mexer nos botões, nas caixinhas e tudo mais… Mas, o contact form, funciona a partir de códigos… Já vem quase tudo pronto, você quase não vai mexer em nada.

Novo formulário de contato
Novo formulário de contato

Aqui em cima, a gente vai colocar o nome do nosso formulário: Teste, tá?! Vou deixar como teste. Formulário de Teste. Aqui embaixo, o meu formulário de contato, já vem por padrão, com: Um campo, pra pessoa colocar o nome dela, um campo, pra pessoa colocar o e-mail dela, um campo, pra ela colocar o assunto, um campo, pra ela colocar a mensagem e o campo de botão de envio. É o botão, onde a pessoa vai enviar. Se eu quiser colocar, mais algum outro tópico, mais alguma outra coisa, eu posso muito bem, dar uma de esperto e copiar aqui, esse trecho que já tá com código, e colar aqui embaixo… Aqui, eu posso colocar, por exemplo: Seu telefone. Vamos colocar aqui, um número de telefone… Eu, só copiei e colei ali embaixo… Seu telefone… Pronto! E aqui, esse código aqui, é o que a gente vai trocar… Ele, não é útil pra a gente aqui, tá?! Eu vou clicar aqui, em: Gerar Tag, e vou adicionar um novo campo de url? Vamos colocar aqui uma url, né?! Ao invés de: Site. Vamos colocar aqui… Seu site, ao invés de seu telefone?! Pronto!

Então: Url, a pessoa, precisa?! É obrigatório?! Se sim, ou se não, você marca. Aqui, ele já coloca o número do formulário, o ID, isso aqui tudo é opcional… Você não precisa colocar… Este campo, é a url do autor, não precisa, tá bom?! E aí, você pode colocar: Use texto de como espaço reservado. Então, aqui, você tem algumas outras opções, que você pode ou não colocar… O que você precisa fazer, é copiar esse código aqui, e colocar aqui, olha! Pronto! Okay?! A partir daí, já, automaticamente, o formulário de contato, vai passar a exibir aqui embaixo, uma URL, deixa eu ver se é isso mesmo. É isso mesmo! Você tem várias outras opções, que você pode explorar, tem por exemplo: Campo de e-mail, campo de url, campo de número de telefone, já até tem aqui, já pré-configurado… Campos de número, de data, área de texto, que é a mesma área aqui, da mensagem… Enfim… Várias outras opções, que você pode ir configurando automaticamente. Inclusive, um arquivo, olha… Um botão pra upload de arquivo.

Depois de você configurar o seu formulário de contato, eu gosto de deixar ele, o mais simples possível, então, vou até tirar isso aqui… Deixar ele com as opções padrão. Eu vou, acessar aqui embaixo, algumas outras opções… Por exemplo: Aqui, ele tá me dando as configurações de e-mail. Pra quem é que vai esse meu e-mail? Neste caso, ele vai para: [email protected] Claro, você vai colocar aí, o seu endereço de e-mail, o endereço que você quer receber suas mensagens. Aqui, de quem é que vem esse e-mail?! Aqui, tem uma pegadinha, tá gente?! Por padrão, ele pega o nome do usuário, o nome que ele preencheu lá em cima, e coloca aqui, o endereço de e-mail do WordPress. Isso aqui é inútil.

Você acaba não tendo o endereço de e-mail da pessoa. Então, o que é que a gente vai fazer? A gente vai trocar isso aqui, olha, pelo endereço de e-mail da pessoa. A gente vai colocar aqui, olha, entre chaves, claro! Só que a gente vai pegar isso aqui, olha: Your e-mail, olha só. A gente vai pegar esse texto aqui: Your e-mail, e pronto! Vai configurar dessa maneira. Eu acho que você só precisa tirar isso aqui, tá?! Não precisa colocar esse comecinho aqui… Só o shortcode de e-mail, isso já é suficiente pra que você receba na sua caixa de entrada: O nome da pessoa, que ele já forneceu aqui e o e-mail dela, que já vem fornecido também, lá em cima, ele vai puxar pra cá pra baixo, pra o campo de quem tá enviando…

Essa estrutura, é importantíssima, pra que você consiga utilizar, o seu cliente de e-mail, ou o seu webmail, de maneira correta. Quando, você recebe uma mensagem do seu formulário de contato, você pode utilizar o botão: Responder, pra mandar a mensagem, de volta pra pessoa que mandou pra você. Isso, porque, automaticamente, ele já pegou o nome e o e-mail dessa pessoa, e já mandou como se essa pessoa tivesse mandando do e-mail dela, a mensagem pra você, isso facilita muito a sua vida. Então, configurando dessa maneira, você consegue então, receber as mensagens e utilizar o botão: Responder, pra já, responder diretamente pra o endereço de e-mail, da pessoa que mandou pra você. Você também tem aqui do lado, a estrutura da mensagem que você vai receber… Ou seja, a mensagem, propriamente dita, o quê que você vai ver no corpo dessa mensagem?! De quem veio, o assunto e aqui, a mensagem.

Se, você quiser colocar qualquer outra informação, como por exemplo: A url da página, de onde a pessoa mandou o e-mail, você pode criar um campo aqui em cima também, e colocar aqui embaixo, sem problema nenhum! Todos os códigos, dentro do formulário de contato, podem ser utilizados em qualquer um desses campos, pra configurá-los. Então, aqui, já tem a estrutura, já pré-configurada, você nem precisa mexer nisso, tá legal?! Já vem tudo bonitinho aí… Aqui, outras pessoas, enfim… Várias outras configurações, que você pode aprender a utilizar, ou pode deixar do jeito que está. Aqui embaixo, você tem aqui, as configurações de mensagens, que vão ser exibidas pra pessoa, no formulário de contato. Ou seja, depois que ela enviar a mensagem, utilizando a página de contato, vai aparecer essa mensagem: Sua mensagem foi enviada com sucesso! Obrigado! Você pode colocar aqui, qualquer outro texto: Responderei assim que possível… Muito obrigado pelo seu contato… Enfim… A mensagem que vai ser exibida, caso, ele consiga enviar a mensagem com sucesso.

Aqui embaixo, se a mensagem falhar, se ocorrerem erros no preenchimento dos campos, enfim… Várias opções aqui, que você, automaticamente, já vai conseguir identificar por padrão. Depois de você criar o seu formulário de contato, clique em salvar… E, o seu formulário de contato, será gerado e salvo, pra que você possa colocá-lo, onde você quiser… Deixa só, ele terminar de gerar aqui… E pronto! A partir daí, olha só! Você pode voltar, lá no seus formulários de contato, ele já te deu aqui, olha, o shortcode, desse formulário… Mas, vamos lá no nosso formulário de contato, pra que você possa ver que ele já foi criado. Tá aqui, formulário de teste, e aqui, ele me dá o shortcode, do meu formulário de contato. Pra quê, que serve esse código aqui?! Isso aqui gente, é nada mais, nada menos, do que o meu próprio formulário de contato.

Em qualquer página, ou em qualquer widget, em qualquer post de blog, que eu colocar esse código… Vai aparecer o meu formulário de contato. Vamos fazer um teste?! Como é que a gente vai criar então, a nossa página de contato?! Vamos clicar aqui em: Páginas, você pode, já clicar em adicionar nova página, não tem problema, tá bom?! Vou clicar aqui, em: Adicionar nova… E, ele vai me dar a pasta, a página aliás, pra mim, criar uma nova página. Você pode colocar esse código, dentro de um post de blog também. Dentro de um artigo, pode colocar um formulário de contato também, sem problema. Você pode colocar em qualquer lugar. Vou colocar aqui, olha: Teste, e aqui embaixo, no corpo da minha página, né?! Lembrando, que isso aqui é uma página, não é um artigo de blog, tá?! Funciona, basicamente do mesmo jeito… E aqui, embaixo, deixa ele terminar de carregar… Eu vou colocar o meu shortcode.

Criando página de contato
Criando página de contato

 

É só isso, que eu preciso fazer gente! Olha só! Vou clicar em: Publicar, e pronto! A minha página de contato, estará prontinha, para uso. Deixa só, ele publicar… Depois que ele publicar a página, tá carregando aqui, mas eu já vou dar uma de esperto, e vou abrir aqui na outra guia… Pra mim ver a página… Olha só! Ele, vai carregar aqui. Como, a página: Teste, é a primeira que eu crio do tipo, ele automaticamente, já me deu aqui, olha: clube.design/teste. E, olha só, o que é que vai acontecer… Vai aparecer aqui, ainda tá com o cache antigo, do meu blog… Opá! Deixa eu ver aqui… /teste, é, tá com um probleminha aqui, na nomenclatura, né?! Deixa eu colocar aqui: /formteste, ele tá dando conflito ali, com uma pasta que eu já tenho dentro do meu blog. Então, deixa eu colocar: form teste, e vou clicar aqui em… Deixa eu atualizar… Pronto!

Não se preocupe, vocês não vão passar por esse tipo de problema, no meu caso, é porque eu já tinha… Eu tenho uma pasta dentro do meu servidor, que se chama: Teste. Então, por isso que ele abriu aquela página lá. Okay?! Então… Pronto! Abrir aqui, form teste… Deixa ele terminar de atualizar… Pronto! Agora, eu vou visualizar aqui, a minha página… Agora sim, vai dar tudo certo, olha! O endereço do site, olha: clube.design/formteste… E, olha que legal! Está aqui, a minha caixinha… A minha página de contato. Esses botões aqui, é por causa do meu plug-in de edição de página, tá gente?! Então, isso aqui, não vai aparecer pra vocês.

Então, aqui, eu tenho olha, a minha página de contato, onde a pessoa bote digitar o nome e um e-mail, vamos fazer um teste aqui?! Nome: O nome da pessoa é Fulano de Tal, o e-mail dela é: [email protected]… O assunto é: Testando Formulário… E, a mensagem é: Isto é um teste. Pronto! Depois disso, eu vou clicar aqui, em enviar e vamos ver, se o meu formulário, vai funcionar. Olha só! Sua mensagem foi enviada com sucesso! Opá! E, a mensagem já chegou aqui, no meu cliente, olha só que legal! Olha que bacana! Vejam a estrutura, olha: Clube do Design, Teste… Aqui o nome da pessoa, já vem com o endereço de e-mail dela… Fulano de Tal, okay?! Olha só, que bacana! Então, o meu formulário de contatos, tá funcionando, e claro! Se você fez do mesmo jeito, o seu formulário de contato, também vai funcionar. Depois que você criar a sua página de contato, okay?!

Página de contato criada
Página de contato criada

 

Aqui no meu caso, ela ficou com a url: clube.design/formteste. Você pode clicar em editar, e mudar pro endereço url que você quiser… Obviamente, caso não exista uma outra página com o mesmo nome, na parte de páginas, nem na lixeira de páginas… Tá bom?! A url, lá, é única! Você não pode criar… Você não pode utilizar a mesma url, pra mais de uma página… Então, você precisa apagar páginas, caso tenha a mesma url… Ou, utilizar endereços diferentes… Depois, que você criar então, a sua página… Você, vai acessar aqui, na opção: Aparência, o menu. Você vai, adicionar então, essa sua página de contato, ao seu menu superior, ao seu menu lateral…

Enfim, onde você tiver o seu menu configurado… Eu já ensinei como configurar o menu, nas aulas anteriores. Então, se você já viu como configurar o menu… Não tem problema! É só você acessar o painel de menu, localizar aqui, a sua página, tá?! No painel de página… Tem vários painéis aqui… Se, não tiver aparecendo, é só clicar aqui em cima, em: Opções de tela, e marcar a opção: Páginas… Tá bem aqui, olha só! E aí, você vai procurar a sua página. As mais recentes, ele já mostra… Ele, já tá mostrando aqui, olha: Página de Teste. É só clicar em: Adicionar… E, automaticamente, claro! Depois de adicionar no menu que eu quero, aqui tá no menu errado, eu quero no menu superior… Tá bom?! Aqui, no Main Menu. Deixa eu selecionar ele aqui, pra mostrar pra você, como é que funciona. Então, eu mudei de menu aqui, que é o menu principal, que tá aqui, em cima do meu blog… Vou clicar aqui, em TESTE, adicionar esse teste ao meu menu. Ele vai aparecer aqui, no finalzinho… Pronto! Já apareceu, ele no final. Vou salvar o meu menu… E pronto! Depois, de salvar o meu menu, eu vou voltar aqui, na minha página inicial… Vou atualizar a página, pra que, vocês possam ver o menu que vai aparecer aqui no cantinho, no meu menu superior. Deixa só, ele carregar aqui…

Pronto! Olha só! Apareceu aqui, já, no meu menu… A partir de agora, a pessoa pode clicar aqui em: Teste, e pode acessar a minha página de contato. Como se fosse a minha página de contato, pode digitar o e-mail, a mensagem dela… Se você quiser, você pode tá?! Deixa eu editar aqui essa página. Quando você cria seu formulário de contato, você pode colocar uma mensagem antes, ou depois, tanto faz! O importante, é que você coloque qualquer informação na sua página, que você ache que seja importante, que seja útil! Por exemplo: Se eu colocar um texto, antes do shortcode do formulário de contato, esse texto, vai aparecer antes do formulário.

Então, aqui, olha, eu posso colocar aqui: Digite a sua mensagem no formulário abaixo. Pronto! Se eu colocar isso, em cima do meu shortcode, ele vai inserir o texto, acima do meu formulário de contato. Se eu colocar um texto abaixo… Pronto! Olha só! Deixa eu atualizar aqui… Só pra você ver como ficou! Eu não uso esse texto, tá?! Você pode visualizar aqui, o formulário de contato do Clube, você vai ver que eu uso um texto diferente, é só você acessar lá. Então, olha só! Depois, eu vou atualizar aqui, a página. Pra você ver, como é que funciona! Pronto! Olha só! A mensagem antes do formulário e a mensagem depois do formulário. Okay?!

Então gente! É isso, tá?! Pra você criar um formulário de contato, basta você seguir esses passos. Você consegue, sem maiores dificuldades, isso e um procedimento muito simples, muito fácil! E, claro que: A sua página vai ter um design, de acordo com o seu tema, de acordo com as configurações do seu blog. Mas, o importante é que esse formulário de contato, seja funcional. Realize testes! Faça um teste, digite uma mensagem, verifique se está chegando tudo bonitinho… Faça o mesmo teste que eu fiz no webmail também. Teste o seu e-mail, pra ver se tá funcionando tudo okay, tudo beleza… Pra que você, possa ficar tranquilo aí, utilizando o seu formulário de contato.

Então, nessa vídeo-aula, eu mostrei pra você: Não só, como você pode criar o seu formulário de contato e adicionar ele no seu blog. Lembrando que esse shortcode, pode ser adicionado em qualquer página, em qualquer lugar do seu blog, que vai aparecer um formulário de contato ali. Eu também mostrei pra vocês, como criar e gerenciar as suas contas de e-mail… E, como instalar e gerenciar um cliente de e-mail, local. Okay?!

Você pode configurar essa conta de e-mail, no seu celular, no seu tablet, em qualquer outro dispositivo… Pra isso, você conta, aqui embaixo, ao lado de cada um dos endereços de e-mail, com a opção: Mais e a opção: Configurar cliente de e-mail. Onde, você pode… Você tem acesso, na verdade, a todas as configurações, olha! Todas as informações que você precisa, pra configurar o seu endereço de e-mail. Você pode utilizar, essa aqui: Configuração não SSL, sem problema nenhum, tá?! Embora seja, uma conexão sem certificado de segurança… Se você comprou o certificado de segurança, ou o seu serviço de hospedagem, oferece conexões seguras, você pode utilizar aqui ao lado. Mas, você pode usar essa aqui, sem problema nenhum.

Então, aqui embaixo, você tem as configurações, olha: O endereço de e-mail, tá?! Que é o mesmo nome de usuário, a senha… O que você vai colocar no servidor de entrada, na configuração lá, do seu celular: Isso aqui, olha, se você configurar manualmente. Servidor de saída, isso aqui também. Então, aqui você tem as informações necessárias, pra você configurar o seu cliente de e-mail, no seu aparelho telefônico. Se você quiser e achar legal, eu posso fazer uma aula, ensinando depois, ensinando como configurar um android por exemplo, que a configuração é, basicamente a mesma, pra todos os outros tipos de celulares, tá?!

Então, é isso gente!

Espero que você tenha gostado da aula. Desculpem a demora! Eu vou tentar gravar com mais frequência… Se você gostou do vídeo, não esquece de clicar em gostei. Compartilhe com seus amigos… Nas suas redes sociais… No Twitter, no facebook, isso ajuda pra caramba… E, se você ainda não faz parte do Clube do Design, é só clicar em: Inscrever-se. Essa vídeo-aula, é de uma série de vídeos, onde eu mostro como Criar um Portfólio em WordPress… Você pode acessar a série completa, clicando na playlist, que tá na home do nosso canal: youtube.com/c/clubedodesign.

Não esquece de visitar também, o clube.design.

E, a gente se vê no próximo vídeo. Um forte abraço! Tchau! Tchau!

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here