"Nilesh-form-design"
Bootstrap 4.1.1 Snippet by nileshkardate

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="section"> <div class="container"> <!-- Section 1 starts --> <div class="row my-3 my-md-4" id="form"> <!-- Image starts --> <div class="col-lg-6 col-12 my-lg-4 mt-3 mb-1 pr-sm-5"> <h1 class="mt-0 mb-2">Check Your <span class="color-19A33B">FREE</span> CIBIL Score</h1> <p class="color-7d7d7d"> And know how to improve it, so you can make better financial decisions with our customized offers </p> <img src="https://customerportal.iifl.com/credit-score/assets/images/login-banner.svg" class="img-fluid " alt="Financial Health Checkup" title="Financial Health Checkup"> </div> <!-- Image ends --> <!-- Form Starts --> <div class="col-lg-6 col-12 my-lg-4 p-4 login-wrapper x_panel"> <h3 class="mt-0 mb-2 h3">#Just share a few details and you are good to go..</h3> <h6 class="mt-1 d-none">Credit score helps you analyze your loans and cards</h6> <div class="alert alert-info d-none" role="alert"> Fetching your credit report will not affeect your credit score </div> <div class="my-2"> <form class="loginForm" id="loginForm" name="loginForm" novalidate="novalidate"> <div class="row cibil-score-wrapper"> <div class="form__group col-md-6"> <input type="text" id="FullName" class="form__field" name="FullName" placeholder="Full Name" autocomplete="off"> <label for="FullName" class="form__label">Full Name</label> </div> <div class="form__group col-md-6"> <input type="text" class="form__field datepicker" id="inputDate" name="inputDate" placeholder="DOB (DDMMYYYY)" onclick="(this.type = 'date')" tabindex="6" autocomplete="off" max="2001-02-25" min="1922-02-25"> <label class="form__label mb-0" for="inputDate">DOB</label> </div> <div class=" form__group col-md-6"> <label class="form__label mb-0 w-84 LabelselectIdentity" for="PanNumber"> <span class="change">change</span> <select id="selectIdentity" name="selectIdentity" data-native-menu="false" class="border-0 bg-transparent selectIdentity"> <option value="TaxId">PAN No.</option> <option value="VoterId">Voter ID No.</option> <option value="PassportId"> Passport No.</option> <option value="RationCardId">Ration Card No.</option> <option value="DriversLicenseId">Driving License No.</option> </select> </label> <input type="text" class="form__field text-uppercase" id="PanNumber" name="PanNumber" placeholder="Enter Identity" autocomplete="off"> </div> <div class="form__group col-md-6"> <input class="form__field text-box single-line" data-val="true" data-val-regex="Invalid Pincode" maxlength="6" minlength="6" data-val-regex-pattern="^[1-9][0-9]{5}$" data-val-required="The Pincode field is required." id="Pincode" name="Pincode" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" placeholder="Pincode" type="text" value="" onkeypress="return numbers_validation(event);"> <label class="form__label mb-0" for="Pincode">Pincode</label> <span class="field-validation-valid text-danger" data-valmsg-for="Pincode" data-valmsg-replace="true"></span> </div> <div class=" form__group col-md-6"> <input type="tel" maxlength="10" class="form__field " id="MobileNO" name="MobileNO" placeholder="Mobile No." onkeypress="return numbers_validation(event);" autocomplete="off" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"> <label class="form__label mb-0" for="MobileNO">Mobile No.</label> </div> <div class=" form__group col-md-6"> <input type="text" class="form__field " id="Email" name="Email" placeholder="Email ID" autocomplete="off"> <label class="form__label mb-0" for="Email">Email ID</label> </div> <div class="col-12 mt-2"> <div class="text-center pt-4 pb-3 note w-75 m-auto"> By continuing, I accept the Terms & Conditions and agree to receive updates on Whatsapp </div> <div class="text-center pt-4 pb-3 note w-75 m-auto">By clicking on below button I agree and confirm that I have read <a href="https://customerportal.iifl.com/credit-score/cibil-terms-and-conditions" target="_blank">CIBIL Terms & Conditions.</a></div> <div class="text-center py-2"> <input type="hidden" value="" id="utm_source" name="utm_source"> <input type="hidden" value="" id="utm_business" name="utm_business"> <input type="hidden" value="" id="utm_campaign" name="utm_campaign"> <input type="hidden" value="" id="utm_medium" name="utm_medium"> <input type="hidden" value="" id="utm_term" name="utm_term"> <input type="hidden" value="" id="utm_content" name="utm_content"> <input type="hidden" name="token_get_value" class="token_values" id="token_R" value="dee97269de067eca61dfe7173ed6e820"> <input type="hidden" name="tokenpass" class="token_values" id="token_A" value="23c1daca581093fb514e5a7a7bb3cf43"> <p class="error send_otp_error"></p> <button type="submit" class="btn btn-success btn-lg" id="btnmodalMobileOTP"> <!-- data-toggle="modal" data-target="#modalMobileOTP" -->Generate Free Report</button></div> </div> </div> </form> </div> <img src="assets/images/cibil_powered.png" width="50" alt="cibil" class="cibil_powered img-fluid"> </div> <!-- Form Ends --> </div> <!-- Section 1 Ends --> </div> </div>
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}.mt-3, .my-3 { margin-top: 1rem !important;}.mb-3, .my-3 { margin-bottom: 1rem !important;}.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px;}.col-12 { flex: 0 0 100%; max-width: 100%;}.mb-1, .my-1 { margin-bottom: 0.25rem !important;}h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem;}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2;}.h1, h1 { font-size: 2.5rem;}.mt-0, .my-0 { margin-top: 0px !important;}.mb-2, .my-2 { margin-bottom: 0.5rem !important;}#form h1 { font-size: 2rem !important;}h1 { color: rgb(35, 33, 128); font-family: DMSans-Bold; font-size: 2.2rem !important;}.color-19A33B { color: rgb(25, 163, 59);}p { margin-top: 0px; margin-bottom: 1rem;}.color-7d7d7d { color: rgb(125, 125, 125);}img { vertical-align: middle; border-style: none;}.img-fluid { max-width: 100%; height: auto;}.p-4 { padding: 1.5rem !important;}.x_panel { background: rgb(255, 255, 255); padding: 1.25rem; margin: 0px 0px 1.25rem; box-shadow: rgb(224, 224, 224) -3px 2px 14px;}.login-wrapper { border: 1px solid rgb(157, 157, 191); border-radius: 10px; background: rgb(255, 255, 255);}.h3, h3 { font-size: 1.75rem;}h3, .login-wrapper h3 { color: rgb(36, 32, 86); font-size: 1.2rem; font-family: DMSans-Regular;}.h6, h6 { font-size: 1rem;}.d-none { display: none !important;}.mt-1, .my-1 { margin-top: 0.25rem !important;}.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem;}.alert-info { color: rgb(12, 84, 96); background-color: rgb(209, 236, 241); border-color: rgb(190, 229, 235);}.mt-2, .my-2 { margin-top: 0.5rem !important;}.form__group { position: relative; padding: 15px 0px 0px;}.form__group { position: relative; padding: 15px 10px 0px; margin-top: 10px;}button, input, optgroup, select, textarea { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit;}button, input { overflow: visible;}.form__field { font-family: inherit; width: 100%; border: 1px solid rgb(210, 210, 210); outline: 0px; font-size: 16px; color: rgb(0, 0, 0); padding: 6px 12px; background: transparent; transition: border-color 0.2s ease 0s; font-weight: 400; border-radius: 3px; height: 42px;}.form__field::placeholder { color: transparent;}.form__field:focus { padding-bottom: 6px; border: 2px solid rgb(86, 175, 250);}input:-internal-autofill-selected { background: rgb(255, 255, 255);}.form__field { font-family: inherit; width: 100%; border: 1px solid rgb(210, 210, 210); outline: 0px; font-size: 16px; color: rgb(0, 0, 0); padding: 6px 12px; background: transparent; transition: border-color 0.2s ease 0s; font-weight: 300; border-radius: 3px; height: 42px;}.form__field:focus { padding-bottom: 6px; border: 1px solid rgb(86, 175, 250);}label { display: inline-block; margin-bottom: 0.5rem;}.form__field:placeholder-shown ~ .form__label { font-size: 16px; cursor: text; top: 25px; left: 18px; color: rgb(0, 0, 0);}.form__group label, .form__field:focus ~ .form__label { position: absolute; top: 5px; display: block; transition: all 0.2s ease 0s; font-size: 14px; padding: 0px 5px; font-weight: 300; color: rgb(146, 149, 165); left: 18px; background: rgb(255, 255, 255);}.form__field:focus ~ .form__label { color: rgb(86, 175, 250); background: rgb(255, 255, 255); position: absolute; left: 10px;}.form__field:placeholder-shown ~ .form__label { font-size: 16px; cursor: text; top: 25px; left: 20px; color: rgb(146, 149, 165); background: rgb(255, 255, 255);}.cibil-score-wrapper label, .form__field:focus ~ .form__label { position: absolute; top: 5px; display: block; transition: all 0.2s ease 0s; font-size: 14px; padding: 0px 5px; font-weight: 300; left: 20px; background: rgb(255, 255, 255);}.form__field:focus ~ .form__label { color: rgb(86, 175, 250); background: rgb(255, 255, 255); position: absolute; left: 20px; outline: 0px;}.datepicker { padding: 4px; border-radius: 4px; direction: ltr;}.form__field.datepicker { background: url("../images/calendar.svg") right 15px center no-repeat transparent;}.mb-0, .my-0 { margin-bottom: 0px !important;}.w-84 { width: 84%;}.LabelselectIdentity { position: relative;}.LabelselectIdentity .change { right: 5px; color: rgb(0, 123, 255); position: absolute; font-size: 12px; top: 4px;}button, select { text-transform: none;}select { overflow-wrap: normal;}.bg-transparent { background-color: transparent !important;}.border-0 { border: 0px !important;}.cibil-score-wrapper select { width: 100%; appearance: none; background: url("../images/caret-down.svg") right center no-repeat; opacity: 0.5; color: rgb(0, 0, 0);}select { color: rgb(146, 149, 165); outline: none;}.cibil-score-wrapper select { background: none;}.text-uppercase { text-transform: uppercase !important;}.text-danger { color: rgb(220, 53, 69) !important;}.text-danger { font-size: 0.75rem;}.w-75 { width: 75% !important;}.pb-3, .py-3 { padding-bottom: 1rem !important;}.pt-4, .py-4 { padding-top: 1.5rem !important;}.m-auto { margin: auto !important;}.text-center { text-align: center !important;}.note { color: rgb(100, 103, 116); font-size: 14px; line-height: 19px;}a { color: rgb(0, 123, 255); text-decoration: none; background-color: transparent;}a:hover { color: rgb(0, 86, 179); text-decoration: underline;}a:not([href]):not([tabindex]) { color: inherit; text-decoration: none;}a:not([href]):not([tabindex]):focus { outline: 0px;}a, a:hover { text-decoration: none !important;}.pt-2, .py-2 { padding-top: 0.5rem !important;}.pb-2, .py-2 { padding-bottom: 0.5rem !important;}.error { display: block; color: red !important; font-size: 13px !important; font-weight: 400 !important; text-align: left !important;}button { border-radius: 0px;}button:focus { outline: -webkit-focus-ring-color auto 5px;}[type="button"], [type="reset"], [type="submit"], button { appearance: button;}.btn { display: inline-block; font-weight: 400; color: rgb(33, 37, 41); text-align: center; vertical-align: middle; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;}.btn:hover { color: rgb(33, 37, 41); text-decoration: none;}.btn.focus, .btn:focus { outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem;}.btn.disabled, .btn:disabled { opacity: 0.65;}.btn-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69);}.btn-success:hover { color: rgb(255, 255, 255); background-color: rgb(33, 136, 56); border-color: rgb(30, 126, 52);}.btn-success.focus, .btn-success:focus { box-shadow: rgba(72, 180, 97, 0.5) 0px 0px 0px 0.2rem;}.btn-success.disabled, .btn-success:disabled { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69);}.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem;}.btn-lg { font-size: 1.1rem;}.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1.5rem; border-radius: 50px;}#accordion .btn.focus, .btn:focus { outline: 0px; box-shadow: none;}.cibil_powered { position: absolute; right: 20px; bottom: 15px;}@media (min-width: 576px) { .container { max-width: 540px; } .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; }}@media (min-width: 768px) { .container { max-width: 720px; } .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; } .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .cibil-score-wrapper .LabelselectIdentity { top: 25px; font-size: 16px; }}@media (min-width: 992px) { .container { max-width: 960px; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; } .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; }}@media (min-width: 1200px) { .container { max-width: 1140px; }}@media print { .container { min-width: 992px !important; } h2, h3, p { orphans: 3; widows: 3; } img, tr { break-inside: avoid; } h2, h3 { break-after: avoid; } a:not(.btn) { text-decoration: underline; }}@media (max-width: 640px) { .login-wrapper { max-width: 90%; margin: 0px auto; }}@media (prefers-reduced-motion: reduce) { .btn { transition: none 0s ease 0s; }}@media (max-width: 768px) { .cibil_powered { font-size: 1rem; width: 40px; }}@media (max-width: 499px) { .cibil_powered { right: 0px; }}

Related: See More


Questions / Comments: