Aprenda a criar um formulário de contato moderno, responsivo e funcional utilizando HTML, CSS e PHP. Envie para email.
1) A primeira etapa é criar o Frontend
Para a criação do Frontend, foi utilizado o framework CSS Bulma.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Formulário de contato</title> <link rel="stylesheet" href="css/bulma.min.css"> </head> <body> <section class="section"> <div class="container"> <div class="columns is-centered"> <div class="column is-half"> <h1 class="title has-text-centered">Formulário de Contato - Canal TI</h1> <form action="enviar.php" method="POST"> <div class="field"> <label class="label">Nome</label> <div class="control"> <input name="nome" class="input" type="text" placeholder="Seu nome"> </div> </div> <div class="field"> <label class="label">Email *</label> <div class="control"> <input name="email" class="input" type="email" placeholder="Seu email"> </div> </div> <div class="field"> <label class="label">Assunto</label> <div class="control"> <div class="select is-fullwidth"> <select name="assunto"> <option>Reportar erro</option> <option>Anúncios</option> <option>Outro</option> </select> </div> </div> </div> <div class="field"> <label class="label">Mensagem *</label> <div class="control"> <textarea name="mensagem" class="textarea" placeholder="Deixe sua mensagem" maxlength="2000"></textarea> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-link is-medium">Enviar</button> </div> </div> </form> </div> </div> </div> </section> </body> </html> |
2) A segunda etapa é programar o backend com o PHP
enviar.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?php date_default_timezone_set('America/Sao_Paulo'); require_once('src/PHPMailer.php'); require_once('src/SMTP.php'); require_once('src/Exception.php'); use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\SMTP; use PHPMailer\PHPMailer\Exception; if((isset($_POST['email']) && !empty(trim($_POST['email']))) && (isset($_POST['mensagem']) && !empty(trim($_POST['mensagem'])))) { $nome = !empty($_POST['nome']) ? $_POST['nome'] : 'Não informado'; $email = $_POST['email']; $assunto = !empty($_POST['assunto']) ? utf8_decode($_POST['assunto']) : 'Não informado'; $mensagem = $_POST['mensagem']; $data = date('d/m/Y H:i:s'); $mail = new PHPMailer(); $mail->isSMTP(); $mail->Host = 'smtp.gmail.com'; $mail->SMTPAuth = true; $mail->Password = 'senhadoemail'; $mail->Port = 587; $mail->isHTML(true); $mail->Subject = $assunto; $mail->Body = "Nome: {$nome}<br> Email: {$email}<br> Mensagem: {$mensagem}<br> Data/hora: {$data}"; if($mail->send()) { echo 'Email enviado com sucesso.'; } else { echo 'Email não enviado.'; } } else { echo 'Não enviado: informar o email e a mensagem.'; } |
Dessa forma, temos uma página bem estilizada e totalmente funcional.
Download do código-fonte Formulário contato HTML, CSS, PHP
 e enviar para email.){kind=link}