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.

A user-friendly registration form is essential for any website that requires user sign-ups. This guide will walk you through the steps to create a default registration 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 branding.

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 registration 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 is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Personalize the registration 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 a default registration 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 clean and modern component.

Code Explanation

HTML Code

<div class="card">

  • This is the main container for the card component. It likely has some styling associated with the class .card to give it a card-like appearance (e.g., border, padding, shadow).

<img class="logo" src="https://www.codewithfaraz.com/favicon.ico" />

  • <img>: This is an image element that displays a logo.
  • class="logo": The logo class can be used to style the image (e.g., setting its size or positioning).
  • src="https://www.codewithfaraz.com/favicon.ico": The src attribute specifies the URL of the image to be displayed.

<h2>Create Account</h2>

  • <h2>: This is a heading element that displays the text "Create Account". The <h2> tag typically renders as a second-level heading.

<form class="form">

  • <form>: This is a form element used to collect user input.
  • class="form": The form class can be used to style the form element (e.g., layout, spacing).
  • Inside the form:
    • <input type="text" placeholder="Name" />
    • <input type="text">: An input field for text entry.
    • placeholder="Name": Displays the placeholder text "Name" inside the input field.
    • <input type="email" placeholder="Email" />
    • <input type="email">: An input field for email addresses.
    • placeholder="Email": Displays the placeholder text "Email" inside the input field.
    • <input type="password" placeholder="Password" />
    • <input type="password">: An input field for passwords. The entered text will be masked (e.g., displayed as dots or asterisks).
    • placeholder="Password": Displays the placeholder text "Password" inside the input field.
    • <button type="submit">SIGN UP</button>
    • <button type="submit">: A submit button that sends the form data to the server when clicked.
    • The button displays the text "SIGN UP".

<footer>

  • <footer>: A footer element that typically contains additional information or links.
  • Inside the footer:
    • Existing users, sign in
    • This text instructs existing users to sign in.
    • <a href="#">here</a>
    • <a href="#">: An anchor (link) element. The href="#" attribute indicates a placeholder link. This should be replaced with the actual URL where users can sign in.
    • The link displays the text "here".

CSS Code

Global Styles
* {
  box-sizing: border-box;
}
  • *: This universal selector applies the box-sizing: border-box property to all elements, which includes padding and border in the element’s total width and height, making it easier to manage layouts.
HTML and Body Styles
html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  margin-top: 100px;
  padding: 0 32px;
  background: #f5f5f5;
}
  • html, body { height: 100%; }: Ensures that the html and body elements take up the full height of the viewport.
  • body:
    • display: grid; place-items: center; centers the content of the body both horizontally and vertically.
    • margin-top: 100px; adds a top margin to create space above the centered content.
    • padding: 0 32px; adds horizontal padding.
    • background: #f5f5f5; sets a light gray background color.
Card Styles
.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: Styles the card container.

  • overflow: hidden; ensures any overflowing content is hidden.
  • position: relative; z-index: 3; positions the card and sets its stacking order.
  • width: 100%; makes the card take up the full width of its container.
  • margin: 0 20px; adds horizontal margins.
  • padding: 170px 30px 54px; adds padding inside the card, with more padding at the top.
  • border-radius: 1.25rem; rounds the corners of the card.
  • background: #fff; sets a white background color.
  • text-align: center; centers the text inside the card.
  • box-shadow: 0 100px 100px rgb(0 0 0 / 10%); adds a large, subtle shadow.
Card Background Circle
.card::before {
  content: "";
  position: absolute;
  top: -880px;
  left: 50%;
  translate: -50% 0;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: #216ce7;
}

.card::before: Adds a large blue circle behind the card to create a background effect.

  • content: ""; creates a pseudo-element.
  • position: absolute; positions the circle absolutely within the card.
  • top: -880px; left: 50%; positions the circle far above the card and centered horizontally.
  • translate: -50% 0; adjusts the position to be perfectly centered.
  • width: 1000px; height: 1000px; sets the size of the circle.
  • border-radius: 50%; makes the element a circle.
  • background: #216ce7; sets the blue background color.
Responsive Design for Larger Screens
@media (width >= 500px) {
  .card {
    margin: 0;
    width: 360px;
  }
}

@media (width >= 500px): Applies styles for screen widths 500px and above.

  • .card { margin: 0; width: 360px; } sets the card width to 360px and removes horizontal margins.
Logo Styles
.card .logo {
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50% 0;
  width: 64px;
  height: 64px;
}

.card .logo: Styles the logo inside the card.

  • position: absolute; top: 30px; left: 50%; translate: -50% 0; centers the logo at the top of the card.
  • width: 64px; height: 64px; sets the size of the logo.
Heading Styles
.card > h2 {
  font-size: 22px;
  font-weight: 300;
  margin: 0 0 30px;
  color: #2a3444;
}

.card > h2: Styles the heading inside the card.

  • font-size: 22px; sets the font size.
  • font-weight: 300; sets the font weight to light.
  • margin: 0 0 30px; adds a bottom margin.
  • color: #2a3444; sets the text color.
Form Styles
.form {
  margin: 0 0 36px;
  display: grid;
  gap: 16px;
}

.form: Styles the form element inside the card.

  • margin: 0 0 36px; adds a bottom margin.
  • display: grid; gap: 16px; uses CSS Grid to layout form elements with a 16px gap between them.
Input and Button Styles
.form > input,
.form > button {
  width: 100%;
  height: 56px;
  border-radius: 28px;
}

.form > input, .form > button: Styles both input fields and the button.

  • width: 100%; height: 56px; sets the width and height.
  • border-radius: 28px; gives them rounded corners.
Input Styles
.form > input {
  border: 2px solid #ebebeb;
  font-family: inherit;
  font-size: 16px;
  padding: 0 24px;
  color: #11274c;
}

.form > input: Styles the input fields.

  • border: 2px solid #ebebeb; sets a light gray border.
  • font-family: inherit; font-size: 16px; inherits the font-family and sets the font size.
  • padding: 0 24px; adds horizontal padding.
  • color: #11274c; sets the text color.
Input Placeholder Styles
.form > input::placeholder {
  color: #cac8c8;
}

.form > input::placeholder: Styles the placeholder text in the input fields.

  • color: #cac8c8; sets the placeholder text color.
Button Styles
.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;
}

.form > button: Styles the submit button.

  • cursor: pointer; changes the cursor to a pointer when hovering.
  • background: #216ce7; color: #f9f9f9; sets the background and text color.
  • border: 0; removes the default border.
  • font-family: inherit; font-size: 1rem; font-weight: 600; sets the font styles.
  • text-align: center; letter-spacing: 2px; centers the text and adds spacing between letters.
  • transition: all 0.375s; adds a transition effect for all properties.
Footer Styles
.card > footer {
  color: #a1a1a1;
}

.card > footer > a {
  color: #216ce7;
}
  • .card > footer: Styles the footer inside the card.
    • color: #a1a1a1; sets the text color.
  • .card > footer > a: Styles the link inside the footer.
    • color: #216ce7; sets the link color.