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.

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
```

An elegant sign-up form can significantly improve the user experience on your website. This guide will walk you through the steps to create an elitist sign-up form using HTML and CSS. Follow these instructions to copy the provided code snippet, link the required CSS files, and personalize the form to match your website's aesthetics.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the elitist sign-up form. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file and Google Material Symbols font are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
```

Step 3: Customize and Make it Yours

Personalize the sign-up form to match your website's branding and functionality. Adjust the CSS styles to modify the form's appearance, colors, and interactions. Experiment with different layouts, fonts, and styles to create a unique and user-friendly registration experience.

By following these steps, you can implement and customize an elitist sign-up form on your website using HTML and CSS. Tailor the form to your specific needs and improve your site's user registration process with this elegant and modern component.

Code Explanation

HTML Code

Background Image

<img class="clouds" src="https://raw.githubusercontent.com/frontend-joe/css-signups/479a0b2ba35941ca7d86637b8f6555f3cbc3a4a6/signup-2/bg.svg" />

<img class="clouds" src="...">: Adds an image of clouds as a background.
class="clouds": Assigns the class "clouds" to the image for styling purposes.
src="...": The URL of the cloud image.

Signup Form Container

<div class="signup">
  <h2>Sign Up</h2>
  <h3>It's quick & simple</h3>

<div class="signup">: Container for the signup form.
class="signup": Assigns the class "signup" to the container for styling.
<h2>Sign Up</h2>: Main heading of the signup form.
<h3>It's quick & simple</h3>: Subheading to encourage users to sign up.

Form Element

<form class="form">

<form class="form">: The form element where users can enter their details.
class="form": Assigns the class "form" to the form for styling.

Textbox for Name

<div class="textbox">
  <input type="text" required />
  <label>Name</label>
  <span class="material-symbols-outlined"> account_circle </span>
</div>

<div class="textbox">: Container for each input field.
class="textbox": Assigns the class "textbox" to the container for styling.
<input type="text" required />: Input field for the user's name.
type="text": Specifies the input type as text.
required: Ensures the field must be filled out before form submission.
<label>Name</label>: Label for the input field.
<span class="material-symbols-outlined"> account_circle </span>: Icon next to the input field.
class="material-symbols-outlined": Applies material icon styling.
account_circle: The name of the icon (an account circle).

Textbox for Email

<div class="textbox">
  <input type="text" required />
  <label>Email</label>
  <span class="material-symbols-outlined"> email </span>
</div>

Similar to the name textbox, this one is for the email address with the appropriate label and icon (email).

Textbox for Password

<div class="textbox">
  <input type="password" required />
  <label>Password</label>
  <span class="material-symbols-outlined"> key </span>
</div>

<input type="password" required />: Input field for the user's password.
type="password": Specifies the input type as password, which hides the input text.
key: Icon for the password field.

Login Link

<p>
  Signed up already?
  <a href="#">Login here</a>
</p>

<p>: Paragraph element.
<a href="#">Login here</a>: Link for users who have already signed up to log in.
href="#": Placeholder link URL.

Submit Button

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

<button type="submit">: Submit button for the form.
type="submit": Specifies that the button submits the form.
<span class="material-symbols-outlined"> arrow_forward </span>: Icon inside the button to indicate forward action (joining).
arrow_forward: Icon name for the forward arrow.

CSS Code

Universal and Body Styling

* {
  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";
}

* { box-sizing: border-box; }: Sets the box-sizing property to border-box for all elements, making padding and borders included in the element's total width and height.
html, body { height: 100%; }: Sets the height of the HTML and body elements to 100%.
body { ... }: Styles the body element:
display: grid; place-items: center;: Centers the content within the body.
margin: 0; padding: 0 20px;: Removes default margin and adds padding on the sides.
background: #3284ce;: Sets the background color to a blue shade.
font-family: "Euclid Circular A";: Applies the specified font to the body.

Button and Input Styling

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

Styles button and input elements:

border: 0;: Removes the border.
width: 100%; height: 60px;: Sets width to 100% and height to 60px.
background: transparent;: Makes the background transparent.
font-family: inherit; font-size: 16px;: Inherits the font-family from the parent and sets the font size.
outline: none;: Removes the default focus outline.

Cloud Animation

@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;
}

@keyframes clouds { ... }: Defines the keyframes for the cloud animation:

100% { translate: -50vw -55%; scale: 1 1.1; }: Moves and scales the clouds at the end of the animation.
.clouds { ... }: Styles the clouds image:
position: fixed; top: 30%; left: 0;: Positions the image.
width: 3000px; height: 1500px;: Sets the dimensions of the image.
translate: 0% -50%;: Centers the image vertically.
animation: clouds 15s infinite alternate linear;: Applies the cloud animation with a duration of 15 seconds, running infinitely and alternating directions linearly.

Signup Form Container

.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%);
}

.signup { ... }: Styles the signup form container:

position: fixed; z-index: 2;: Fixes the position and sets the z-index.
top: 0; left: 0; height: 100%; width: 70%; max-width: 460px;: Positions and sizes the container.
padding: 200px 90px;: Adds padding inside the container.
background: #111820;: Sets the background color to a dark shade.
overflow-y: scroll;: Allows vertical scrolling if the content overflows.
.signup > h2 { ... }: Styles the main heading (h2) inside the signup container.
.signup > h3 { ... }: Styles the subheading (h3) inside the signup container.

Form Styling

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

.form { ... }: Styles the form element:

margin: 0;: Removes default margin.
display: grid; gap: 16px;: Uses a CSS grid layout with a gap of 16px between elements.

Textbox Styling

.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;
}

.textbox { ... }: Styles the container for each input field.
position: relative;: Positions elements relative to the container.
margin-bottom: 16px;: Adds margin at the bottom.
.textbox span { ... }: Styles the icon inside the textbox.
position: absolute; top: 50%; translate: 0 -50%;: Positions the icon vertically centered.
left: 0;: Positions the icon to the left.
font-size: 22px;: Sets the font size of the icon.
pointer-events: none;: Prevents the icon from being interactive.
color: rgb(255 255 255 / 40%);: Sets the color with 40% opacity.
.textbox input { ... }: Styles the input field.
padding: 0 24px 0 36px;: Adds padding inside the input field.
border-bottom: 2px solid #2b3442;: Adds a bottom border.
color: rgb(255 255 255 / 96%);: Sets the text color with 96% opacity.
height: 72px;: Sets the height of the input field.

Input Focus and Valid States

: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%);
}

:is(input:focus, input:valid) ~ label { ... }: Applies styles to the label when the input is focused or valid.
translate: -40px -40px; scale: 0.875;: Moves and scales the label.
input:focus ~ label { ... }: Changes the color of the label when the input is focused.
color: #216ce7;: Sets the color to blue.
input:focus { ... }: Changes the border color of the input when focused.
border-color: #216ce7;: Sets the border color to blue.
:is(input:focus, input:valid) ~ span { ... }: Changes the color of the icon when the input is focused or valid.
color: rgb(255 255 255 / 96%);: Sets the color to white with 96% opacity.

Label Styling

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

.textbox label { ... }: Styles the label inside the textbox.
position: absolute; top: 50%; left: 36px;: Positions the label.
translate: 0 -50%;: Vertically centers the label.
color: rgb(255 255 255 / 40%);: Sets the color to white with 40% opacity.
pointer-events: none;: Makes the label non-interactive.
transition: 0.4s;: Adds a transition effect.

Button Styling

.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;
}

.form button { ... }: Styles the submit button.

display: flex; align-items: center; justify-content: space-between;: Uses flexbox for layout.
cursor: pointer;: Changes the cursor to a pointer on hover.
padding: 0 24px;: Adds padding inside the button.
border-radius: 6px;: Rounds the corners of the button.
background: #216ce7; color: #f9f9f9;: Sets the background and text color.
border: 0;: Removes the border.
font-family: inherit; font-weight: 600;: Inherits the font-family and sets the font weight.

Paragraph and Link Styling

.signup p {
  margin: 0 0 22px;
  color: #778395;
}
.signup p > a {
  color: #216ce7;
  text-decoration: none;
}

.signup p { ... }: Styles the paragraph inside the signup form.
margin: 0 0 22px;: Adds margin at the bottom.
color: #778395;: Sets the text color.
.signup p > a { ... }: Styles the link inside the paragraph.
color: #216ce7;: Sets the link color.
text-decoration: none;: Removes the underline from the link.