How to Create a User Registration Form in PHP using MySQL Database and Bootstrap?[With Source Code]
HTML CODE:
<title>Signup Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.3.3%2Fdist%2Fjs%2Fbootstrap.bundle.min.js%22%20integrity%3D%22sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20.regform%7B%0A%20%20%20%20%20%20%20%20background-color%3A%20%23ffeeee%3B%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<div class="container">
<form class="row g-3 regform" method="post">
<div class="bg-primary p-5 rounded-lg mb-3">
<h1 class="text-center text-light">Signup Form</h1>
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" name="pass" id="inputPassword4">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">First Name</label>
<input type="text" class="form-control" name="fname" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Last Name</label>
<input type="text" class="form-control" name="lname" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" name="address" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-md-4">
<label for="inputCity" class="form-label">Phone</label>
<input type="text" class="form-control" name="phone" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">Gender</label>
<select name="gender" id="inputState" class="form-select">
<option value="male" selected>MALE</option>
<option value="female">FEMALE</option>
<option value="other">OTHER</option>
</select>
</div>
<div class="col-md-4">
<label for="inputZip" class="form-label">DOB</label>
<input type="datetime-local" name="dob" class="form-control" id="inputZip">
</div>
<div class="col-12 mb-3">
<button type="submit" name="register" class="btn btn-primary">Register</button>
</div>
</form>
</div>
</body>
</html>
PHP CODE:
<?php
$conn=mysqli_connect("localhost","root","admin","phpregister");
if($conn){
echo "connection";
}else{
echo "connection error";
}
if(isset($_POST["register"])){
$email= trim($_POST["email"]);
$password= trim($_POST["pass"]);
$fname = trim($_POST["fname"]);
$lname = trim($_POST["lname"]);
$address = trim($_POST["address"]);
$phone= trim($_POST["phone"]);
$gender = trim($_POST["gender"]);
$dob = ($_POST["dob"]);
$insertQuery= "INSERT INTO phpregister VALUES(?,?,?,?,?,?,?,?)";
$stmt=mysqli_prepare($conn,$insertQuery);
mysqli_stmt_bind_param($stmt,'ssssssss',$email, $password,$fname,$lname,$address,$phone,$gender,$dob);
mysqli_stmt_execute($stmt);
if(mysqli_affected_rows($conn)> 0){
echo "<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%3Ealert('register%20successfully')%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />";
}else{
echo "<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D'text%2Fjavascript'%3Ealert('registration%20error')%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />";
}
}
?>
More: