Registration Form in HTML Template Free Download

Today, We have a nice registration form in HTML template free download. The form has a charming design which will surely go to love it. It works well on the small device because it has media queries included.

It is an interactive template with a signup form with a lovely background. You can use it on your website for any kind of purpose.

All of the basic forms fields are included in the form. It also has some social media buttons. If you don’t want to show another text or sidebar on the registration area then this form is good because it is fullscreen form.

The form consist of two blocks. The first one added nice social media buttons and the other side have a signup form.

The best place to add registration form on the website in the signup area. According to the survey, It is important to keep the signup form simple with minimal fields.

That’s why I did only add basic fields so the user can quickly register and your site visitor doesn’t leave your site.

It’s a bad idea to make the form long and adding unnecessary questions. Don’t make your site users annoying and feel agree.

Let’s Create Registration Form Template in HTML

It’s a good idea to make the form in a way so users can register with just one click. The better idea to do so, We can integrate the most popular social media sites.

That’s why break up the form in two different sections. The first one has all social media sites links and the other one have a simple form.

This will make your user stay on site to register instead of leaving a site.

I did keep the markup easy to understand. I have created a main div which will hold all the HTML so that you can easily understand the code.

Next, I have defined two divs one for social and second for form fields.

<div class="signup">
	<div class="signup-connect">
    	social button ...
    </div>
    <div class="signup-classic">
    	form elements
    </div>
</div>

This way you can easily understand what I am going to do. Ok, Now Let me add the social links. I will create them by using Font Awesome CSS.

<div class="signup">
    <div class="signup-connect">
        <h1>Create An Account</h1>
        <a href="#" class="btn btn-social btn-facebook">
          <i class="fa fa-facebook" aria-hidden="true"></i>
          Sign in with Facebook
        </a>
        <a href="#" class="btn btn-social btn-twitter">
          <i class="fa fa-twitter" aria-hidden="true"></i>
          Sign in with Twitter
        </a>
        <a href="#" class="btn btn-social btn-google">
          <i class="fa fa-google-plus" aria-hidden="true"></i>
          Sign in with Google
        </a>
        <a href="#" class="btn btn-social btn-behance">
          <i class="fa fa-behance" aria-hidden="true"></i>
          Sign in with Behance
        </a>
    </div>
</div>

Now We will create the second block for adding form fields. We use simple markup fieldset element to place each field.

<div class="signup">
  <div class="signup-classic">
    <h2>Modern Website Form</h2>
    <form class="form">
      <fieldset class="username">
        <input type="text" placeholder="username">
      </fieldset>
      <fieldset class="email">
        <input type="email" placeholder="email">
      </fieldset>
      <fieldset class="password">
        <input type="password" placeholder="password">
      </fieldset>
      <button type="submit" class="btn">Sign up</button>
    </form>
  </div>
</div>

The CSS

The complete CSS is available in the source file. You can download it. Let’s take a look a few styles about social buttons and form fields.

Let’s start with the buttons.

.btn {
  display: block;
  background-color: #bded7d;
  color: white;
  text-decoration: none;
  margin: 20px 0;
  padding: 15px 15px;
  border-radius: 5px;
  position: relative;
}
.btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

Each button has a unique color and we did with following CSS.

.btn-facebook {
  background-color: #3b5999;
}
.btn-twitter {
  background-color: #55acee;
}
.btn-google {
  background-color: #dd4b39;
}
.btn-behance {
  background-color: #131418;
}

Let’s style the input fields by applying a background color, border, and shadow.

.form fieldset input {
  width: 100%;
  height: 48px;
  color: #333;
  padding: 15px 40px 15px 15px;
  font-size: 14px;
  outline: none !important;
  border: 1px solid orange;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  vertical-align: top;
}
.form button {
  width: 100%;
  outline: none !important;
  background: linear-gradient(-5deg, #79b52c, #94d63d);
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(115, 136, 89, 0.2);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

There are off course need more CSS to make it look like a demo. You can download HTML & CSS source code for this registration form template and feel free to customize it according to your needs.