Form Posto Seguro

Formulário simples e responsivo utilizando font-awesome icons.

by Rômulo Bastos

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<html>
  <body>
    <div class="form-style">
      <h1 class="form-title">Posto Seguro</h1>
      <h2 class="form-subtitle">Quer saber mais sobre o nosso Programa?
      <br/>Deixe aqui o seu contato:</h2>
      <div class="form">        
        <label for="field_razao_social">Razão Social:</label>
        <input type="text" name="field_razao_social" placeholder="Razão Social..." />

        <label for="field_nome">Nome:</label>
        <input type="text" name="field_nome" placeholder="Nome Completo" />

        <label for="field_telefone">Telefone:</label>
        <input type="text" name="field_telefone" placeholder="(00) 00000-0000" />

        <label for="field_emai">E-mail:</label>
        <input type="email" name="field_emai" placeholder="[email protected]" />

        <button type="submit">
          Enviar <i class="fas fa-paper-plane"></i>
        </button>
        <p><i class="fas fa-phone-alt"></i> Em breve entraremos em contato com você.</p>
      </div>
    </div>
  </body>
</html>

CSS

.form-style * {
  margin: 0;
  padding: 0;
  line-height: 140%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form-style {
  border: 3px solid #005386;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px ;
  border-radius: 10px;
  font-family: Roboto, sans-serif;
}

.form-style .form-title {
  background: #005386;
  color: #ffd51a;
  padding: 15px;
  text-align: center;
  font-size: 21px;
  font-weight: bold;  
  text-transform: uppercase;
}
.form-style .form-subtitle {
  color: #005386;
  margin: 20px 20px 0;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}
.form-style .form {
  padding: 0 20px 20px;
  margin: 0;
}
.form-style .form label {
  color: #444;
  width: 100%;
  margin: 20px 0 0;
  display: block;
  font-size: 14px;
  font-weight: bold;
}
.form-style .form input,
.form-style .form button {
  width: 100%;
  margin: 0 0 5px;
  padding: 10px;
  border: 1px solid #bbb;
  font-size: 14px;
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px ;
  border-radius: 3px;  
}
.form-style .form input[type="submit"],
.form-style .form button {
  font-weight: bold;
  font-size: 1em;
  background: rgb(244,244,244);
  background: -webkit-linear-gradient(rgba(244,244,244,1) 0%, rgba(227,227,227,1) 100%);
  background: -moz-linear-gradient(rgba(244,244,244,1) 0%, rgba(227,227,227,1) 100%);
  background: -o-linear-gradient(rgba(244,244,244,1) 0%, rgba(227,227,227,1) 100%);
  background: linear-gradient(rgba(244,244,244,1) 0%, rgba(227,227,227,1) 100%);
}
.form-style .form p {
  color: #444;
  margin: 20px 0 0;
}
.form-style .form i {
  color: #005386;
  margin: 0 5px;
}