Scribd
Upload
52 views8 pages

Consumer Registration Form Template

The document contains a user registration form with fields for name, contact details, login credentials and submit/reset buttons. The form uses Bootstrap for styling and has validation on required fields.

Uploaded by

Arunachalam R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views8 pages

Consumer Registration Form Template

The document contains a user registration form with fields for name, contact details, login credentials and submit/reset buttons. The form uses Bootstrap for styling and has validation on required fields.

Uploaded by

Arunachalam R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en" style="height: 100%;">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"


integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

<title>User Registration Form</title>

</head>

<body style="

background: linear-gradient(90deg, rgb(36, 0, 0) 0%, rgb(154, 14, 51) 35%, rgb(255, 0, 17) 100%);

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

margin: 0;

box-sizing: border-box;

">

<div class="container-fluid" style="height: 100%;">

<form class="mx-auto" id="registrationForm" style="

border-radius: 20px;

margin-top: 100px !important;

width: 50% !important;

background-color: white !important;

padding: 50px;

">

<h2 class="text-center" style="


text-align: center;

font-weight: bold;

font-size: 2rem !important;

">Consumer Registration</h2>

<div class="row">

<div class="col-md-6 mb-3" style="

text-align: left;

">

<label for="selectTitle" class="form-label" style="

font-weight: 800 !important;

">Title</label>

<select class="form-select" id="selectTitle" required style="

width: 100%;

border: none;

border-radius: 4px 4px 0 0;

background-color: rgba(255, 255, 255, 0.8);

padding: 8px;

color: rgba(0, 0, 0, .87);

">

<option value="" disabled selected>Select Title</option>

<option value="Mr.">Mr.</option>

<option value="Ms.">Ms.</option>

<option value="Mrs.">Mrs.</option>

</select>

</div>

<div class="col-md-6 mb-3" style="

text-align: left;

">
<label for="inputCustomerName" class="form-label" style="

font-weight: 800 !important;

">Customer Name</label>

<input type="text" class="form-control" id="inputCustomerName" placeholder="Enter


Customer Name" maxlength="50" required style="

width: 100%;

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border: none;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

">

</div>

</div>

<div class="row">

<div class="col-md-6 mb-3" style="

text-align: left;

">

<label for="selectCountryCode" class="form-label" style="

font-weight: 800 !important;

">Country Code</label>

<select class="form-select" id="selectCountryCode" style="

width: 100%;

border: none;

border-radius: 4px 4px 0 0;

background-color: rgba(255, 255, 255, 0.8);

padding: 8px;
color: rgba(0, 0, 0, .87);

"required >

<option value="" disabled selected>Select Country Code</option>

<option value="+1">+1 (United States)</option>

<option value="+44">+44 (United Kingdom)</option>

<option value="+91">+91 (India)</option>

</select>

</div>

<div class="col-md-6 mb-3" style="

text-align: left;

">

<label for="inputMobileNumber" class="form-label" style="

font-weight: 800 !important;

">Mobile Number</label>

<input type="tel" class="form-control" id="inputMobileNumber" placeholder="Enter Mobile


Number" pattern="[0-9]{10}" required style="

width: 100%;

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border: none;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

">

</div>

</div>

<div class="row">

<div class="col-md-6 mb-3" style="


text-align: left;

">

<label for="inputEmail" class="form-label" style="

font-weight: 800 !important;

">Email</label>

<input type="email" class="form-control" id="inputEmail" placeholder="Enter Email" required


style="

width: 100%;

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border: none;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

">

</div>

<div class="col-md-6 mb-3" style="

text-align: left;

">

<label for="inputUserId" class="form-label" style="

font-weight: 800 !important;

">User ID</label>

<input type="text" class="form-control" id="inputUserId" placeholder="Enter User ID"


minlength="5" maxlength="20" required style="

width: 100%;

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border: none;
border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

">

</div>

</div>

<div class="row">

<div class="col-md-6 mb-3" style="

text-align: left;

">

<label for="inputPassword" class="form-label" style="

font-weight: 800 !important;

">Password</label>

<input type="password" class="form-control" id="inputPassword" placeholder="Enter


Password" maxlength="30" required style="

width: 100%;

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border: none;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

">

</div>

<div class="col-md-6 mb-3" style="

text-align: left;

">

<label for="inputConfirmPassword" class="form-label" style="

font-weight: 800 !important;


">Confirm Password</label>

<input type="password" class="form-control" id="inputConfirmPassword"


placeholder="Confirm Password" maxlength="30" required style="

width: 100%;

color: rgba(0, 0, 0, .87);

border-bottom-color: rgba(0, 0, 0, .42);

box-shadow: none !important;

border: none;

border-bottom: 1px solid;

border-radius: 4px 4px 0 0;

">

</div>

</div>

<div class="row">

<div class="col-md-4 mb-3" style="

text-align: center;

">

<button type="submit" class="btn btn-primary mt-4" style="

width: 100%;

border: none;

border-radius: 50px;

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(75,14,154,1) 35%,


rgba(0,212,255,1) 100%);

">Register</button>

</div>

<div class="col-md-4 mb-3" style="

text-align: center;

">
<button type="reset" class="btn btn-primary mt-4" style="

width: 100%;

border: none;

border-radius: 50px;

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(75,14,154,1) 35%,


rgba(0,212,255,1) 100%);

">Reset</button>

</div>

</div>

</form>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<script>

document.getElementById('registrationForm').addEventListener('submit', function(event) {

event.preventDefault();

alert('Consumer Registration successful.');

});

</script>

</body>

</html>

You might also like