Bootstrap Forms:

Various Simple Bootstrap Forms

We have different reasons on why we need to create a variety of different website forms. However, you need to always try and keep your forms simple. None of your users would enjoy filling out an overly complicated and long form. You really don’t need to design cute forms either. Simplicity is always beautiful and attracts anyone with any taste. The main reason for a form is to fill in the required data. any extra colour or animation can cause distractions. Also, use your creativity to find ways to make your forms shorter and instead make it more interesting. This way, you can ensure the user doesn’t get bored halfway through the process and abandon the site.

In this post, we have a code for some easy to design forms. As you know we have different forms for different sections of our websites. For example, for new users, you need a Bootstrap signup form or if they are already member of your website and they want to login, they will need a Bootstrap login form. There could also be a Bootstrap payment form if your website offers online services that needs to be bought. All in all, the code below is simple and gets the job done. Remember that there is no need for over complications.

Bootstrap Login Form

Bootstrap Signup For

Bootstrap Payment Form

<!-- This script got from frontendfreecode.com -->
  <div class="container py-3">
    <div class="row">
      <div class="col-md-12"> 
        <h2 class="text-center mb-3">Bootstrap Forms</h2>
				<nav class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
					<div class="btn-group btn-group-lg" role="group">
						<a class="btn btn-primary active" href="#formLogin">Login</a>
						<a class="btn btn-primary" href="#formRegister">Sign-up</a>
						<a class="btn btn-primary" href="#formChangePassword">Password</a>
						<a class="btn btn-primary" href="#formResetPassword">Reset</a> 
						<a class="btn btn-primary" href="#formPayment">Payment</a> 
						<a class="btn btn-primary" href="#formUserEdit">User</a> 
						<a class="btn btn-primary" href="#formContact">Contact</a> 
						<a class="btn btn-primary" href="#formComplex">Complex</a>
					</div>
				</nav>
        <hr class="mb-4">
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formLogin"></span> 
						<!-- form card login -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Login</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" id="formLogin" name="formLogin" role="form">
                  <div class="form-group">
                    <label for="uname1">Username</label> 
										<input class="form-control" id="uname1" name="uname1" required="" type="text">
                  </div>
                  <div class="form-group">
                    <label>Password</label> 
										<input autocomplete="new-password" class="form-control" id="pwd1" required="" type="password">
                  </div>
                  <div class="form-check small">
                    <label class="form-check-label">
											<input class="form-check-input" type="checkbox"> 
											<span>Remember me on this computer</span>
                    </label>
                  </div>
									<button class="btn btn-success btn-lg float-right" type="button">Login</button>
                </form>
              </div><!--/card-block-->
            </div><!-- /form card login -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formRegister"></span>
            <hr class="mb-5">
            <!-- form card register -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Sign Up</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="inputName">Name</label> 
										<input class="form-control" id="inputName" placeholder="Full name" type="text">
                  </div>
                  <div class="form-group">
                    <label for="inputEmail3">Email</label> 
										<input class="form-control" id="inputEmail3" placeholder="Email" required="" type="email">
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3">Password</label> 
										<input class="form-control" id="inputPassword3" placeholder="Password" required="" type="password"> 
										<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                  </div>
                  <div class="form-group">
                    <label for="inputVerify3">Verify</label> 
										<input class="form-control" id="inputVerify3" placeholder="Password (again)" required="" type="password">
                  </div>
                  <div class="form-group">
                    <button class="btn btn-success btn-lg float-right" type="submit">Register</button>
                  </div>
                </form>
              </div>
            </div><!-- /form card register -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formChangePassword"></span>
            <hr class="mb-5">
            <!-- form card change password -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Change Password</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="inputPasswordOld">Current Password</label> 
										<input class="form-control" id="inputPasswordOld" required="" type="password">
                  </div>
                  <div class="form-group">
                    <label for="inputPasswordNew">New Password</label> 
										<input class="form-control" id="inputPasswordNew" required="" type="password"> 
										<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                  </div>
                  <div class="form-group">
                    <label for="inputPasswordNewVerify">Verify</label> 
										<input class="form-control" id="inputPasswordNewVerify" required="" type="password"> 
										<span class="form-text small text-muted">To confirm, type the new password again.</span>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-success btn-lg float-right" type="submit">Save</button>
                  </div>
                </form>
              </div>
            </div><!-- /form card change password -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formResetPassword"></span>
            <hr class="mb-5">
            <!-- form card reset password -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Password Reset</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="inputResetPasswordEmail">Email</label> 
										<input class="form-control" id="inputResetPasswordEmail" required="" type="email"> 
										<span class="form-text small text-muted" id="helpResetPasswordEmail">Password reset instructions will be sent to this email address.</span>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-success btn-lg float-right" type="submit">Reset</button>
                  </div>
                </form>
              </div>
            </div><!-- /form card reset password -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formPayment"></span>
            <hr class="my-5">
            <!-- form card cc payment -->
            <div class="card card-outline-secondary">
              <div class="card-body">
                <h3 class="text-center">Credit Card Payment</h3>
                <hr>
                <div class="alert alert-info">
                  <a class="close" data-dismiss="alert" href="#">×</a>CVC code is required.
                </div>
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="cc_name">Card Holder's Name</label> 
										<input class="form-control" id="cc_name" pattern="\w+ \w+.*" required="required" title="First and last name" type="text">
                  </div>
                  <div class="form-group">
                    <label>Card Number</label> 
										<input autocomplete="off" class="form-control" maxlength="20" pattern="\d{16}" required="" title="Credit card number" type="text">
                  </div>
                  <div class="form-group row">
                    <label class="col-md-12">Card Exp. Date</label>
                    <div class="col-md-4">
                      <select class="form-control" name="cc_exp_mo" size="0">
                        <option value="01">
                          01
                        </option>
                        <option value="02">
                          02
                        </option>
                        <option value="03">
                          03
                        </option>
                        <option value="04">
                          04
                        </option>
                        <option value="05">
                          05
                        </option>
                        <option value="06">
                          06
                        </option>
                        <option value="07">
                          07
                        </option>
                        <option value="08">
                          08
                        </option>
                        <option value="09">
                          09
                        </option>
                        <option value="10">
                          10
                        </option>
                        <option value="11">
                          11
                        </option>
                        <option value="12">
                          12
                        </option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <select class="form-control" name="cc_exp_yr" size="0">
                        <option>
                          2016
                        </option>
                        <option>
                          2017
                        </option>
                        <option>
                          2018
                        </option>
                        <option>
                          2019
                        </option>
                        <option>
                          2020
                        </option>
                        <option>
                          2021
                        </option>
                        <option>
                          2022
                        </option>
                        <option>
                          2023
                        </option>
                        <option>
                          2024
                        </option>
                        <option>
                          2025
                        </option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <input autocomplete="off" class="form-control" maxlength="3" pattern="\d{3}" placeholder="CVC" required="" title="Three digits on the back of your card" type="text">
                    </div>
                  </div>
                  <div class="row">
                    <label class="col-md-12">Amount</label>
                  </div>
                  <div class="form-inline">
                    <div class="input-group">
                      <div class="input-group-addon">
                        $
                      </div>
											<input class="form-control text-right" id="exampleInputAmount" placeholder="39" type="text">
                      <div class="input-group-addon">
                        .00
                      </div>
                    </div>
                  </div>
                  <hr>
                  <div class="form-group row">
                    <div class="col-md-6">
                      <button class="btn btn-default btn-lg btn-block" type="reset">Cancel</button>
                    </div>
                    <div class="col-md-6">
                      <button class="btn btn-success btn-lg btn-block" type="submit">Submit</button>
                    </div>
                  </div>
                </form>
              </div>
            </div><!-- /form card cc payment -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formUserEdit"></span>
            <hr class="my-5">
            <!-- form user info -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">User Information</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">First name</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="Jane">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Last name</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="Bishop">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Email</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="email" value="email@gmail.com">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Company</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Website</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="url" value="">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Time Zone</label>
                    <div class="col-lg-9">
                      <select class="form-control" id="user_time_zone" size="0">
                        <option value="Hawaii">
                          (GMT-10:00) Hawaii
                        </option>
                        <option value="Alaska">
                          (GMT-09:00) Alaska
                        </option>
                        <option value="Pacific Time (US &amp; Canada)">
                          (GMT-08:00) Pacific Time (US &amp; Canada)
                        </option>
                        <option value="Arizona">
                          (GMT-07:00) Arizona
                        </option>
                        <option value="Mountain Time (US &amp; Canada)">
                          (GMT-07:00) Mountain Time (US &amp; Canada)
                        </option>
                        <option selected="selected" value="Central Time (US &amp; Canada)">
                          (GMT-06:00) Central Time (US &amp; Canada)
                        </option>
                        <option value="Eastern Time (US &amp; Canada)">
                          (GMT-05:00) Eastern Time (US &amp; Canada)
                        </option>
                        <option value="Indiana (East)">
                          (GMT-05:00) Indiana (East)
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Username</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="janeuser">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Password</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="password" value="11111122333"> 
												<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Confirm</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="password" value="11111122333">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label"></label>
                    <div class="col-lg-9">
                      <input class="btn btn-secondary" type="reset" value="Cancel"> 
											<input class="btn btn-primary" type="button" value="Save Changes">
                    </div>
                  </div>
                </form>
              </div>
            </div><!-- /form user info -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formContact"></span>
            <hr class="my-5">
            <!-- form contact -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Contact</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <fieldset>
                    <label class="mb-0" for="name2">Name</label>
                    <div class="row mb-1">
                      <div class="col-lg-12">
                        <input class="form-control" id="name2" name="name2" required="" type="text">
                      </div>
                    </div>
										<label class="mb-0" for="email2">Email</label>
                    <div class="row mb-1">
                      <div class="col-lg-12">
                        <input class="form-control" id="email2" name="email2" required="" type="text">
                      </div>
                    </div>
										<label class="mb-0" for="message2">Message</label>
                    <div class="row mb-1">
                      <div class="col-lg-12">
                        <textarea class="form-control" id="message2" name="message2" required="" rows="6"></textarea>
                      </div>
                    </div>
										<button class="btn btn-secondary btn-lg float-right" type="submit">Send Message</button>
                  </fieldset>
                </form>
              </div>
            </div><!-- /form contact -->
          </div><!--/col-->
        </div>
        <div class="row justify-content-center">
          <div class="col-md-10 offset-md-1">
            <span class="anchor" id="formComplex"></span>
            <hr class="my-5">
            <!-- form complex example -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Complex Form Example</h3>
              </div>
              <div class="card-body">
                <div class="row mt-4">
                  <div class="col-sm-5 pb-3">
                    <label for="exampleAccount">Account #</label> 
										<input class="form-control" id="exampleAccount" placeholder="XXXXXXXXXXXXXXXX" type="text">
                  </div>
                  <div class="col-sm-3 pb-3">
                    <label for="exampleCtrl">Control #</label> 
										<input class="form-control" id="exampleCtrl" placeholder="0000" type="text">
                  </div>
                  <div class="col-sm-4 pb-3">
                    <label for="exampleAmount">Amount</label>
                    <div class="input-group">
                      <div class="input-group-addon">
                        $
                      </div>
											<input class="form-control" id="exampleAmount" placeholder="Amount" type="number">
                    </div>
                  </div>
                  <div class="col-sm-6 pb-3">
                    <label for="exampleFirst">First Name</label> 
										<input class="form-control" id="exampleFirst" type="text">
                  </div>
                  <div class="col-sm-6 pb-3">
                    <label for="exampleLast">Last Name</label> 
										<input class="form-control" id="exampleLast" type="text">
                  </div>
                  <div class="col-sm-6 pb-3">
                    <label for="exampleCity">City</label> <input class="form-control" id="exampleCity" type="text">
                  </div>
                  <div class="col-sm-3 pb-3">
                    <label for="exampleSt">State</label> <select class="form-control custom-select" id="exampleSt">
                      <option class="text-white bg-warning">
                        Pick a state
                      </option>
                      <option value="AL">
                        Alabama
                      </option>
                      <option value="AK">
                        Alaska
                      </option>
                      <option value="AZ">
                        Arizona
                      </option>
                      <option value="AR">
                        Arkansas
                      </option>
                      <option value="CA">
                        California
                      </option>
                      <option value="CO">
                        Colorado
                      </option>
                      <option value="CT">
                        Connecticut
                      </option>
                      <option value="DE">
                        Delaware
                      </option>
                      <option value="DC">
                        District Of Columbia
                      </option>
                      <option value="FL">
                        Florida
                      </option>
                      <option value="GA">
                        Georgia
                      </option>
                      <option value="HI">
                        Hawaii
                      </option>
                      <option value="ID">
                        Idaho
                      </option>
                      <option value="IL">
                        Illinois
                      </option>
                      <option value="IN">
                        Indiana
                      </option>
                      <option value="IA">
                        Iowa
                      </option>
                      <option value="KS">
                        Kansas
                      </option>
                      <option value="KY">
                        Kentucky
                      </option>
                      <option value="LA">
                        Louisiana
                      </option>
                      <option value="ME">
                        Maine
                      </option>
                      <option value="MD">
                        Maryland
                      </option>
                      <option value="MA">
                        Massachusetts
                      </option>
                      <option value="MI">
                        Michigan
                      </option>
                      <option value="MN">
                        Minnesota
                      </option>
                      <option value="MS">
                        Mississippi
                      </option>
                      <option value="MO">
                        Missouri
                      </option>
                      <option value="MT">
                        Montana
                      </option>
                      <option value="NE">
                        Nebraska
                      </option>
                      <option value="NV">
                        Nevada
                      </option>
                      <option value="NH">
                        New Hampshire
                      </option>
                      <option value="NJ">
                        New Jersey
                      </option>
                      <option value="NM">
                        New Mexico
                      </option>
                      <option value="NY">
                        New York
                      </option>
                      <option value="NC">
                        North Carolina
                      </option>
                      <option value="ND">
                        North Dakota
                      </option>
                      <option value="OH">
                        Ohio
                      </option>
                      <option value="OK">
                        Oklahoma
                      </option>
                      <option value="OR">
                        Oregon
                      </option>
                      <option value="PA">
                        Pennsylvania
                      </option>
                      <option value="RI">
                        Rhode Island
                      </option>
                      <option value="SC">
                        South Carolina
                      </option>
                      <option value="SD">
                        South Dakota
                      </option>
                      <option value="TN">
                        Tennessee
                      </option>
                      <option value="TX">
                        Texas
                      </option>
                      <option value="UT">
                        Utah
                      </option>
                      <option value="VT">
                        Vermont
                      </option>
                      <option value="VA">
                        Virginia
                      </option>
                      <option value="WA">
                        Washington
                      </option>
                      <option value="WV">
                        West Virginia
                      </option>
                      <option value="WI">
                        Wisconsin
                      </option>
                      <option value="WY">
                        Wyoming
                      </option>
                    </select>
                  </div>
                  <div class="col-sm-3 pb-3">
                    <label for="exampleZip">Postal Code</label> 
										<input class="form-control" id="exampleZip" type="text">
                  </div>
                  <div class="col-md-6 pb-3">
                    <label for="exampleAccount">Preferred Color (radio buttons)</label>
                    <div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-secondary">
												<input autocomplete="off" checked id="blue" name="options" type="radio">
													Blue
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="red" name="options" type="radio">
													Red
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="green" name="options" type="radio">
													Green
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="yellow" name="options" type="radio">
													Yellow
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="black" name="options" type="radio">
													Black
											</label> 
											<label class="btn btn-secondary active">
												<input autocomplete="off" id="orange" name="options" type="radio"> 
													Orange
											</label>
                    </div>
                  </div>
                  <div class="col-md-6 pb-3">
                    <label for="exampleMessage">Message</label> 
                    <textarea class="form-control" id="complexExampleMessage" rows="3"></textarea> 
											<small class="text-muted">Add any notes here.</small>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="float-right">
                  <input class="btn btn-secondary" type="reset" value="Cancel"> 
									<input class="btn btn-primary" type="button" value="Send">
                </div>
              </div>
            </div><!--/card-->
          </div>
        </div><!--/row-->
      </div><!--/col-->
    </div><!--/row-->
  </div><!--/container-->


<!-- Scroll to Top -->
<a id="scroll-to-top" href="#" class="btn btn-primary btn-lg" role="button" title="Return to top of page" data-toggle="tooltip" data-placement="left"><i class="fa fa-arrow-up"></i></a>
<a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
	margin: 0;
	background-color: #ecfab6;
}
/* Scroll to Top */
#scroll-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

/* Scroll to Top */
$(document).ready(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $('#scroll-to-top').fadeIn();
    } else {
      $('#scroll-to-top').fadeOut();
    }
  });
  // scroll body to 0px on click
  $('#scroll-to-top').click(function () {
    $('#scroll-to-top').tooltip('hide');
    $('body,html').animate({
      scrollTop: 0 },
    800);
    return false;
  });

});

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<style>
body {
	margin: 0;
	background-color: #ecfab6;
}
/* Scroll to Top */
#scroll-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}
</style>

</head>
<body>
  <div class="container py-3">
    <div class="row">
      <div class="col-md-12"> 
        <h2 class="text-center mb-3">Bootstrap Forms</h2>
				<nav class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
					<div class="btn-group btn-group-lg" role="group">
						<a class="btn btn-primary active" href="#formLogin">Login</a>
						<a class="btn btn-primary" href="#formRegister">Sign-up</a>
						<a class="btn btn-primary" href="#formChangePassword">Password</a>
						<a class="btn btn-primary" href="#formResetPassword">Reset</a> 
						<a class="btn btn-primary" href="#formPayment">Payment</a> 
						<a class="btn btn-primary" href="#formUserEdit">User</a> 
						<a class="btn btn-primary" href="#formContact">Contact</a> 
						<a class="btn btn-primary" href="#formComplex">Complex</a>
					</div>
				</nav>
        <hr class="mb-4">
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formLogin"></span> 
						<!-- form card login -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Login</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" id="formLogin" name="formLogin" role="form">
                  <div class="form-group">
                    <label for="uname1">Username</label> 
										<input class="form-control" id="uname1" name="uname1" required="" type="text">
                  </div>
                  <div class="form-group">
                    <label>Password</label> 
										<input autocomplete="new-password" class="form-control" id="pwd1" required="" type="password">
                  </div>
                  <div class="form-check small">
                    <label class="form-check-label">
											<input class="form-check-input" type="checkbox"> 
											<span>Remember me on this computer</span>
                    </label>
                  </div>
									<button class="btn btn-success btn-lg float-right" type="button">Login</button>
                </form>
              </div><!--/card-block-->
            </div><!-- /form card login -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formRegister"></span>
            <hr class="mb-5">
            <!-- form card register -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Sign Up</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="inputName">Name</label> 
										<input class="form-control" id="inputName" placeholder="Full name" type="text">
                  </div>
                  <div class="form-group">
                    <label for="inputEmail3">Email</label> 
										<input class="form-control" id="inputEmail3" placeholder="Email" required="" type="email">
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3">Password</label> 
										<input class="form-control" id="inputPassword3" placeholder="Password" required="" type="password"> 
										<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                  </div>
                  <div class="form-group">
                    <label for="inputVerify3">Verify</label> 
										<input class="form-control" id="inputVerify3" placeholder="Password (again)" required="" type="password">
                  </div>
                  <div class="form-group">
                    <button class="btn btn-success btn-lg float-right" type="submit">Register</button>
                  </div>
                </form>
              </div>
            </div><!-- /form card register -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formChangePassword"></span>
            <hr class="mb-5">
            <!-- form card change password -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Change Password</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="inputPasswordOld">Current Password</label> 
										<input class="form-control" id="inputPasswordOld" required="" type="password">
                  </div>
                  <div class="form-group">
                    <label for="inputPasswordNew">New Password</label> 
										<input class="form-control" id="inputPasswordNew" required="" type="password"> 
										<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                  </div>
                  <div class="form-group">
                    <label for="inputPasswordNewVerify">Verify</label> 
										<input class="form-control" id="inputPasswordNewVerify" required="" type="password"> 
										<span class="form-text small text-muted">To confirm, type the new password again.</span>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-success btn-lg float-right" type="submit">Save</button>
                  </div>
                </form>
              </div>
            </div><!-- /form card change password -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formResetPassword"></span>
            <hr class="mb-5">
            <!-- form card reset password -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Password Reset</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="inputResetPasswordEmail">Email</label> 
										<input class="form-control" id="inputResetPasswordEmail" required="" type="email"> 
										<span class="form-text small text-muted" id="helpResetPasswordEmail">Password reset instructions will be sent to this email address.</span>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-success btn-lg float-right" type="submit">Reset</button>
                  </div>
                </form>
              </div>
            </div><!-- /form card reset password -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formPayment"></span>
            <hr class="my-5">
            <!-- form card cc payment -->
            <div class="card card-outline-secondary">
              <div class="card-body">
                <h3 class="text-center">Credit Card Payment</h3>
                <hr>
                <div class="alert alert-info">
                  <a class="close" data-dismiss="alert" href="#">×</a>CVC code is required.
                </div>
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group">
                    <label for="cc_name">Card Holder's Name</label> 
										<input class="form-control" id="cc_name" pattern="\w+ \w+.*" required="required" title="First and last name" type="text">
                  </div>
                  <div class="form-group">
                    <label>Card Number</label> 
										<input autocomplete="off" class="form-control" maxlength="20" pattern="\d{16}" required="" title="Credit card number" type="text">
                  </div>
                  <div class="form-group row">
                    <label class="col-md-12">Card Exp. Date</label>
                    <div class="col-md-4">
                      <select class="form-control" name="cc_exp_mo" size="0">
                        <option value="01">
                          01
                        </option>
                        <option value="02">
                          02
                        </option>
                        <option value="03">
                          03
                        </option>
                        <option value="04">
                          04
                        </option>
                        <option value="05">
                          05
                        </option>
                        <option value="06">
                          06
                        </option>
                        <option value="07">
                          07
                        </option>
                        <option value="08">
                          08
                        </option>
                        <option value="09">
                          09
                        </option>
                        <option value="10">
                          10
                        </option>
                        <option value="11">
                          11
                        </option>
                        <option value="12">
                          12
                        </option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <select class="form-control" name="cc_exp_yr" size="0">
                        <option>
                          2016
                        </option>
                        <option>
                          2017
                        </option>
                        <option>
                          2018
                        </option>
                        <option>
                          2019
                        </option>
                        <option>
                          2020
                        </option>
                        <option>
                          2021
                        </option>
                        <option>
                          2022
                        </option>
                        <option>
                          2023
                        </option>
                        <option>
                          2024
                        </option>
                        <option>
                          2025
                        </option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <input autocomplete="off" class="form-control" maxlength="3" pattern="\d{3}" placeholder="CVC" required="" title="Three digits on the back of your card" type="text">
                    </div>
                  </div>
                  <div class="row">
                    <label class="col-md-12">Amount</label>
                  </div>
                  <div class="form-inline">
                    <div class="input-group">
                      <div class="input-group-addon">
                        $
                      </div>
											<input class="form-control text-right" id="exampleInputAmount" placeholder="39" type="text">
                      <div class="input-group-addon">
                        .00
                      </div>
                    </div>
                  </div>
                  <hr>
                  <div class="form-group row">
                    <div class="col-md-6">
                      <button class="btn btn-default btn-lg btn-block" type="reset">Cancel</button>
                    </div>
                    <div class="col-md-6">
                      <button class="btn btn-success btn-lg btn-block" type="submit">Submit</button>
                    </div>
                  </div>
                </form>
              </div>
            </div><!-- /form card cc payment -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formUserEdit"></span>
            <hr class="my-5">
            <!-- form user info -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">User Information</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">First name</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="Jane">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Last name</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="Bishop">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Email</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="email" value="email@gmail.com">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Company</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Website</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="url" value="">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Time Zone</label>
                    <div class="col-lg-9">
                      <select class="form-control" id="user_time_zone" size="0">
                        <option value="Hawaii">
                          (GMT-10:00) Hawaii
                        </option>
                        <option value="Alaska">
                          (GMT-09:00) Alaska
                        </option>
                        <option value="Pacific Time (US &amp; Canada)">
                          (GMT-08:00) Pacific Time (US &amp; Canada)
                        </option>
                        <option value="Arizona">
                          (GMT-07:00) Arizona
                        </option>
                        <option value="Mountain Time (US &amp; Canada)">
                          (GMT-07:00) Mountain Time (US &amp; Canada)
                        </option>
                        <option selected="selected" value="Central Time (US &amp; Canada)">
                          (GMT-06:00) Central Time (US &amp; Canada)
                        </option>
                        <option value="Eastern Time (US &amp; Canada)">
                          (GMT-05:00) Eastern Time (US &amp; Canada)
                        </option>
                        <option value="Indiana (East)">
                          (GMT-05:00) Indiana (East)
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Username</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="janeuser">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Password</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="password" value="11111122333"> 
												<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label">Confirm</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="password" value="11111122333">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-lg-3 col-form-label form-control-label"></label>
                    <div class="col-lg-9">
                      <input class="btn btn-secondary" type="reset" value="Cancel"> 
											<input class="btn btn-primary" type="button" value="Save Changes">
                    </div>
                  </div>
                </form>
              </div>
            </div><!-- /form user info -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-6">
            <span class="anchor" id="formContact"></span>
            <hr class="my-5">
            <!-- form contact -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Contact</h3>
              </div>
              <div class="card-body">
                <form autocomplete="off" class="form" role="form">
                  <fieldset>
                    <label class="mb-0" for="name2">Name</label>
                    <div class="row mb-1">
                      <div class="col-lg-12">
                        <input class="form-control" id="name2" name="name2" required="" type="text">
                      </div>
                    </div>
										<label class="mb-0" for="email2">Email</label>
                    <div class="row mb-1">
                      <div class="col-lg-12">
                        <input class="form-control" id="email2" name="email2" required="" type="text">
                      </div>
                    </div>
										<label class="mb-0" for="message2">Message</label>
                    <div class="row mb-1">
                      <div class="col-lg-12">
                        <textarea class="form-control" id="message2" name="message2" required="" rows="6"></textarea>
                      </div>
                    </div>
										<button class="btn btn-secondary btn-lg float-right" type="submit">Send Message</button>
                  </fieldset>
                </form>
              </div>
            </div><!-- /form contact -->
          </div><!--/col-->
        </div>
        <div class="row justify-content-center">
          <div class="col-md-10 offset-md-1">
            <span class="anchor" id="formComplex"></span>
            <hr class="my-5">
            <!-- form complex example -->
            <div class="card card-outline-secondary">
              <div class="card-header">
                <h3 class="mb-0">Complex Form Example</h3>
              </div>
              <div class="card-body">
                <div class="row mt-4">
                  <div class="col-sm-5 pb-3">
                    <label for="exampleAccount">Account #</label> 
										<input class="form-control" id="exampleAccount" placeholder="XXXXXXXXXXXXXXXX" type="text">
                  </div>
                  <div class="col-sm-3 pb-3">
                    <label for="exampleCtrl">Control #</label> 
										<input class="form-control" id="exampleCtrl" placeholder="0000" type="text">
                  </div>
                  <div class="col-sm-4 pb-3">
                    <label for="exampleAmount">Amount</label>
                    <div class="input-group">
                      <div class="input-group-addon">
                        $
                      </div>
											<input class="form-control" id="exampleAmount" placeholder="Amount" type="number">
                    </div>
                  </div>
                  <div class="col-sm-6 pb-3">
                    <label for="exampleFirst">First Name</label> 
										<input class="form-control" id="exampleFirst" type="text">
                  </div>
                  <div class="col-sm-6 pb-3">
                    <label for="exampleLast">Last Name</label> 
										<input class="form-control" id="exampleLast" type="text">
                  </div>
                  <div class="col-sm-6 pb-3">
                    <label for="exampleCity">City</label> <input class="form-control" id="exampleCity" type="text">
                  </div>
                  <div class="col-sm-3 pb-3">
                    <label for="exampleSt">State</label> <select class="form-control custom-select" id="exampleSt">
                      <option class="text-white bg-warning">
                        Pick a state
                      </option>
                      <option value="AL">
                        Alabama
                      </option>
                      <option value="AK">
                        Alaska
                      </option>
                      <option value="AZ">
                        Arizona
                      </option>
                      <option value="AR">
                        Arkansas
                      </option>
                      <option value="CA">
                        California
                      </option>
                      <option value="CO">
                        Colorado
                      </option>
                      <option value="CT">
                        Connecticut
                      </option>
                      <option value="DE">
                        Delaware
                      </option>
                      <option value="DC">
                        District Of Columbia
                      </option>
                      <option value="FL">
                        Florida
                      </option>
                      <option value="GA">
                        Georgia
                      </option>
                      <option value="HI">
                        Hawaii
                      </option>
                      <option value="ID">
                        Idaho
                      </option>
                      <option value="IL">
                        Illinois
                      </option>
                      <option value="IN">
                        Indiana
                      </option>
                      <option value="IA">
                        Iowa
                      </option>
                      <option value="KS">
                        Kansas
                      </option>
                      <option value="KY">
                        Kentucky
                      </option>
                      <option value="LA">
                        Louisiana
                      </option>
                      <option value="ME">
                        Maine
                      </option>
                      <option value="MD">
                        Maryland
                      </option>
                      <option value="MA">
                        Massachusetts
                      </option>
                      <option value="MI">
                        Michigan
                      </option>
                      <option value="MN">
                        Minnesota
                      </option>
                      <option value="MS">
                        Mississippi
                      </option>
                      <option value="MO">
                        Missouri
                      </option>
                      <option value="MT">
                        Montana
                      </option>
                      <option value="NE">
                        Nebraska
                      </option>
                      <option value="NV">
                        Nevada
                      </option>
                      <option value="NH">
                        New Hampshire
                      </option>
                      <option value="NJ">
                        New Jersey
                      </option>
                      <option value="NM">
                        New Mexico
                      </option>
                      <option value="NY">
                        New York
                      </option>
                      <option value="NC">
                        North Carolina
                      </option>
                      <option value="ND">
                        North Dakota
                      </option>
                      <option value="OH">
                        Ohio
                      </option>
                      <option value="OK">
                        Oklahoma
                      </option>
                      <option value="OR">
                        Oregon
                      </option>
                      <option value="PA">
                        Pennsylvania
                      </option>
                      <option value="RI">
                        Rhode Island
                      </option>
                      <option value="SC">
                        South Carolina
                      </option>
                      <option value="SD">
                        South Dakota
                      </option>
                      <option value="TN">
                        Tennessee
                      </option>
                      <option value="TX">
                        Texas
                      </option>
                      <option value="UT">
                        Utah
                      </option>
                      <option value="VT">
                        Vermont
                      </option>
                      <option value="VA">
                        Virginia
                      </option>
                      <option value="WA">
                        Washington
                      </option>
                      <option value="WV">
                        West Virginia
                      </option>
                      <option value="WI">
                        Wisconsin
                      </option>
                      <option value="WY">
                        Wyoming
                      </option>
                    </select>
                  </div>
                  <div class="col-sm-3 pb-3">
                    <label for="exampleZip">Postal Code</label> 
										<input class="form-control" id="exampleZip" type="text">
                  </div>
                  <div class="col-md-6 pb-3">
                    <label for="exampleAccount">Preferred Color (radio buttons)</label>
                    <div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-secondary">
												<input autocomplete="off" checked id="blue" name="options" type="radio">
													Blue
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="red" name="options" type="radio">
													Red
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="green" name="options" type="radio">
													Green
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="yellow" name="options" type="radio">
													Yellow
											</label> 
											<label class="btn btn-secondary">
												<input autocomplete="off" id="black" name="options" type="radio">
													Black
											</label> 
											<label class="btn btn-secondary active">
												<input autocomplete="off" id="orange" name="options" type="radio"> 
													Orange
											</label>
                    </div>
                  </div>
                  <div class="col-md-6 pb-3">
                    <label for="exampleMessage">Message</label> 
                    <textarea class="form-control" id="complexExampleMessage" rows="3"></textarea> 
											<small class="text-muted">Add any notes here.</small>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="float-right">
                  <input class="btn btn-secondary" type="reset" value="Cancel"> 
									<input class="btn btn-primary" type="button" value="Send">
                </div>
              </div>
            </div><!--/card-->
          </div>
        </div><!--/row-->
      </div><!--/col-->
    </div><!--/row-->
  </div><!--/container-->


<!-- Scroll to Top -->
<a id="scroll-to-top" href="#" class="btn btn-primary btn-lg" role="button" title="Return to top of page" data-toggle="tooltip" data-placement="left"><i class="fa fa-arrow-up"></i></a>
<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
/* Scroll to Top */
$(document).ready(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $('#scroll-to-top').fadeIn();
    } else {
      $('#scroll-to-top').fadeOut();
    }
  });
  // scroll body to 0px on click
  $('#scroll-to-top').click(function () {
    $('#scroll-to-top').tooltip('hide');
    $('body,html').animate({
      scrollTop: 0 },
    800);
    return false;
  });

});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Forms:

Various Simple Bootstrap Forms

Bootstrap Login Form

Bootstrap Signup For

Bootstrap Payment Form