Formulário Inputs com Bordas Animadas

Formulário Inputs com Bordas Animadas

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

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

temos dentro da tag <form>  as tags <label>, <input>, <textarea>, <h2> 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="formulario" method="post" action="enviaDados.php">
        
        <h2 class="titulo">Formulário de Contato</h2>

        <label class="label">
            
            <input type="text" class="input-bordas" placeholder="Nome" required="">
            <span class="focus-border"> <i></i> </span>
        
        </label>

        <label class="label">
            
            <input type="text" class="input-bordas" placeholder="E-mail" required="">
            <span class="focus-border"> <i></i> </span>
        
        </label>

        <label class="label">
            
            <input type="text" class="input-bordas" placeholder="Assunto" required="">
            <span class="focus-border"> <i></i> </span>
        
        </label>

        <label class="naoexibir">
            <span>Não preencher:</span><br>
            <input type="text" name="url" value=""></p>
        </label> 

        <label class="label">
            
            <textarea type="text" class="input-bordas textarea" rows="4" placeholder="Assunto" required=""></textarea>
            <span class="focus-border"> <i></i> </span>
        
        </label>

        <button class="button-form borda-inversa"> Enviar</button>


    </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 inputs animado.

.formulario  .titulo { 

  color: #757575;
  font-size: 1.5em;
  margin-bottom: 10px;
  padding-bottom: 10px;

}

.formulario {
   
  max-width: 500px;
  margin: auto;
  background: white;
  overflow: hidden;
  padding: 20px;


}

:focus{outline: none;}

.label { 

  float: left; 
  width: 100%; 
  margin-bottom: 25px; 
  position: relative;

}

.input-bordas{
  
  font: 15px/24px "Lato", Arial, sans-serif; 
  color: #333; 
  width: 100%; 
  box-sizing: border-box; 
  letter-spacing: 1px;
  border: 1px solid #ccc; 
  padding: 7px 14px 9px; 
  transition: 0.4s;

}

.textarea { resize:none!important; }

.input-bordas ~ .focus-border:before,
.input-bordas ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.2s; transition-delay: 0.2s;}
.input-bordas ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.input-bordas ~ .focus-border i:before,
.input-bordas ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.2s;}
.input-bordas ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.input-bordas:focus ~ .focus-border:before,
.input-bordas:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.input-bordas:focus ~ .focus-border:after{transition-delay: 0.2s;}
.input-bordas:focus ~ .focus-border i:before,
.input-bordas:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.input-bordas:focus ~ .focus-border i:after{transition-delay: 0.4s;}


.button-form { 

  background-color: #39f;
  padding: 0.5em 1.3em;
  color: #fff;
  font-size: 1.2em;
  border: none;
  cursor: pointer;

}

.borda-inversa {

  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: background;
  transition-property: background;
  box-shadow: inset 0 0 0 2px #39f, 0 0 1px rgba(0, 0, 0, 0);

}

.borda-inversa:hover, .borda-inversa:focus, .borda-inversa:active {
  
  background: none;
  color:#39f; 

}

/*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"; //SEU E-MAIL
    
    //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 com inputs Animado - 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>Assunto:  </strong>".$_POST['assunto'];
    $mensagem .= "<br> <strong>Mensagem: </strong>".$_POST['mensagem'];
    $mensagem .= "<br> <strong>Enviado em:  </strong>".$data;
    
    //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"; //SEU E-MAIL
    $headers .= "X-Sender:  <contato@site.com.br.com.br>\n"; //SEU E-MAIL
    $headers .= "X-Mailer: PHP  v".phpversion()."\n";
    $headers .= "X-IP:  ".$_SERVER['REMOTE_ADDR']."\n";
    $headers .= "Return-Path:  <contato@site.com.br.com.br>\n"; //SEU E-MAIL
    $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 #3399FF; color:#3399FF; 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

OBSERVAÇÃO:

eu deixei com // comentado você vai alterar para seu email contato do seu site

//SEU E-MAIL

 $para = "contato@site.com.br"; //SEU E-MAIL

 $headers .= "From:  Mensagem do site Loop Nerd<contato@site.com.br>\n"; //SEU E-MAIL

$headers .= "X-Sender:  <contato@site.com.br.com.br>\n"; //SEU E-MAIL

$headers .= "Return-Path:  <contato@site.com.br.com.br>\n"; //SEU E-MAIL

é só abrir o arquivo enviaDados.php que você vai ver os comentado //SEU E-MAIL.

só alterar o e-mail.

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 campos digitado do formulário para E-mail?

Baixar Código Veja Funcionando

Conclusão

Formulário Inputs com Bordas Animadas

Neste artigo, você aprendeu o passo a passo de como criar Formulário em PHP com as bordas animadas, 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)