This is just an example and you can take the codes and try to create a better form
You can also add more questions like country, city pin code, etc depending on how you want the form to look like.
The HTML coding;
<body>
<h1>connection form</h1>
<div id="form_reg">
<!-- <form action="data.php" id="contact-form" target="_blank"
method="post" enctype="application/x-www-form-urlencoded"></form> -->
<form NAME="frmContact" METHOD="post" class="form_class"
ACTION="data.php" target="_blank">
<p>
<label for="Name">First Name: </label>
<input type="text" name="txtName" id="txtName" required>
</p>
<p>
<label for="Name">Last Name: </label>
<input type="text" name="txtName" id="txtName" required>
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="txtEmail" id="txtEmail" required>
</p>
<p>
<label for="phone">Phone:</label>
<input type="text" name="txtPhone" id="txtPhone" required>
</p>
<p>
<label for="Name">Password: </label>
<input type="password" name="password" id="txtName" required>
</p>
<label for="Name">conferm password: </label>
<input type="password" name="password" id="txtName" required>
<br>
<p>
<label for="Name">Gender: </label><br>
<input type="radio" name="gender" value="male" checked/>male<br />
<input type="radio" name="gender" value="female" />female<br/>
<input type="radio" name="gender" value="other" />other<br />
The CSS coding;
.container {
max-width: 1350px;
width: 100%;
margin: 50px;
height: auto;
display: block;
}
body {
color: #8A2BE2;
font-size: 20px;
font-family: Verdana, Arial, Helvetica, monospace;
background-color: #F0E8A0;
text-align: center;
}
h2 {
text-align: center;
}
.form_group {
padding: 10px;
;
display: block;
}
label {
float: left;
padding-right: 50px;
line-height: 10%;
display: block;
width: 208px;
}
.skills {
text-decoration: none;
}
.submit {
padding: 14px 20px;
background-color: #0caf0c;
font-size: 17px;
}
