Formulário em PHP Pronto

Formulário em PHP Pronto

Neste tutorial passo a passo veja como pegar dados de um formulário com php e enviar para a caixa de e-mail.

OBS: Pessoal eu reparei que tem muitas dúvidas sobre enviar dados no formulário com php.

Então fiz um formulário mais SIMPLES COM PHP para facilitar aqueles que estão com dificuldades!

Nesta seção, projetaremos uma estrutura simples na tag <form>. 

temos dentro da tag <form>  as tags <label>, <input>, <textarea> e <button>. Essas tags usaremos para criar o nosso formulário de envio de email com php.

Como pegar dados de um formulário com php?

Segui o passo a passo abaixo.

Vamos Adicionar o HTML

  <form class="form" action="enviarDados.php" method="post">
      
      <div class="input-box">
          <label>Nome completo</label>
          <input type="text" name="nome" placeholder="Digite seu nome" required="" >
      </div>
      
      <div class="column">
      
          <div class="input-box">
            <label>E-mail</label>
            <input type="email" name="email" placeholder="Digite seu e-mail" required="" >
          </div>
      
          <div class="input-box">
            <label>Telefone</label>
            <input type="text" name="telefone" placeholder="Digite seu telefone" required="">
          </div>
      
      </div>
      
      <div class="gender-box">
      
        <label>Sexo</label>
        
        <div class="gender-option">
          
            <div class="gender">
            
                <input type="radio" name="sexo" value="Masculino" id="check-male">
                <label for="check-male">Masculino</label>
          
            </div>
          
            <div class="gender">
            
               <input type="radio" name="sexo" value="Feminino" id="check-female">
               <label for="check-female">Feminino</label>
            
            </div>

        </div>

      </div>
      
        <div class="input-box">
        
            <label>Quero aprender a fazer ?</label>                        
            <div class="column">
            
                <div class="select-box">
                
                    <select name="aprender">
                      
                        <option value="" selected>Selecione</option>
                        <option value="Formulários">Formulários</option>
                        <option value="Menus">Menus</option>
                        <option value="Rodapé">Rodapé</option>
                        <option value="Botão">Botão</option>
                        <option value="Galeria de Fotos">Galeria de Fotos</option>
                    
                    </select>
                
                </div>
            
            
            </div>
      
        </div>
        
        <label class="naoexibir">
            <span>Não preencher:</span><br>
            <input type="text" name="url" value=""></p>
        </label> 

        <div class="input-box">

            <textarea name="mensagem" cols="30" rows="3" required></textarea>
        
        </div>
      
      <button>Enviar Dados</button>
  
    </form>

</div><!--container-form-->

Estrutura Código CSS

Para conseguirmos um design mais atraente, vamos adicionar algumas propriedades  CSS  para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades  CSS para estilizar o nosso Formulário com css.

.container-form {

  position: relative;
  max-width: 500px;
  width: 100%;
  margin: auto;
  background: #FFF;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

}

.container-form .title-form {
  font-size: 1.2em;
  color: #000;
  font-weight: 600;
  text-align: center;
}

.container-form .form {
  margin-top: 15px;
}

.form .input-box {
  width: 100%;
  margin-top: 10px;
}

.input-box label {
  color: #000;
}

.form :where(.input-box input, .select-box) {
  
  position: relative;
  height: 35px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #333;
  margin-top: 5px;
  border: 1px solid #A4E3F0;
  border-radius: 6px;
  padding: 0 15px;
  background: #E9F8FB;

}

.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form :where(.input-box textarea) {
  
  position: relative;
  height: 100px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #333;
  margin-top: 5px;
  border: 1px solid #A4E3F0;
  border-radius: 6px;
  padding: 10px;
  background: #E9F8FB;

}

.input-box textarea:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form .column {
  display: flex;
  column-gap: 15px;
}

.form .gender-box {
  margin-top: 10px;
}

.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}

.form .gender {
  column-gap: 5px;
}

.gender input {

  accent-color: #007CFF;
  float: left;
  width: 15px;
  height: 15px;

}

.form :where(.gender input,.gender textarea, .gender label) {
  cursor: pointer;
}

.gender label {
  color: #000;
}

.address :where(input, .select-box) {
  margin-top: 10px;
}

.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #808080;
  font-size: 1em;
  background: #e9f8fb;
}

.form button {
  height: 40px;
  width: 100%;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #007cff;
}

.form button:hover {
  background: #28D1F2;
}

/*Anti-span*/
.naoexibir { display:none; }

Vamos Adicionar o PHP

Nesta seção, usaremos o arquivo enviarDados.php para pegar os campos digitado no formulário e enviar para o arquivo php. Depois, você pode inserir novos campos, dependendo da sua necessidade.

O arquivo acima ao ser chamado vai apresentar o formulário HTML, ao clicar no botão de enviar vai chamar o enviarDados.php

Vamos adicionar o Script PHP completo

<?php
  
  if(isset($_POST['url']) && strlen($_POST['url']) == '0' ) {

    //1 – Definimos Para quem vai ser enviado o email
    $para = "contato@site.com.br";
    
    //2 - resgatar o nome digitado no formulário e grava na variavel $nome
    $nome  = $_POST['nome'];
    $email = $_POST['email'];
    
    // 3 - resgatar o assunto digitado no formulário e  grava na variavel //$assunto
    $assunto = 'Mensagem do Formulário de contato SIMPLES Loop Nerd';
    
    //4 – Agora definimos a  mensagem que vai ser enviado no e-mail
    $data      = date('d/m/Y H:i');
    $mensagem .= "<br> <strong>Nome:  </strong>".$_POST['nome'];
    $mensagem .= "<br> <strong>E-mail:  </strong>".$_POST['email'];
    $mensagem .= "<br> <strong>Telefone:  </strong>".$_POST['telefone'];
    $mensagem .= "<br> <strong>Sexo:  </strong>".$_POST['sexo'];
    $mensagem .= "<br> <strong>Quero aprender a fazer:  </strong>".$_POST['aprender'];
    $mensagem .= "<br> <strong>Enviado em:  </strong>".$data;
    $mensagem .= "<br> <strong>Mensagem: </strong>".$_POST['mensagem'];

  //5 – agora inserimos as codificações corretas e  tudo mais.
    $headers =  "Content-Type:text/html; charset=UTF-8\n";
    $headers .= "From:  Mensagem do site Loop Nerd<contato@site.com.br>\n"; //Vai ser //mostrado que  o email partiu deste email e seguido do nome
    $headers .= "X-Sender:  <contato@site.com.br.com.br>\n"; //email do servidor //que enviou
    $headers .= "X-Mailer: PHP  v".phpversion()."\n";
    $headers .= "X-IP:  ".$_SERVER['REMOTE_ADDR']."\n";
    $headers .= "Return-Path:  <contato@site.com.br.com.br>\n"; //caso a msg //seja respondida vai para  este email.
    $headers .= "Reply-To: ".$email."\n";
    $headers .= "MIME-Version: 1.0\n";

    mail($para, $assunto, $mensagem, $headers);  //função que faz o envio do email.

    echo '
            <div style="max-width:320px; padding:50px; border:3px solid #007cff; color:#007cff; font-family: tahoma; background:#E9F8FB; text-align:center; font-weight:800; margin:180px auto;">
           
              <p style="font-size:1.3em;">'.$nome.', obrigado!</p> 
              <p style="font-size:1.1em;">Sua mensagem enviada com sucesso !</p>
            
            </div>
          ';

    echo    '<meta HTTP-EQUIV="Refresh" CONTENT="3;URL=index.html">';

    exit; 

  }//Fecha verifica se é url vazia

?>

Observação: o que VOCÊ vai precisar mudar no arquivo “enviarDados.php”

Onde estar: contato@site.com.br

Mude para: contato@seusite.com.br

Exemplo: contato@loopnerd.com.br

Combinando as Três seções acima com Html, Css e PHP temos o seguinte Resultado!

Veja o Resultado baixo faça o teste!

Lembrando que esse é um script php fácil com poucos códigos. para quem não entende de programação essa é uma boa opção.

Como enviar dados do formulário para E-mail?

Baixar Código Veja Funcionando

Conclusão

Formulário em PHP Pronto

Neste artigo, você aprendeu o passo a passo de como criar Formulário em PHP, existem diversas formas de criar formulários com campos diferentes.

Fica o desafio para você tentar criar um novo formulário com outros campos diferentes a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)