Form, SignUp Form

Registration form in Html and CSS Source code

Last time we talked about how to create a Login page in HTML with CSS But now let’s see how we can create a registration form using Html, CSS, and JavaScript.

Registration form in HTML:

This form is intended for businesses. Therefore, users can enter their relevant information and the website can use it effectively to bring its best services to its customers.

Collection of all user information to create their account. Therefore, there are two categories available for collecting user information, general information and contact details.
For general information we have (Title, first name, surname, position, company, etc.

After that in the contact details we have street information, additional information, zip code, location, country, code, phone number and postal and so on to collect contact details. It will help to analyze people’s interests in their region.
Below right is a check box for accepting company terms and conditions. Below is a registration button. After you have completed all the fields you can register with this company.

If you do not fill in any fields or fields you wish to register you will not be able to do so. Because it has JavaScript authentication functionality. It helps the website not to allow those people who are not interested in sharing relevant information.
This registration form responds to all devices and you can easily create it by following the tips below.

How do you create a registration form in HTML?

By creating it you need to download an editor for writing these languages (vs code or sublime etc.). After that, you need to create three files in your editor and save them in the same folder.

Html Source code:

Then paste it into your file.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>registration  Form by fantacy Design</title>
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Font-->
	<link rel="stylesheet" type="text/css" href="css/montserrat-font.css">
	<link rel="stylesheet" type="text/css" href="fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
	<!-- Main Style Css -->
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body class="form-v10">
	<div class="page-content">
		<div class="form-v10-content">
			<form class="form-detail" action="#" method="post" id="myform">
				<div class="form-left">
					<h2>Badge Registration</h2>
					<div class="form-row">
						<select name="title">
						    <option class="option" value="title">Title</option>
						    <option class="option" value="businessman">Businessman</option>
						    <option class="option" value="reporter">Reporter</option>
						    <option class="option" value="secretary">Secretary</option>
						</select>
						<span class="select-btn">
						  	<i class="zmdi zmdi-chevron-down"></i>
						</span>
					</div>
					<div class="form-group">
						<div class="form-row form-row-1">
							<input type="text" name="first_name" id="first_name" class="input-text" placeholder="First Name" required>
						</div>
						<div class="form-row form-row-2">
							<input type="text" name="last_name" id="last_name" class="input-text" placeholder="Last Name" required>
						</div>
					</div>
					<div class="form-row">
						<select name="position">
						    <option value="position">Position</option>
						    <option value="director">Director</option>
						    <option value="manager">Manager</option>
						    <option value="employee">Employee</option>
						</select>
						<span class="select-btn">
						  	<i class="zmdi zmdi-chevron-down"></i>
						</span>
					</div>
					<div class="form-row">
						<input type="text" name="company" class="company" id="company" placeholder="Company" required>
					</div>
					<div class="form-group">
						<div class="form-row form-row-3">
							<input type="text" name="business" class="business" id="business" placeholder="Business Arena" required>
						</div>
						<div class="form-row form-row-4">
							<select name="employees">
							    <option value="employees">Employees</option>
							    <option value="trainee">Trainee</option>
							    <option value="colleague">Colleague</option>
							    <option value="associate">Associate</option>
							</select>
							<span class="select-btn">
							  	<i class="zmdi zmdi-chevron-down"></i>
							</span>
						</div>
					</div>
				</div>
				<div class="form-right">
					<h2>Contact Details</h2>
					<div class="form-row">
						<input type="text" name="street" class="street" id="street" placeholder="Street + Nr" required>
					</div>
					<div class="form-row">
						<input type="text" name="additional" class="additional" id="additional" placeholder="Additional Information" required>
					</div>
					<div class="form-group">
						<div class="form-row form-row-1">
							<input type="text" name="zip" class="zip" id="zip" placeholder="Zip Code" required>
						</div>
						<div class="form-row form-row-2">
							<select name="place">
							    <option value="place">Place</option>
							    <option value="Street">Street</option>
							    <option value="District">District</option>
							    <option value="City">City</option>
							</select>
							<span class="select-btn">
							  	<i class="zmdi zmdi-chevron-down"></i>
							</span>
						</div>
					</div>
					<div class="form-row">
						<select name="country">
						    <option value="country">Country</option>
						    <option value="Vietnam">Vietnam</option>
						    <option value="Malaysia">Malaysia</option>
						    <option value="India">India</option>
						</select>
						<span class="select-btn">
						  	<i class="zmdi zmdi-chevron-down"></i>
						</span>
					</div>
					<div class="form-group">
						<div class="form-row form-row-1">
							<input type="text" name="code" class="code" id="code" placeholder="Code +" required>
						</div>
						<div class="form-row form-row-2">
							<input type="text" name="phone" class="phone" id="phone" placeholder="Phone Number" required>
						</div>
					</div>
					<div class="form-row">
						<input type="text" name="your_email" id="your_email" class="input-text" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" placeholder="Your Email">
					</div>
					<div class="form-checkbox">
						<label class="container"><p>I do accept the <a href="#" class="text">Terms and Conditions</a> of your site.</p>
						  	<input type="checkbox" name="checkbox">
						  	<span class="checkmark"></span>
						</label>
					</div>
					<div class="form-row-last">
						<input type="submit" name="register" class="register" value="Register Badge">
					</div>
				</div>
			</form>
		</div>
	</div>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>

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

<!DOCTYPE html>

<html>

<head>

<title>registration Form by fantacy Design</title>

</head>

<h2>Badge Registration</h2>

<option class="option" value="title">Title</option>

<option class="option" value="businessman">Businessman</option>

<option class="option" value="reporter">Reporter</option>

<option class="option" value="secretary">Secretary</option>

</select>

</span>

</div>

</div>

</div>

<option value="position">Position</option>

<option value="director">Director</option>

<option value="manager">Manager</option>

<option value="employee">Employee</option>

</select>

</span>

</div>

</div>

</div>

<option value="employees">Employees</option>

<option value="trainee">Trainee</option>

<option value="colleague">Colleague</option>

<option value="associate">Associate</option>

</select>

</span>

</div>

<h2>Contact Details</h2>

</div>

</div>

</div>

<option value="place">Place</option>

<option value="Street">Street</option>

<option value="District">District</option>

</select>

</span>

</div>

<option value="country">Country</option>

<option value="Vietnam">Vietnam</option>

<option value="Malaysia">Malaysia</option>

<option value="India">India</option>

</select>

</span>

</div>

</div>

</div>

</div>

<label class="container"><p>I do accept the <a href="#" class="text">Terms and Conditions</a> of your site.</p>

</label>

</div>

</div>

</form>

</div>

</body>

</html>

Source code for CSS file

Then connect these files with each other using the link tag. CSS is used to customize fields and buttons. It helps to make the UI responsive and attractive.

body {
	margin:  0;
}
.page-content {
	width: 100%;
	margin:  0 auto;
	background: #3575D3;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-o-justify-content: center;
	-ms-justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-o-align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;


}
.form-v10-content  {
	background: #fff;
	width: 1100px;
	border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-ms-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	margin: 95px 0;
	position: relative;
	font-family: 'Montserrat', sans-serif;
}
.form-v10-content .form-detail {
	position: relative;
	width: 100%;
	display: flex;
	display: -webkit-flex;
}
.form-v10-content .form-detail h2 {
	font-weight: 500;
	font-size: 25px;
	margin-bottom: 34px;
	padding: 33px 50px 0px 60px;
}
.form-v10-content .form-detail .form-left {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	width: 100%;
}
.form-v10-content .form-detail .form-left h2 {
	color: #2271dd;
}
.form-v10-content .form-detail .form-right {
	width: 100%;
	background: #262626;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.form-v10-content .form-detail .form-right h2 {
	color: #fff;
}
.form-v10-content .form-detail .form-group {
	display: flex;
	display: -webkit-flex;
}
.form-v10-content .form-detail .form-row {
	position: relative;
	margin-bottom: 24px;
	padding-left: 60px;
    padding-right: 50px;
}
.form-v10-content .form-detail .form-left .form-group .form-row.form-row-1 {
	width: 50%;
	padding: 0 12px 0 60px;
}
.form-v10-content .form-detail .form-left .form-group .form-row.form-row-2 {
	width: 50%;
	padding: 0 50px 0 12px;
}
.form-v10-content .form-detail .form-left .form-group .form-row.form-row-3 {
	width: 73%;
	padding: 0 12px 0 60px;
}
.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 {
	width: 50%;
	padding: 0 50px 0 12px;
}
.form-v10-content .form-detail .form-right .form-group .form-row.form-row-1 {
	width: 50%;
	padding: 0 12px 0 60px;
}
.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {
	width: 100%;
	padding: 0 50px 0 12px;
}
.form-v10-content .form-detail select,
.form-v10-content .form-detail input {
	width: 100%;
    padding: 11.5px 15px 15px 15px;
    border: 1px solid transparent;
    background: transparent;
    appearance: unset;
    -moz-appearance: unset;
    -webkit-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
.form-v10-content .form-detail select {
	background: 0 0;
	position: relative;
	z-index: 9;
	cursor: pointer;
}
.form-v10-content .form-detail .form-left select {
	color: #666;
}
.form-v10-content .form-detail .form-right select {
	color: #f2f2f2;
}
.form-v10-content .form-detail .select-btn {
	z-index: 0;
    position: absolute;
    top: 30%;
    right: 11.5%;
    font-size: 18px;
}
.form-v10-content .form-detail .form-left .select-btn {
    color: #666;
}
.form-v10-content .form-detail .form-right .select-btn {
    color: #f2f2f2;
}
.form-v10-content .form-detail .form-group .form-row.form-row-4 .select-btn {
	top: 20%;
	right: 26%;
}
.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {
	top: 20%;
	right: 19%;
}
.form-v10-content .form-detail .form-left input {
	color: #000;
}
.form-v10-content .form-detail .form-right input {
	color: #fff;
}
.form-v10-content .form-detail .form-left input,
.form-v10-content .form-detail .form-left select {
	border-bottom: 1px solid #ccc;
}
.form-v10-content .form-detail .form-left input:focus,
.form-v10-content .form-detail .form-left select:focus {
	border-bottom: 1px solid #999;
}
.form-v10-content .form-detail .form-right input,
.form-v10-content .form-detail .form-right select {
	border-bottom: 1px solid;
	border-bottom-color: rgba(255, 255, 255, 0.3);
}
.form-v10-content .form-detail .form-right input:focus,
.form-v10-content .form-detail .form-right select:focus {
	border-bottom: 1px solid #ccc;
}
.form-v10-content .form-detail .form-right select option {
	background: #262626;
}
.form-v10-content .form-detail .form-checkbox {
	margin-top: 37px;
	padding: 0 50px 0 60px;
	position: relative;
}
.form-v10-content .form-detail .form-checkbox input {
	position: absolute;
    opacity: 0;
}
.form-v10-content .form-detail .form-checkbox .checkmark {
	position: absolute;
    top: 1px;
    left: 60px;
    height: 15px;
    width: 15px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}
.form-v10-content .form-detail .form-checkbox .checkmark::after {
	content: "";
    position: absolute;
    left: 5px;
   	top: 1px;
    width: 3px;
    height: 8px;
    border: 1px solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    display: none;
}
.form-v10-content .form-detail .form-checkbox input:checked ~ .checkmark::after {
    display: block;
}
.form-v10-content .form-detail .form-checkbox p {
    margin-left: 34px;
    color: #e5e5e5;
    font-size: 14px;
    font-weight: 400;
}
.form-v10-content .form-detail .form-checkbox .text {
	font-weight: 400;
	color: #fff;
	text-decoration: underline;
}
.form-v10-content .form-detail .form-right .form-row-last {
    padding-left: 60px;
    margin: 44px 0 10px;
}
.form-v10-content .form-detail .form-right .register {
	background: #fff;
	border-radius: 25px;
	-o-border-radius: 25px;
	-ms-border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);
	-ms-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);
	width: 180px;
	border: none;
	margin: 6px 0 50px 0px;
	cursor: pointer;
	color: #333;
	font-weight: 700;
	font-size: 15px;
}
.form-v10-content .form-detail .form-right .register:hover {
	background: #ccc;
}
.form-v10-content .form-detail .form-right .form-row-last input {
	padding: 12.5px;
}
.form-v10-content .form-detail .form-left input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #666;
  font-size: 16px;
}
.form-v10-content .form-detail .form-left input::-moz-placeholder { /* Firefox 19+ */
  color: #666;
  font-size: 16px;
}
.form-v10-content .form-detail .form-left input:-ms-input-placeholder { /* IE 10+ */
  color: #666;
  font-size: 16px;
}
.form-v10-content .form-detail .form-left input:-moz-placeholder { /* Firefox 18- */
  color: #666;
  font-size: 16px;
}
.form-v10-content .form-detail .form-right input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #f2f2f2;
  font-size: 16px;
}
.form-v10-content .form-detail .form-right input::-moz-placeholder { /* Firefox 19+ */
  color: #f2f2f2;
  font-size: 16px;
}
.form-v10-content .form-detail .form-right input:-ms-input-placeholder { /* IE 10+ */
  color: #f2f2f2;
  font-size: 16px;
}
.form-v10-content .form-detail .form-right input:-moz-placeholder { /* Firefox 18- */
  color: #f2f2f2;
  font-size: 16px;
}

/* Responsive */
@media screen and (max-width: 1199px) {
	.form-v10-content {
		margin:  95px 20px;
	}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
	.form-v10-content .form-detail .form-group {
		flex-direction:  column;
		-o-flex-direction:  column;
		-ms-flex-direction:  column;
		-moz-flex-direction:  column;
		-webkit-flex-direction:  column;
	}
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-1,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-2,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-3,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4,
	.form-v10-content .form-detail .form-right .form-group .form-row.form-row-1,
	.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {
	    width: auto;
	    padding: 0 50px 0 60px;
	}
	.form-v10-content .form-detail .select-btn,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 .select-btn,
	.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {
		right: 15%;
	}

}
@media screen and (max-width: 767px) {
	.form-v10-content .form-detail {
		flex-direction:  column;
		-o-flex-direction:  column;
		-ms-flex-direction:  column;
		-moz-flex-direction:  column;
		-webkit-flex-direction:  column;
	}
	.form-v10-content .form-detail .form-right {
		border-top-right-radius: 0px;
    	border-bottom-left-radius: 10px;
	}
	.form-v10-content .form-detail .form-left {
		padding-bottom: 50px;
	}
}
@media screen and (max-width: 575px) {
	.form-v10-content .form-detail .form-group {
		flex-direction:  column;
		-o-flex-direction:  column;
		-ms-flex-direction:  column;
		-moz-flex-direction:  column;
		-webkit-flex-direction:  column;
	}
	.form-v10-content .form-detail .form-row,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-1,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-2,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-3,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4,
	.form-v10-content .form-detail .form-right .form-group .form-row.form-row-1,
	.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {
	    width: auto;
	    padding: 0 30px;
	}
	.form-v10-content .form-detail .select-btn,
	.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 .select-btn,
	.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {
		right: 15%;
	}
	.form-v10-content .form-detail h2 {
	    padding: 33px 30px 0px 30px;
	}
	.form-v10-content .form-detail .form-checkbox {
		padding: 0 30px;
	}
	.form-v10-content .form-detail .form-checkbox .checkmark {
		left: 30px;
	}
	.form-v10-content .form-detail .form-right .form-row-last {
		padding-left: 0;
		text-align: center;
	    margin: 44px 0 30px;
	}
}

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

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

body {

margin: 0;

}

.page-content {

width: 100%;

margin: 0 auto;

background: #3575D3;

display: flex;

display: -webkit-flex;

justify-content: center;

-o-justify-content: center;

-ms-justify-content: center;

-moz-justify-content: center;

-webkit-justify-content: center;

align-items: center;

-o-align-items: center;

-ms-align-items: center;

-moz-align-items: center;

-webkit-align-items: center;

}

.form-v10-content {

background: #fff;

width: 1100px;

border-radius: 10px;

-o-border-radius: 10px;

-ms-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);

-o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);

-ms-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);

-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);

-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);

margin: 95px 0;

position: relative;

font-family: 'Montserrat', sans-serif;

}

.form-v10-content .form-detail {

position: relative;

width: 100%;

display: flex;

display: -webkit-flex;

}

.form-v10-content .form-detail h2 {

font-weight: 500;

font-size: 25px;

margin-bottom: 34px;

padding: 33px 50px 0px 60px;

}

.form-v10-content .form-detail .form-left {

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

width: 100%;

}

.form-v10-content .form-detail .form-left h2 {

color: #2271dd;

}

.form-v10-content .form-detail .form-right {

width: 100%;

background: #262626;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

.form-v10-content .form-detail .form-right h2 {

color: #fff;

}

.form-v10-content .form-detail .form-group {

display: flex;

display: -webkit-flex;

}

.form-v10-content .form-detail .form-row {

position: relative;

margin-bottom: 24px;

padding-left: 60px;

padding-right: 50px;

}

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-1 {

width: 50%;

padding: 0 12px 0 60px;

}

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-2 {

width: 50%;

padding: 0 50px 0 12px;

}

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-3 {

width: 73%;

padding: 0 12px 0 60px;

}

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 {

width: 50%;

padding: 0 50px 0 12px;

}

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-1 {

width: 50%;

padding: 0 12px 0 60px;

}

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {

width: 100%;

padding: 0 50px 0 12px;

}

.form-v10-content .form-detail select,

.form-v10-content .form-detail input {

width: 100%;

padding: 11.5px 15px 15px 15px;

border: 1px solid transparent;

background: transparent;

appearance: unset;

-moz-appearance: unset;

-webkit-appearance: unset;

-o-appearance: unset;

-ms-appearance: unset;

outline: none;

-moz-outline: none;

-webkit-outline: none;

-o-outline: none;

-ms-outline: none;

font-family: 'Montserrat', sans-serif;

font-size: 16px;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

}

.form-v10-content .form-detail select {

background: 0 0;

position: relative;

z-index: 9;

cursor: pointer;

}

.form-v10-content .form-detail .form-left select {

color: #666;

}

.form-v10-content .form-detail .form-right select {

color: #f2f2f2;

}

.form-v10-content .form-detail .select-btn {

z-index: 0;

position: absolute;

top: 30%;

right: 11.5%;

font-size: 18px;

}

.form-v10-content .form-detail .form-left .select-btn {

color: #666;

}

.form-v10-content .form-detail .form-right .select-btn {

color: #f2f2f2;

}

.form-v10-content .form-detail .form-group .form-row.form-row-4 .select-btn {

top: 20%;

right: 26%;

}

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {

top: 20%;

right: 19%;

}

.form-v10-content .form-detail .form-left input {

color: #000;

}

.form-v10-content .form-detail .form-right input {

color: #fff;

}

.form-v10-content .form-detail .form-left input,

.form-v10-content .form-detail .form-left select {

border-bottom: 1px solid #ccc;

}

.form-v10-content .form-detail .form-left input:focus,

.form-v10-content .form-detail .form-left select:focus {

border-bottom: 1px solid #999;

}

.form-v10-content .form-detail .form-right input,

.form-v10-content .form-detail .form-right select {

border-bottom: 1px solid;

border-bottom-color: rgba(255, 255, 255, 0.3);

}

.form-v10-content .form-detail .form-right input:focus,

.form-v10-content .form-detail .form-right select:focus {

border-bottom: 1px solid #ccc;

}

.form-v10-content .form-detail .form-right select option {

background: #262626;

}

.form-v10-content .form-detail .form-checkbox {

margin-top: 37px;

padding: 0 50px 0 60px;

position: relative;

}

.form-v10-content .form-detail .form-checkbox input {

position: absolute;

opacity: 0;

}

.form-v10-content .form-detail .form-checkbox .checkmark {

position: absolute;

top: 1px;

left: 60px;

height: 15px;

width: 15px;

border: 1px solid #e5e5e5;

cursor: pointer;

}

.form-v10-content .form-detail .form-checkbox .checkmark::after {

content: "";

position: absolute;

left: 5px;

top: 1px;

width: 3px;

height: 8px;

border: 1px solid #fff;

border-width: 0 2px 2px 0;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

display: none;

}

.form-v10-content .form-detail .form-checkbox input:checked ~ .checkmark::after {

display: block;

}

.form-v10-content .form-detail .form-checkbox p {

margin-left: 34px;

color: #e5e5e5;

font-size: 14px;

font-weight: 400;

}

.form-v10-content .form-detail .form-checkbox .text {

font-weight: 400;

color: #fff;

text-decoration: underline;

}

.form-v10-content .form-detail .form-right .form-row-last {

padding-left: 60px;

margin: 44px 0 10px;

}

.form-v10-content .form-detail .form-right .register {

background: #fff;

border-radius: 25px;

-o-border-radius: 25px;

-ms-border-radius: 25px;

-moz-border-radius: 25px;

-webkit-border-radius: 25px;

box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);

-o-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);

-ms-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);

-moz-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);

-webkit-box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);

width: 180px;

border: none;

margin: 6px 0 50px 0px;

cursor: pointer;

color: #333;

font-weight: 700;

font-size: 15px;

}

.form-v10-content .form-detail .form-right .register:hover {

background: #ccc;

}

.form-v10-content .form-detail .form-right .form-row-last input {

padding: 12.5px;

}

.form-v10-content .form-detail .form-left input::-webkit-input-placeholder { /* Chrome/Opera/Safari */

color: #666;

font-size: 16px;

}

.form-v10-content .form-detail .form-left input::-moz-placeholder { /* Firefox 19+ */

color: #666;

font-size: 16px;

}

.form-v10-content .form-detail .form-left input:-ms-input-placeholder { /* IE 10+ */

color: #666;

font-size: 16px;

}

.form-v10-content .form-detail .form-left input:-moz-placeholder { /* Firefox 18- */

color: #666;

font-size: 16px;

}

.form-v10-content .form-detail .form-right input::-webkit-input-placeholder { /* Chrome/Opera/Safari */

color: #f2f2f2;

font-size: 16px;

}

.form-v10-content .form-detail .form-right input::-moz-placeholder { /* Firefox 19+ */

color: #f2f2f2;

font-size: 16px;

}

.form-v10-content .form-detail .form-right input:-ms-input-placeholder { /* IE 10+ */

color: #f2f2f2;

font-size: 16px;

}

.form-v10-content .form-detail .form-right input:-moz-placeholder { /* Firefox 18- */

color: #f2f2f2;

font-size: 16px;

}

/* Responsive */

@media screen and (max-width: 1199px) {

.form-v10-content {

margin: 95px 20px;

}

@media screen and (max-width: 991px) and (min-width: 768px) {

.form-v10-content .form-detail .form-group {

flex-direction: column;

-o-flex-direction: column;

-ms-flex-direction: column;

-moz-flex-direction: column;

-webkit-flex-direction: column;

}

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-1,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-2,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-3,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4,

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-1,

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {

width: auto;

padding: 0 50px 0 60px;

}

.form-v10-content .form-detail .select-btn,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 .select-btn,

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {

right: 15%;

}

@media screen and (max-width: 767px) {

.form-v10-content .form-detail {

flex-direction: column;

-o-flex-direction: column;

-ms-flex-direction: column;

-moz-flex-direction: column;

-webkit-flex-direction: column;

}

.form-v10-content .form-detail .form-right {

border-top-right-radius: 0px;

border-bottom-left-radius: 10px;

}

.form-v10-content .form-detail .form-left {

padding-bottom: 50px;

}

@media screen and (max-width: 575px) {

.form-v10-content .form-detail .form-group {

flex-direction: column;

-o-flex-direction: column;

-ms-flex-direction: column;

-moz-flex-direction: column;

-webkit-flex-direction: column;

}

.form-v10-content .form-detail .form-row,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-1,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-2,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-3,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4,

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-1,

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {

width: auto;

padding: 0 30px;

}

.form-v10-content .form-detail .select-btn,

.form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 .select-btn,

.form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {

right: 15%;

}

.form-v10-content .form-detail h2 {

padding: 33px 30px 0px 30px;

}

.form-v10-content .form-detail .form-checkbox {

padding: 0 30px;

}

.form-v10-content .form-detail .form-checkbox .checkmark {

left: 30px;

}

.form-v10-content .form-detail .form-right .form-row-last {

padding-left: 0;

text-align: center;

margin: 44px 0 30px;

}

But if you still can’t build it we’ll create a file don’t worry. So, download it.

So, if you like it you should comment and share.
Thanks for reading it.

Download Source File

How Analytics Inform User-Centric Web Design

Top Categories

HTML Forms

Languages

Registration form in Html and CSS Source code

Registration form in HTML:

You might like it:

How do you create a registration form in HTML?

Html Source code:

Source code for CSS file

How Analytics Inform User-Centric Web Design

The Impact of Machine Learning on Web Development

Color Psychology in Landing Page Design: Choosing Palettes that Elicit Action and Emotion

The Power of Microinteractions: Enhancing User Engagement Through Small Gestures

The Importance of User Experience (UX) Design in Web Development

Beginner’s Guide to Responsive Web Design

Leave a Comment Cancel reply

How to Improve Website Performance with Optimized HTML, CSS, and JavaScript

HTML, CSS, and JavaScript: A Dynamic Trio for Creating Responsive Websites

New Website Preloader with source code

About Us

Categories

Quick Links

Contact Info

Subscribe, For Weekly Updates

Copyright 2025 - FantacyDesigns - All Rights Reserved