Carregando...

Formulário Pronto Html Css

Postado: 17 de agosto de 2022 Tempo de Leitura: 2 Minutos

Formulário Pronto Html Css

Neste artigo veremos como customizar um simples formulário de mensagem em html usando estilos de css para estilizar.

Para isso precisamos do HTML e CSS.

Pra você criar um formulário totalmente personalizado, desde os campos de texto, estilo das bordas, cor, espessura e etc.

Vamos Adicionar o Html

    <div class="row input-container">

        <h1 class="title_contato">Fale Conosco</h1>
        
        <form method="post" action="#">

            <div class="style-form-input full">
                <input type="text" name="nome" required />
                <label><i class="icon icon-user-1"></i>  Nome</label> 
            </div>

            
            <div class="style-form-input">
                <input type="text" name="email" required />
                <label><i class="icon icon-mail-1"></i> E-mail</label> 
            </div>

            
            <div class="style-form-input right">
                <input type="text" name="assunto" required />
                <label><i class="icon icon-info-circled"></i> Assunto</label> 
            </div>
            
            <div class="style-form-input full">
                <textarea name="mensagem" required></textarea>
                <label><i class="icon icon-comments"></i> Mensagem</label>
            </div>


            <div class="style-form-input full">

                <input type="hidden" name="acao" value="enviar">
                <button class="btn-submit">Enviar</button>
            
            </div>

        </form>

    </div>

Vamos Adicionar o CSS

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

.title_contato {

    font-family: 'open_sansregular';
    font-weight: 600;
    font-size:4em;
    color: #fff;
    text-align: left;
    margin-bottom:20px;
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
  
  font-size: 0.8em;
  color: #fff;
  top: -11px;
  -webkit-transition: all 0.225s ease;
  transition: all 0.225s ease;
  background: #00cfd5;
  padding: 3px 8px;
  left: 25px;
  border-radius: 50px;
  font-weight: bold;

}

.style-form-input {

    float: left;
    width: 295px;
    margin: 1em 0;
    position: relative;
    border-radius: 4px;
}

.right { float:right; }

@media only screen and (max-width: 768px){
    
  .style-form-input { width:100%; }

}

.style-form-input label {
    color: #999;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.style-form-input.full { 
    width: 650px;
    max-width: 100%;
}

input,
textarea {

    width: 100%;
    padding: 30px;
    border: 0;
    font-size: 1em;
    background-color: #2d2d2d;
    color: #fff;
    border-radius: 50px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 10em;
}

.input-container {
    width: 650px;
    max-width: 100%;
    margin: 20px auto 25px auto;
}

.btn-submit {

    width: 160px;
    color: #fff;
    font-size: 1.2em;    
    float: left;
    text-align: center;
    padding: 15px 35px;
    border-radius: 60px;
    display: inline-block;
    background-color: #06bec6;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06), 0 2px 10px 0 rgba(0,0,0,0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    border:none;

}

.btn-submit:hover {
    
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
    0 1px 1px 0 rgba(0,0,0,0.09);

}

@media (max-width: 768px) {
    
    .btn-submit {
        
      width:100%;
      float: none;
      text-align:center;
    
    }
}

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 

input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

Combinando as duas seções acima Html + Css  temos o seguinte Resultado baixo !

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

2.406 Visualizações

4 respostas para “Formulário Pronto Html Css”

  1. loopnerd disse:

    Olá Jamile tudo bem !
    Obrigado pela visita no BLOG.
    1° Primeiro você cópia o código html e
    2° você cópia os códigos Css, igual esta aqui no artigo.

    eu vou te mandar uma pagina contato.html por email ai você abre e ver o código css e o html.
    uma pagina resumida.

  2. Jamile disse:

    Formulário Pronto Html Css

    Eu adorei este formulário mais eu não sei colocar html e css junto e ja vi video tem como você me ajuda sou nova no blog e achei lindo formulário eu agradeço se você me explicar .obrigado

  3. Loop Nerd disse:

    Olá Fabricio, eu que agradeço a visita no BLOG.
    Posto artigo quase todo dia!
    Tamo junto, O aprendizado nunca pode parar… sempre temos alguma coisinha p aprender ou melhorar.

    Valeu obrigado !

  4. fabricio leandro disse:

    muito obrigado Dev por ter doado o seu tempo para podermos aprender mais

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados