Minimalist CSS3 Registration Form Template

- November 16, 2018

A simple user registration form template created in HTML and CSS.

Css3 registration form

Registration Form HTML Code

1. Create a structure of registration form in HTML with the following mentioned class names.

<form class="registration-form">
   <input type="text" placeholder="First Name" name="first_name" />
   <input type="text" placeholder="Last Name" name="last_name" />
   <select>
      <option> Male </option>
      <option> Female </option>
   </select>
   <input type="email" placeholder="Email Address" name="email" />
   <p class="agree-st">
      <input class="agree" type="checkbox" name="agreement" />
      I am agree with <a href="#1">terms & conditions</a> and <a href="#2"> cookies </a> of this website.  
   </p>
   <button class="submit-btn" type="submit"> Sign Up </button>
</form>

Registration Form CSS Code

2. Now add the following CSS source Code into HTML page:

/* The CSS for HTML form element */
.registration-form {
 padding: 15px;
 font-family: Arial, 'Sans Serif';
 background: #fff;
 margin: 20px;
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
 border: 1px solid #ddd;
 border-radius: 4px;
 font-size: 14px;
}

/* Styling the input fields of the form expect input type radio */
select,
.registration-form input:not(.agree) {
 display: block;
 padding: 15px;
 margin: 10px 0;
 width: 100%;
 box-sizing: border-box;
 border: 1px solid #ddd;
 border-radius: 10px;
 outline: 0;
}

/* Registration from sign up button design */
.registration-form .submit-btn {
 display: block;
 width: 100%;
 padding: 15px;
 box-sizing: border-box;
 font-size: 18px;
 background: #e41b17;
 border: 0;
 border-radius: 15px;
 color: #fff;
 outline: 0;
}

/* Change the color on hover when user hover the sign up button */
.registration-form .submit-btn:hover {
 background: #546e7a;
}

/* To smoothly change background color of submit button */
.submit-btn,
.submit-btn:hover {
 transition: 0.4s;
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
}

/*Sign up agreement line design */
.agree-st {
 margin: 20px 0;
 font-size: 13px;
 line-height: 1.3;
 color: #555;
}

/* Anchor links in agreement line that point to privacy and terms page of the website */
.agree-st a {
 text-decoration: none;
 color: #e41b17;
}

/* Registration form for large screen I.e desktop and tabs */
@media only screen and (min-width: 480px) {
 .registration-form {
  width: 320px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
 }
}

Leave your reply.
EmoticonEmoticon