Form, SignUp Form

Registration form template Html and CSS with code

Last time we created a Registration form design. Today our main motive is to create a registration form using Html and CSS with source code. So, let’s create it.

Registration form template:

A registration form is used for creating accounts of the users on the website. Users visit the website for many purposes. The website can be selling courses, products, themes, plugins, ebooks, etc. For that, they have to collect the information of the users so that the website can deliver its products to its users without facing any errors. If users are not gonna create an account on the website without filling all these fields then the website will be unable to provide its services to its users.

This Html form is collecting a lot of information from its users so that there must not be any chance of error in providing their services. This form is created using Html and CSS and it is a responsive form with source code.

We have created a beautiful background that looks awesome and matching with the color of the form. Then it has some fields and a picture.

Fields are present on the left side and a picture is present on the right side of the box.

First name
Last name
Email
Password
Confirm password
Checkbox for accepting terms and policies of the website
Register now button

All these things are present there for collecting the information. When you start entering your information in the fields. The fields changed into beautiful fields for entering the data. Then it has a picture on the right side which looks awesome. This picture is related to the type of website. It shows the category of the website.

How to create a responsive registration form?

Then open it and create three files of Html and CSS with the extensions of .html, and .css these extensions are necessary for creating your files.

Source code of Html:

Html is used for creating fields and adding images. But with it, we can not design this registration form.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>RegistrationForm_v2 by Colorlib</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- MATERIAL DESIGN ICONIC FONT -->
		<link rel="stylesheet" href="fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">

		<!-- STYLE CSS -->
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>

		<div class="wrapper" style="background-image: url('images/bg-registration-form-2.jpg');">
			<div class="inner">
				<form action="">
					<h3>Registration Form</h3>
					<div class="form-group">
						<div class="form-wrapper">
							<label for="">First Name</label>
							<input type="text" class="form-control">
						</div>
						<div class="form-wrapper">
							<label for="">Last Name</label>
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="form-wrapper">
						<label for="">Email</label>
						<input type="text" class="form-control">
					</div>
					<div class="form-wrapper">
						<label for="">Password</label>
						<input type="password" class="form-control">
					</div>
					<div class="form-wrapper">
						<label for="">Confirm Password</label>
						<input type="password" class="form-control">
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox"> I caccept the Terms of Use & Privacy Policy.
							<span class="checkmark"></span>
						</label>
					</div>
					<button>Register Now</button>
				</form>
			</div>
		</div>

	</body><!-- This templates was made by Fantacy Designs (https://fantacydesigns.com/) -->
</html>

<!DOCTYPE html>

<html>

<head>

<title>RegistrationForm_v2 by Colorlib</title>

</head>

<body>

<h3>Registration Form</h3>

<label for="">First Name</label>

</div>

</div>

<label for="">Email</label>

</div>

<label for="">Password</label>

</div>

<label for="">Confirm Password</label>

</div>

<label>

<input type="checkbox"> I caccept the Terms of Use & Privacy Policy.

</label>

</div>

<button>Register Now</button>

</form>

</div>

</body>

</html>

Source code of CSS:

Again create a CSS file and save it in the folder. CSS is a markup language and we have used it for designing our registration form because without CSS we are unable to design our form. It is now responsive across all devices.

@font-face {
  font-family: "Muli-Regular";
  src: url("../fonts/muli/Muli-Regular.ttf"); }
@font-face {
  font-family: "Muli-SemiBold";
  src: url("../fonts/muli/Muli-SemiBold.ttf"); }
@font-face {
  font-family: "Muli-Bold";
  src: url("../fonts/muli/Muli-Bold.ttf"); }
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: "Muli-Regular";
  color: #666;
  font-size: 13px;
  margin: 0; }

input, textarea, select, button {
  font-family: "Muli-Regular";
  color: #333;
  font-size: 13px; }

p, h1, h2, h3, h4, h5, h6, ul {
  margin: 0; }

img {
  max-width: 100%; }

ul {
  padding-left: 0;
  margin-bottom: 0; }

a:hover {
  text-decoration: none; }

:focus {
  outline: none; }

.wrapper {
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center; }

.inner {
  min-width: 850px;
  margin: auto;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  padding-top: 68px;
  padding-bottom: 48px;
  background: url("../images/registration-form-2.jpg");
  opacity: 9;
 }

  .inner h3 {
    text-transform: uppercase;
    font-size: 22px;
    font-family: "Muli-Bold";
    text-align: center;
    margin-bottom: 32px;
    color: #333;
    letter-spacing: 2px; }

form {
  width: 50%;
  padding-left: 45px; }

.form-group {
  display: flex; }
  .form-group .form-wrapper {
    width: 50%; }
    .form-group .form-wrapper:first-child {
      margin-right: 20px; }

.form-wrapper {
  margin-bottom: 17px; }
  .form-wrapper label {
    margin-bottom: 9px;
    display: block; }

.form-control {
  border: 1px solid #ccc;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  font-family: "Muli-Bold";
  background: none;

}
  .form-control:focus {
    border: 1.5px solid #3575D3  ; }

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-left: 20px; }
  select option[value=""][disabled] {
    display: none; }

button {
  border: none;
  width: 152px;
  height: 40px;
  margin: auto;
  margin-top: 29px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #3575D3 ;
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Muli-SemiBold";
  border-radius: 20px;
  overflow: hidden;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s; }
  button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #262626  ;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  button:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }

.checkbox {
  position: relative; }
  .checkbox label {
    padding-left: 22px;
    cursor: pointer; }
  .checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer; }
  .checkbox input:checked ~ .checkmark:after {
    display: block; }

.checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 12px;
  width: 13px;
  border-radius: 2px;
  background-color: #ebebeb;
  border: 1px solid #ccc;
  font-family: Material-Design-Iconic-Font;
  color: #000;
  font-size: 10px;
  font-weight: bolder; }
  .checkmark:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    content: '\f26b'; }

@media (max-width: 991px) {
  .inner {
    min-width: 768px; } }
@media (max-width: 767px) {
  .inner {
    min-width: auto;
    background: none;
    padding-top: 0;
    padding-bottom: 0; }

  form {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px; } }

/*# sourceMappingURL=style.css.map */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

@font-face {

font-family: "Muli-Regular";

src: url("../fonts/muli/Muli-Regular.ttf"); }

@font-face {

font-family: "Muli-SemiBold";

src: url("../fonts/muli/Muli-SemiBold.ttf"); }

@font-face {

font-family: "Muli-Bold";

src: url("../fonts/muli/Muli-Bold.ttf"); }

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box; }

body {

font-family: "Muli-Regular";

color: #666;

font-size: 13px;

margin: 0; }

input, textarea, select, button {

font-family: "Muli-Regular";

color: #333;

font-size: 13px; }

p, h1, h2, h3, h4, h5, h6, ul {

margin: 0; }

img {

max-width: 100%; }

ul {

padding-left: 0;

margin-bottom: 0; }

a:hover {

text-decoration: none; }

:focus {

outline: none; }

.wrapper {

min-height: 100vh;

background-size: cover;

background-repeat: no-repeat;

display: flex;

align-items: center; }

.inner {

min-width: 850px;

margin: auto;

box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

padding-top: 68px;

padding-bottom: 48px;

background: url("../images/registration-form-2.jpg");

opacity: 9;

}

.inner h3 {

text-transform: uppercase;

font-size: 22px;

font-family: "Muli-Bold";

text-align: center;

margin-bottom: 32px;

color: #333;

letter-spacing: 2px; }

form {

width: 50%;

padding-left: 45px; }

.form-group {

display: flex; }

.form-group .form-wrapper {

width: 50%; }

.form-group .form-wrapper:first-child {

margin-right: 20px; }

.form-wrapper {

margin-bottom: 17px; }

.form-wrapper label {

margin-bottom: 9px;

display: block; }

.form-control {

border: 1px solid #ccc;

display: block;

width: 100%;

height: 40px;

padding: 0 20px;

border-radius: 20px;

font-family: "Muli-Bold";

background: none;

}

.form-control:focus {

border: 1.5px solid #3575D3 ; }

select {

-moz-appearance: none;

-webkit-appearance: none;

cursor: pointer;

padding-left: 20px; }

select option[value=""][disabled] {

display: none; }

button {

border: none;

width: 152px;

height: 40px;

margin: auto;

margin-top: 29px;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

padding: 0;

background: #3575D3 ;

font-size: 13px;

color: #fff;

text-transform: uppercase;

font-family: "Muli-SemiBold";

border-radius: 20px;

overflow: hidden;

-webkit-transform: perspective(1px) translateZ(0);

transform: perspective(1px) translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

position: relative;

-webkit-transition-property: color;

transition-property: color;

-webkit-transition-duration: 0.5s;

transition-duration: 0.5s; }

button:before {

content: "";

position: absolute;

z-index: -1;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: #262626 ;

-webkit-transform: scaleX(0);

transform: scaleX(0);

-webkit-transform-origin: 0 50%;

transform-origin: 0 50%;

-webkit-transition-property: transform;

transition-property: transform;

-webkit-transition-duration: 0.5s;

transition-duration: 0.5s;

-webkit-transition-timing-function: ease-out;

transition-timing-function: ease-out; }

button:hover:before {

-webkit-transform: scaleX(1);

transform: scaleX(1);

-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);

transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }

.checkbox {

position: relative; }

.checkbox label {

padding-left: 22px;

cursor: pointer; }

.checkbox input {

position: absolute;

opacity: 0;

cursor: pointer; }

.checkbox input:checked ~ .checkmark:after {

display: block; }

.checkmark {

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

height: 12px;

width: 13px;

border-radius: 2px;

background-color: #ebebeb;

border: 1px solid #ccc;

font-family: Material-Design-Iconic-Font;

color: #000;

font-size: 10px;

font-weight: bolder; }

.checkmark:after {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

display: none;

content: '\f26b'; }

@media (max-width: 991px) {

.inner {

min-width: 768px; } }

@media (max-width: 767px) {

.inner {

min-width: auto;

background: none;

padding-top: 0;

padding-bottom: 0; }

form {

width: 100%;

padding-right: 15px;

padding-left: 15px; } }

/*# sourceMappingURL=style.css.map */

Therefore, by applying all these steps you can easily create a registration form for your website.

If you are still not able to create it using the above code lines. Download the below file and save it to your pc. Then extract its files and run the file. You will be able to get your output in your browser.

If you like it then must follow and comment below.

Thanks for reading this article.

Download Source Code