register_form.php 2.33 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>HDFC Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
*{  
  margin:0;
  padding:0;
}

body{
  
  background-color:#f0f0f0;
  font-family:helvetica;
}

#bg{
  position:relative;
  top:20px;
  height:800px;
  width:800px;
  background:url('https://i.imgur.com/3eP9Z4O.png') center no-repeat;
  background-size:cover;
  margin-left:auto;
  margin-right:auto; 
  border:#fff 15px solid;
}

.module{
  position:relative;
  top:15%;    
  height:70%;
  width:450px;
  margin-left:auto;
  margin-right:auto;
  border-radius:5px;
  background:RGBA(255,255,255,1);
    
  -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);        
  box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, .45);
  
}

.module ul{
  list-style-type:none;
  margin:0;

}

.form{
  float:left;
  height:86%;
  width:100%;
  box-sizing:border-box;
  padding:40px;
}

.textbox{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 2px solid;
  box-sizing:border-box;
  padding:10px;
  margin-bottom:30px;
}

.textbox:focus{
  outline:none;
   border:rgba(24,149,215,1) 2px solid;
   color:rgba(24,149,215,1);
}

.button{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 0px solid;
  box-sizing:border-box;
  padding:10px;
  margin-bottom:30px;
  background:#90c843;
  color:#FFF;
  font-weight:bold;
  font-size: 12pt;
  transition:background .4s;
  cursor:pointer;
}

.button:hover{
  background:#80b438;
  
}
</style>
</head>

<body>
<div id="bg">
  <div class="module">
    <br>
     <center><h3>Fill Form</h3><br></center>
    <form class="form" action="process.php" method="POST">
      <input type="text" placeholder="First Name" class="textbox" required name="fname" />
      <input type="text" name="lname" placeholder="Last Name" class="textbox" required/>
      <input type="text" maxlength="10"  pattern="[0-9]{10}" name="contact" placeholder="Contact Number" class="textbox" required/>
      <input type="text" maxlength="10"  pattern="[0-9]{10}" name="alt_contact" placeholder="Alternate Number" class="textbox" required/>
      <input type="email" name="email" placeholder="Email Address" class="textbox" required/>
      <input type="submit" value="submit" type="submit" class="button" id="submit">
    </form>

  </div>
</div>

</body>
</html>