"Signup form"
Bootstrap 4.1.1 Snippet by dipendra

Post to Facebook Tweet this

<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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <body> <div class="container"> <div class="col-md-6 mx-auto text-center"> <div class="header-title"> <h1 class="wv-heading--title"> Check out — it’s free! </h1> <h2 class="wv-heading--subtitle"> Lorem ipsum dolor sit amet! Neque porro quisquam est qui do dolor amet, adipisci velit... </h2> </div> </div> <div class="row"> <div class="col-md-4 mx-auto"> <div class="myform form "> <form action="" method="post" name="login"> <div class="form-group"> <input type="text" name="name" class="form-control my-input" id="name" placeholder="Name"> </div> <div class="form-group"> <input type="email" name="email" class="form-control my-input" id="email" placeholder="Email"> </div> <div class="form-group"> <input type="number" min="0" name="phone" id="phone" class="form-control my-input" placeholder="Phone"> </div> <div class="text-center "> <button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button> </div> <div class="col-md-12 "> <div class="login-or"> <hr class="hr-or"> <span class="span-or">or</span> </div> </div> <div class="form-group"> <a class="btn btn-block g-button" href="#"> <i class="fa fa-google"></i> Sign up with Google </a> </div> <p class="small mt-3">By signing up, you are indicating that you have read and agree to the <a href="#" class="ps-hero__content__link">Terms of Use</a> and <a href="#">Privacy Policy</a>. </p> </form> </div> </div> </div> </div> </body>
.send-button{ background: #54C7C3; width:100%; font-weight: 600; color:#fff; padding: 8px 25px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .g-button{ color: #fff !important; border: 1px solid #EA4335; background: #ea4335 !important; width:100%; font-weight: 600; color:#fff; padding: 8px 25px; } .my-input{ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); cursor: text; padding: 8px 10px; transition: border .1s linear; } .header-title{ margin: 5rem 0; } h1{ font-size: 31px; line-height: 40px; font-weight: 600; color:#4c5357; } h2{ color: #5e8396; font-size: 21px; line-height: 32px; font-weight: 400; } .login-or { position: relative; color: #aaa; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; } .span-or { display: block; position: absolute; left: 50%; top: -2px; margin-left: -25px; background-color: #fff; width: 50px; text-align: center; } .hr-or { height: 1px; margin-top: 0px !important; margin-bottom: 0px !important; } @media screen and (max-width:480px){ h1{ font-size: 26px; } h2{ font-size: 20px; } }

Related: See More

Datepicker
Contact Form
login-form
School Form

Questions / Comments: