CRIANDO UM FORMULÁRIO DE CONTATO COM HTML, CSS e PHP

e aí pessoal igor oliveira por aqui sejam bem vindos a mais um vídeo eo vídeo de hoje é na verdade um pedido de um dos inscritos aqui também um aluno lá do meu curso tá ele está montando o primeiro projeto dele ele está querendo criar uma página de contato ele criou a página de contato em html css então nesse vídeo aqui eu vou mostrar como criar um formulário com html php beleza vamos lá pra tela então vamos começar aqui pelo nosso html tata usando aqui o viés code e ele já me dá esse boilerplate aqui né pra começar bem vou colocar o contato é uma página de contato ea gente vai começar a montar aqui a nossa página de contato tá louco vou colocar aqui umas action on que vai se contente e aqui dentro dessas action a gente vai ter a dívida do nosso formulário tá classe aqui é o formulário de contato então vou colocar aqui a classe contato vou colocar aqui um título h3 posso chamar o formulário de contato e vou criar aqui agora então nosso formulário forma beleza show só está aqui show de bola tá aqui na nossa tag forma eu tenho que colocar alguns atributos mas eu vou criar os campos depois eu volto aqui tá o primeiro aqui input vão ter três campos de input verdade são 21 text é tá e vai ter um botão que se impute também do tipo somente agora vamos lá vamos começar a colocar aqui as propriedades o valor dele vai ser enviar esse é o tipo desde que vai aparecer no botão né sr eu vou colocar também uma classe que eu vou chamar the field ela vai dar um estilo ilsinho né a esse elemento eu preciso colocar um nome pra gente poder usar depois lá no php vou colocar aqui nessa de e eu preciso também de um place holder que é pra falar tipo digite sua mensagem aqui por exemplo tá só que eu posso deixá la na mesma linha não precisa ficar aqui fica melhor assim aqui nesse input ele também vai ter a classe field vai ter nem é e meio vai ser o email da pessoa que está querendo entrar em contato e eu vou colocar um player holder e meio aqui a mesma coisa também class aqui vai ser um filme e também nem me nome chamar de nené deixar tudo em inglês aqui pode ser o nome beleza vamos lá agora sim esse formulário de contato aqui também vai ter uma creche o chamado informe mesmo é vai ter um método ou seja ele vai enviar esses dados aqui através do método post e tem uma action um tac é o arquivo que ele vai chamar o arquivo que até porque ele vai chamar poderia colocar o php aqui nesta mesma página mas eu preferi separar ele está em todo o mundo perde apenas um arquivo separado ele vai ser o arquivo e meio ponto e hp beleza então vou salvar aqui vou olhar como é que isso aqui tá lá no navegador iraque deixou diminui aqui um pouco da beleza então a gente já tem que é o nosso formulário só que ele está muito feio né então vamos ajustar um pouquinho colocando um css aqui tá eu vou botar um time lapse votar bem rapidinho pra gente não perder muito tempo com isso porque o foco aqui é a parte que hp [Música] [Música] beleza vamos executar aqui então estou aqui está o nosso formulário tá aqui eu deveria ter posto também a classe field ele vai ficar um pouquinho maior a beleza tá então a gente tem aqui o nosso formulário só que se eu clicar aqui e envie agora ele vai dar esse erro porque a gente ainda não tem o nosso arquivo php beleza deixa criar aqui um arquivo que a hp vai se chamar em meio ponto e agora p tem que ser exatamente o nome que a gente colocou aqui no formulário tá tem que ser exatamente esse nome aqui que a gente colocou aqui beleza em meio ponto e hp e agora a gente vai começar o nosso código aqui então quando a gente fica lá enviar ele vai vir pra esse arquivo aqui né a gente vai começar a executar o script que a gente está criando aqui vamos a primeira coisa que eu tenho que fazer é pegar os dados do formulário eu vou criar que variáveis está vai ser nome e-mail e mensagem chamack assim tá e vamos pegar eles aqui vou colocar aqui o que vou pegar aqui via beleza e aqui eu vou pegar o que eu quero no caso da onemi esse nome aqui tá que a gente vai pegar aqui da variável post ele é exatamente o nome que a gente deu aqui então nem me e meio e meça de não vão ser esses nomes aqui tá vou copiar aqui passar então nem me e meio então já estou pegando essas peças mariá vezes aqui o ideal é que talvez antes disso verifique se as variáveis elas tão elas têm valores principalmente acho que o e mail então vou colocar aqui ó 7 eu vou passar aqui olha isso daqui é dizer que tem coisa foi foi acertada e também tenho que ver se ela não é vazia então se o email ele foi preenchido ele não foi preenchido com o valor vazio a gente vai executar isso da equipa na primeira parte é isso aqui eu peguei um nome meio mensagem agora eu preciso montar a nossa mensagem montar o nosso email para enviar então vou criar que mais algumas variáveis que precisam saber para quem vaiasse meio quem vai receber esse meio no nosso caso esse aqui é um e mail mesmo tarde chegamos aqui sem que seja página o formulário de contato programador br. com então vou mandar um e mail pra mim mesmo porque eu quero que quando o usuário interage com os dados dele eu recebi o e-mail é tão beleza para eu passar aqui contato a roupa programador br. com beleza outro dado que eu preciso é saber qual quer o assunto é preciso ter um assunto no meu e-mail eu vou colocar aqui um assunto para quando olhar o e mail eu já sabia que ele veio do formulário de contato tá então é eu vou colocar contato programador br quando olhar esse assunto eu já sei que ele veio do formulário de contato beleza sabe gect beleza eu vou criar agora então o corpo do email tá e nesse corpo do e-mail chamar aquele barulho a gente vai precisar passar os dados do nosso usuário então vou pegar primeiro nome e aqui eu vou concatenar com o nome lá que ele passou né nome e vou colocar aqui então mais do que um traço vou colocar aqui é o seguinte barra m para pular uma linha tá aí vou até escrever aqui embaixo nome e vou colocar aqui o email que ele passou lá também então um e mail a mesma coisa aqui vou concatenar komba n uma linha e aí sim vou pegar aqui mensagem né é uma coisa e vou concatenar que começa na verdade chama de mensagem aqui beleza mensagem pronto então já tem aqui o corpo da minha mensagem o corpo do meu e mail agora eu preciso preencher uma das partes mais importantes que o header né é o cabeçalho desse meio esse cabeçalho ele obrigatoriamente tem que começar com from dois pontos e agora a gente tem que ser um e mail mas esse meio ele tem que pertencer ao domínio no qual o nosso script vai estar rodando como vou colocar essa página que de formulário no programador br.

com por exemplo esse meio aqui ele precisa ser um email que termina com um programa do br. com eu vou colocar por exemplo como se eu tivesse um email igor arroba programador br. com tá esse mail criei lá só nunca usou num evento nascimento o nome mãe de milho para esse meio aqui manda pra contato com o programa do 10 pontos aí aqui ó eu vou colocar uma quebra de linha barra r porque o barra r é como se quebra linha em alguns sistemas operacionais nos outros é barra a eni está aqui eu também poderia colocar barra r ba e militar seria até uma boa prática digamos assim e continuando aqui eu preciso colocar que pai e tio e porque eu preciso colocar se refletiu bem como coloquei aqui no flu eo guarda-roupa programador br.

com todo homem que chegava vir desses desse meio então se eu apertar a responder eu estaria respondendo para esse meio né mas eu não quero responder para o e mail da pessoa que me mandou mensagem então tem que passar aqui replantio e aí eu vou passar aqui o email que ele preencheu lá tá aqui eu também vou colocar aqui em baixo pra ficar mais fácil a gente enxergar tá bom então replantio e meio novamente eu vou colocar aqui o barra r volcom katena com mais uma coisinha que é ex meller dois pontos pela hp barra a versão do php tá só que eu não sei qual é a versão do meu pai hp então vou deixar que o ph permitida qualquer versão dele então vou concatena isso daqui com php acham que é uma função do php que retorna o valor dele tá então acabei de preencher aqui tudo está tudo pronto aqui agora eu preciso chamar a minha função meio tá a minha função meio ela vai receber future depois de separado por vírgula o bari e o header beleza e essa função aqui quando ela é executada ela retorna verdadeiro ou falso verdadeiro é quando ela foi executada e mail foi enviado e falsa quando houve algum erro então vamos colocar aqui ó o iff vai mandar executar ela vai retornar verdadeiro ou falso então se entrar aqui no if eu sei que o e mail foi enviada com sucesso vou escrever isso aqui na tela e mail enviado com sucesso e se não eu vou colocar aqui houve um erro colocar o e mail não pode ser enviado não pôde ser enviada à beleza não vou colocar aqui tratamento de erro nesse caso nos colocar aquele ponto e vírgula as vendas são as que se nenhum não aqui beleza tá é nesse caso eu não vou tratar o erro mas eu poderia tratar o erro aqui dentro da cheka qual foi o erro seria até a melhor coisa a se fazer neste caso aqui não vou fazer nada então salvei aqui vou colocar aqui ó igor oliveira tá meu e mail contato roupa programador br. com e aqui uma mensagem de tess tá se eu tentar executar isso aqui agora o que vai acontecer vamos ver se ele vai me mostrar o código porque isso aconteceu bem porque isso é que eu tô rodando na minha pasta simplesmente abrir a minha pasta e coloquei lá a gente tenta fazer isso com php não funciona porque o nosso navegador vai pegar isso aqui vai tentar abrir e ele não vai entender que isso aqui é php porque o nosso navegador ele não interpreta php pra gente conseguir executar o php a gente precisa que os nossos arquivos estejam num servidor apache um servidor web da vida tá eu vou simular um ataque com um amp não deixou abrir aqui o map então iniciei a que o map omã pi ele roda dentro dessa pasta ele vai executar tudo que está aqui dentro dessa pasta na verdade essa daqui e aí eu crie uma pasta contato e aqui dentro de contato eu vou colocar os arquivos que a gente criou e meio php e o índex ponto php tá pra acessar aqui agora vem aqui local rusty está sendo 3 mil e coloco aqui contato e beleza torrô dando aqui a minha meu contato vou colocar aqui e igor oliveira é contato arroba programador br. com e essa minha mensagem então agora se a gente tentar executar aqui vai dar um erro na verdade não era pra dar um erro 500 deixa eu ver aqui o que está errado aqui já estou vendo aqui ó asfalto ponto aqui o ponto aqui o ponto de botar ele aqui fica melhor aqui tá e eu tô vendo também ó assim e eu percebi que eu coloquei um parênteses a mais aqui não tem os parênteses aqui tá claro olha só aqui também coloquei os parênteses acho que estou ficando maluco beleza então não tem esses parentes aqui vamos novamente copiar pra cá só o e mail agora coloque não replace agora sim a gente vai tentar novamente [Música] o e mail não pode ser enviado beleza porque aconteceu isso porque a gente precisa de um servidor de verdade pra poder mandar um e mail a gente precisa de um servidor que seja capaz de enviar um e mail e esse nosso servidor feito é que o servidor está rolando na nossa máquina não é capaz de enviar um e mail mas parece que tudo está funcionando direitinho então se a gente colocar esses arquivos aqui lá no nosso servidor vai tudo funcionar vamos testar isso então eu vou pegar aqui vou abril file zila deixou de se sentar aqui ó eu abria que o fazia já está conectado lá no meu servidor tá então vou colar os meus arquivos aqui vamos lá beleza agora eu vou abrir programador br.

com barra prog br contato que a pasta que eu criei lá no meu servidor tá bom vamos abrir aqui tá aqui o meu formulário de contato vou colocar aqui os mesmos dados e igor oliveira contato arroba programador br. com e aqui eu vou colocar esse é um meio de teste e eu vou enviar email enviado com o sucesso pronto funcionou porque agora o nosso código está rodando lá no nosso servidor tá e aqui está o nosso e mail chegou direitinho não melhorou oliveira contato algum problema do bep ponto com a mensagem este é um meio de teste aqui a gente pode ver que veio do igor a robô programado br. com para contatar o programa do 10 ponto com que esse meio que estou usando aqui e como eu preenchi lá no nosso formulário contato arroba programa do band.

com.