Webleb - Snippets de Código - Formulário de inscrição em HTML com e-mail e senha

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 </head>
<body>
<div class="login-form">
  <div class="text">
    Connexion membre
  </div>
  <form id="signupForm" enctype="multipart/form-data">
    <input 
    type="hidden"
    name="x-sheetmonkey-insert-worksheet"
    value="NEW"
    />
    <div class="field">
      <div class="fas fa-user"></div>
      <input type="text" name="NAME" placeholder="NAME" required>
    </div>
    <div class="field">
      <div class="fas fa-envelope"></div>
      <input type="email" name="Email" placeholder="Email" required>
    </div>
    <div class="field">
        <div class="fas fa-phone"></div>
        <input type="number" name="PHONE_NUMBER" placeholder="Phone Number" required>
      </div>
    <div class="field">
      <div class="fas fa-lock"></div>
      <input type="password" name="PASSWORD" placeholder="Password" required>
    </div>
    <div class="field">
        <div class="fas fa-lock"></div>
        <input type="password" name="confirm_password" placeholder="Confirm Password" required>
      </div>
    <button type="submit">SIGNUP</button>
    <div class="link">
      Are you a member?
      <a href="service.html">Login now</a>
      <p style="color: red;">Please you'll be charge for Agent portal</p>
    </div>
  </form>
</div>
 </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
 
}
.login-form {
  position: relative;
  width: 370px;
  height: auto;
  background: #1b1b1b;
  padding: 40px 35px 60px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
}
.text {
  font-size: 30px;
  color: #c7c7c7;
  font-weight: 600;
  letter-spacing: 2px;
}
form {
  margin-top: 40px;
}
form .field {
  margin-top: 20px;
  display: flex;
}
.field .fas {
  height: 50px;
  width: 60px;
  color: #868686;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid #444;
  border-right: none;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(#333, #222);
}
.field input,
form button {
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 19px;
  color: #868686;
  padding: 0 15px;
  border-radius: 0 5px 5px 0;
  border: 1px solid #444;
  caret-color: #339933;
  background: linear-gradient(#333, #222);
}
input:focus {
  color: #339933;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1);
  background: linear-gradient(#333933, #222922);
  animation: glow 0.8s ease-out infinite alternate;
}
@keyframes glow {
  0% {
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
  }
  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6),
      inset 0 0 10px rgba(0, 255, 0, 0.4);
  }
}
button {
  margin-top: 30px;
  border-radius: 5px !important;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
button:hover {
  color: #339933;
  border: 1px solid #339933;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3), 0 0 10px rgba(0, 255, 0, 0.2),
    0 0 15px rgba(0, 255, 0, 0.1), 0 2px 0 black;
}
.link {
  margin-top: 25px;
  color: #868686;
}
.link a {
  color: #339933;
  text-decoration: none;
}
.link a:hover {
  text-decoration: underline;
}

Formulário de inscrição em HTML com e-mail e senha

Recomendado

Um Código por códice

Um Código por Neumorfismo

Código HTML do interruptor de alternância CSS

HTML

CSS

JS

Recomendado

Um Código por códice

Um Código por Neumorfismo

Código HTML do interruptor de alternância CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS