4+ Register Components - Vanilla CSS

User registration forms are essential for websites that require user accounts, enabling visitors to create personalized profiles and access exclusive features. With HTML and CSS, creating stylish and functional registration forms is achievable without the need for complex scripting or external frameworks. In this collection, we've compiled a variety of HTML and CSS register form designs that you can seamlessly incorporate into your website. Whether you're developing a social network, an e-commerce platform, or a membership site, our collection offers options to enhance the registration experience and improve user engagement. Let's explore how HTML and CSS register forms can simplify the sign-up process for your users and help you grow your online community or customer base!

Register Form with Username Availability Checker

Enhance user experience on your register form with a username availability checker. Learn how to implement a form feature that checks username availability in real-time.

Author: Joe

Preview
Code

<div class="login-card">
  <img
    src="https://pub-static.fotor.com/assets/projects/pages/5ff61721271e45d2b9bbc6dbbd4b14c7/300w/purple-cute-school-girl-78a8ba2c107c4ce1bb7e5a3de0ed9528.jpg"
  />
  <h2>Register</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <div class="username">
      <input
        spellcheck="false"
        class="control"
        type="text"
        placeholder="Username"
        onkeyup="handleChange(event)"
        onkeydown="handleStartTyping()"
      />
      <div id="spinner" class="spinner"></div>
    </div>
    <div id="alert" class="alert">Username already exists</div>
    <input
      spellcheck="false"
      class="control"
      id="password"
      type="password"
      placeholder="Password"
    />
    <button class="control" type="button">Register</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #000000;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-1/bbblurry.svg");
  background-repeat: no-repeat;
  background-size: 300vh;
  font-family: "Euclid Circular A";
  color: #3a334e;
  animation: rotate 5s infinite alternate linear;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control {
  border: 0;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: transparent;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #5a4f79;
  margin: 8px 0;
  font-family: inherit;
  text-align: left;
  font-size: 16px;
  transition: 0.4s;
}

.login-card {
  width: 400px;
  padding: 100px 30px 64px;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  backdrop-filter: blur(10px);
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #f9f9f9;
}

.login-card img {
  width: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 5px;
}

.login-card > h3 {
  color: #837f90;
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
}

.login-form input.control::placeholder {
  color: #aaa7bc;
}

.login-form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #f9f9f9;
  color: #000000;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.username {
  position: relative;
}

@keyframes spin {
  100% {
    rotate: 1turn;
  }
}

.spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #ccc9e1;
  border-top-color: #8f44fd;
  opacity: 0;
  animation: spin 1s infinite linear;
}

.spinner.visible {
  opacity: 1;
}

.alert {
  overflow: hidden;
  text-align: left;
  padding: 0 16px;
  color: #ff3e72;
  height: 0;
  transition: 0.3s;
}

.alert.visible {
  height: 32px;
}

const usernames = ["david", "david1", "david2"];

const spinner = document.getElementById("spinner"),
  alert = document.getElementById("alert");

const updateUi = (value) => {
  console.log("value", value);
  spinner.classList.remove("visible");

  const usernameExists = usernames.some((u) => u === value);

  console.log("usernames", usernames);
  console.log("usernameExists", usernameExists);

  if (usernameExists) {
    alert.classList.add("visible");
  } else {
    alert.classList.remove("visible");
  }
};

const debounce = (callback, time) => {
  let interval;
  return (...args) => {
    clearTimeout(interval);
    interval = setTimeout(() => {
      callback.apply(null, args);
    }, time);
  };
};

const handleStartTyping = () => {
  spinner.classList.add("visible");
};

const handleChange = debounce((input) => {
  const { value } = input.target;

  updateUi(value);
}, 500);

Signup Form with Password Strength Indicator

Ensure account security with a signup form featuring a password strength indicator. Learn how to implement a signup form that provides users with feedback on password strength.

Author: Joe

Preview
Code

<div class="login-card">
  <img
    src="https://i.pinimg.com/originals/0a/5f/ea/0a5feae400fc816c4ca2aca8bd67a168.jpg"
  />
  <h2>Sign Up</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <div class="username">
      <input
        autocomplete="off"
        spellcheck="false"
        class="control"
        type="email"
        placeholder="Email"
        value="joe@gmail.com"
      />
      <div id="spinner" class="spinner"></div>
    </div>
    <input
      spellcheck="false"
      class="control"
      id="password"
      type="password"
      placeholder="Password"
      onkeyup="handleChange()"
    />
    <div id="bars">
      <div></div>
    </div>
    <div class="strength" id="strength"></div>
    <button class="control" type="button">JOIN NOW</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #000000;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-2/bbblurry.svg");
  background-repeat: no-repeat;
  background-size: 300vh;
  font-family: "Euclid Circular A";
  color: #868b94;
  animation: rotate 5s infinite alternate linear;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control {
  border: 0;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #f9f9f9;
  margin: 8px 0;
  font-family: inherit;
  text-align: left;
  font-size: 16px;
  transition: 0.4s;
}

.login-card {
  width: 400px;
  padding: 100px 30px 32px;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(26px);
  text-align: center;
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #f9f9f9;
}

.login-card img {
  width: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 5px;
  margin-bottom: 20px;
}

.login-card > h3 {
  color: #837f90;
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
}

.login-form input.control::placeholder {
  color: #868b94;
}

.login-form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #f9f9f9;
  color: #000000;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.username {
  position: relative;
}

@keyframes spin {
  100% {
    rotate: 1turn;
  }
}

.spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #ccc9e1;
  border-top-color: #8f44fd;
  opacity: 0;
  animation: spin 1s infinite linear;
}

.spinner.visible {
  opacity: 1;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#bars {
  margin: 8px 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

#bars div {
  height: 6px;
  border-radius: 3px;
  transition: 0.4s;
  width: 0%;
}

#bars.weak div {
  background: #bc2b38;
  width: 33.33%;
}

#bars.medium div {
  background: #d36f30;
  width: 66.66%;
}

#bars.strong div {
  background: #1eb965;
  width: 100%;
}

.strength {
  text-align: left;
  height: 30px;
  text-transform: capitalize;
}

const bars = document.querySelector("#bars"),
strengthDiv = document.querySelector("#strength"),
passwordInput = document.querySelector("#password");

const strength = {
  1: "weak",
  2: "medium",
  3: "strong",
};

const getIndicator = (password, strengthValue) => {
  for (let index = 0; index < password.length; index++) {
    let char = password.charCodeAt(index);
    if (!strengthValue.upper && char >= 65 && char <= 90) {
      strengthValue.upper = true;
    } else if (!strengthValue.numbers && char >= 48 && char <= 57) {
      strengthValue.numbers = true;
    } else if (!strengthValue.lower && char >= 97 && char <= 122) {
      strengthValue.lower = true;
    }
  }

  let strengthIndicator = 0;

  for (let metric in strengthValue) {
    if (strengthValue[metric] === true) {
      strengthIndicator++;
    }
  }

  return strength[strengthIndicator] ?? "";
};

const getStrength = (password) => {
  let strengthValue = {
    upper: false,
    numbers: false,
    lower: false,
  };

  return getIndicator(password, strengthValue);
};

const handleChange = () => {
  let { value: password } = passwordInput;

  console.log(password);

  const strengthText = getStrength(password);

  bars.classList = "";

  if (strengthText) {
    strengthDiv.innerText = `${strengthText} Password`;
    bars.classList.add(strengthText);
  } else {
    strengthDiv.innerText = "";
  }
};

Signup Process with Swiper.js

Optimize your signup process with Swiper.js to provide users with smooth and intuitive navigation. Learn how to implement Swiper.js to guide users through the signup journey seamlessly.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />


<div class="card">
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <img src="https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-3/1.svg" />
        <h2>Welcome</h2>
        <h3>Let's create your username</h3>
        <input
          spellcheck="false"
          oninput="checkValid(event)"
          type="text"
          placeholder="e.g. johnsmith"
        />
        <button disabled type="button" onclick="gotoSlide(1)">Next</button>
      </div>
      <div class="swiper-slide">
        <div className="image-wrapper">
          <img src="https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-3/2.svg" />
        </div>
        <h2>Security</h2>
        <h3>Enter a strong password</h3>
        <input
          oninput="checkValid(event)"
          type="password"
          placeholder="Your password"
        />
        <button disabled type="button" onclick="gotoSlide(2)">Next</button>
      </div>
      <div class="swiper-slide">
        <div className="image-wrapper">
          <img src="https://raw.githubusercontent.com/frontend-joe/es6-signups/ef99c2e743e35ab2ae93e5fca51777094fe00ec6/signup-3/3.svg" />
        </div>
        <h2>Finish</h2>
        <h3>You're all good to go</h3>
        <button type="submit">Complete</button>
        <button class="secondary" onclick="restart()">Restart</button>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #faf8ff;
  font-family: "poppins";
  text-align: center;
}

.card {
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 490px;
  padding: 80px 0 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 20px 150px rgb(0 0 0 / 5%);
  margin: 20px 0;
}

img {
  margin: 0 auto 30px;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

h2 {
  color: #2f2e41;
  margin: 0 0 6px;
}

h3 {
  color: #69687a;
  margin: 0 0 24px;
  font-weight: 400;
  font-size: 14px;
  align-self: stretch;
}

input,
button {
  display: block;
  height: 48px;
  width: 270px;
  margin: 0 40px;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  text-align: center;
}

input {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.16);
  padding: 12px;
  margin-bottom: 8px;
}

input::placeholder {
  color: rgba(0, 0, 0, 0.24);
}

button {
  background: #9563ff;
  color: #f9f9f9;
  border: 0;
  cursor: pointer;
  transition: 0.175s;
}

button:disabled {
  background: #e1e0e8;
  color: #bbbac5;
  cursor: not-allowed;
}

button.secondary {
  background: transparent;
  color: #7e7d8a;
}

button[type="submit"] {
  margin-bottom: 8px;
}

.swiper {
  width: 100%;
}

const swiper = new Swiper(".swiper", {
  speed: 500,
  allowTouchMove: false,
});

const gotoSlide = (index) => {
  swiper.slideTo(index);
};

const restart = () => {
  const inputs = document.querySelectorAll("input");
  const buttons = document.querySelectorAll("button[type=button]");

  buttons.forEach((button) => {
    button.disabled = true;
  });

  inputs.forEach((input) => {
    input.value = "";
  });

  gotoSlide(0);
};

const checkValid = (event) => {
  event.target.nextElementSibling.disabled = !event.target.value.length;
};

Elitist Sign-Up Form

Elevate your sign-up process with a sophisticated sign-up form designed using HTML and CSS. Learn how to create a sleek and professional form layout to streamline the registration experience.

Author: Joe

Preview
Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<img class="clouds" src="https://raw.githubusercontent.com/frontend-joe/css-signups/479a0b2ba35941ca7d86637b8f6555f3cbc3a4a6/signup-2/bg.svg" />
<div class="signup">
  <h2>Sign Up</h2>
  <h3>It's quick & simple</h3>
  <form class="form">
    <div class="textbox">
      <input type="text" required />
      <label>Name</label>
      <span class="material-symbols-outlined"> account_circle </span>
    </div>
    <div class="textbox">
      <input type="text" required />
      <label>Email</label>
      <span class="material-symbols-outlined"> email </span>
    </div>
    <div class="textbox">
      <input type="password" required />
      <label>Password</label>
      <span class="material-symbols-outlined"> key </span>
    </div>
    <p>
      Signed up already?
      <a href="#">Login here</a>
    </p>

    <button type="submit">
      Join The Elitists
      <span class="material-symbols-outlined"> arrow_forward </span>
    </button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 20px;
  background: #3284ce;
  font-family: "Euclid Circular A";
}

button,
input {
  border: 0;
  width: 100%;
  height: 60px;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  outline: none;
}

@keyframes clouds {
  100% {
    translate: -50vw -55%;
    scale: 1 1.1;
  }
}

.clouds {
  position: fixed;
  top: 30%;
  left: 0;
  width: 3000px;
  height: 1500px;
  translate: 0% -50%;
  animation: clouds 15s infinite alternate linear;
}

.signup {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 70%;
  max-width: 460px;
  padding: 200px 90px;
  background: #111820;
  overflow-y: scroll;
}

.signup > h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 6px;
  color: rgb(255 255 255 / 96%);
}

.signup > h3 {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 30px;
  color: rgb(255 255 255 / 40%);
}

.form {
  margin: 0;
  display: grid;
  gap: 16px;
}

.textbox {
  position: relative;
  margin-bottom: 16px;
}

.textbox span {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: 0;
  font-size: 22px;
  pointer-events: none;
  color: rgb(255 255 255 / 40%);
}

.textbox input {
  padding: 0 24px 0 36px;
  border-bottom: 2px solid #2b3442;
  color: rgb(255 255 255 / 96%);
  height: 72px;
}

:is(input:focus, input:valid) ~ label {
  translate: -40px -40px;
  scale: 0.875;
}

input:focus ~ label {
  color: #216ce7;
}

input:focus {
  border-color: #216ce7;
}

:is(input:focus, input:valid) ~ span {
  color: rgb(255 255 255 / 96%);
}

.textbox label {
  position: absolute;
  top: 50%;
  left: 36px;
  translate: 0 -50%;
  color: rgb(255 255 255 / 40%);
  pointer-events: none;
  transition: 0.4s;
}

.form button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0 24px;
  border-radius: 6px;
  background: #216ce7;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-weight: 600;
}

.signup p {
  margin: 0 0 22px;
  color: #778395;
}

.signup p > a {
  color: #216ce7;
  text-decoration: none;
}

```
No need of JavaScript
```

Default Registration Form

Design a basic registration form for your website using HTML and CSS. Learn how to create a user-friendly form layout to collect essential information from users, enhancing the registration process.

Author: Faraz

Preview
Code

<div class="card">
  <img class="logo" src="https://www.codewithfaraz.com/favicon.ico" />
  <h2>Create Account</h2>
  <form class="form">
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button type="submit">SIGN UP</button>
  </form>
  <footer>
    Existing users, sign in
    <a href="#">here</a>
  </footer>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin-top: 100px;
  padding: 0 32px;
  background: #f5f5f5;
}

.card {
  overflow: hidden;
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 20px;
  padding: 170px 30px 54px;
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 100px 100px rgb(0 0 0 / 10%);
}

.card::before {
  content: "";
  position: absolute;
  top: -880px;
  left: 50%;
  translate: -50% 0;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: #216ce7;
}

@media (width >= 500px) {
  .card {
    margin: 0;
    width: 360px;
  }
}

.card .logo {
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50% 0;
  width: 64px;
  height: 64px;
}

.card > h2 {
  font-size: 22px;
  font-weight: 300;
  margin: 0 0 30px;
  color: #2a3444;
}

.form {
  margin: 0 0 36px;
  display: grid;
  gap: 16px;
}

.form > input,
.form > button {
  width: 100%;
  height: 56px;
  border-radius: 28px;
}

.form > input {
  border: 2px solid #ebebeb;
  font-family: inherit;
  font-size: 16px;
  padding: 0 24px;
  color: #11274c;
}

.form > input::placeholder {
  color: #cac8c8;
}

.form > button {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #216ce7;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.card > footer {
  color: #a1a1a1;
}

.card > footer > a {
  color: #216ce7;
}

```
No need of JavaScript
```