In your website you need a contact form, so that your clients are able to contact you. You can create different style form you per your desire. I had attached some of the sample below.
Sample:1
This is a basic sample without any CSS. Their is no any background color and design. It is very useful to understand for beginners.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Sample</title>
</head>
<body>
<div><h2>This is a sample of contact form</h2></div>
<form>
<div><input type="text" name="fname">First Name</div> <br>
<div><input type="text" name="lname">last Name</div><br>
<div><input type="date" name="dob">Date of birth</div> <br>
<div><input type="number" name="mobile">mobile </div> <br>
<div><input type="email" name="email">email </div><br>
<div><input type="password" name="password">password </div> <br>
<div><button type="submit">Submit</button></div>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Sample</title>
</head>
<body>
<div><h2>This is a sample of contact form</h2></div>
<form>
<div><input type="text" name="fname">First Name</div> <br>
<div><input type="text" name="lname">last Name</div><br>
<div><input type="date" name="dob">Date of birth</div> <br>
<div><input type="number" name="mobile">mobile </div> <br>
<div><input type="email" name="email">email </div><br>
<div><input type="password" name="password">password </div> <br>
<div><button type="submit">Submit</button></div>
</form>
</body>
</html>
Table Preview
Sample:2
In this type of table you can set your form background color, text inside the text field (placeholder), design of the Submit button.
HTML Code:
<!DOCTYPE html>
<html>
<style>
.container {
background-color: lightblue;
padding: 6px 40px 40px 40px;
border: 2px solid;
border-radius: 8px;
width: 30%;
}
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: 2px;
border-radius: 4px;
cursor: pointer;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Sample</title>
</head>
<body>
<div class="container" >
<div ><h2>This is a sample of contact form</h2></div>
<form>
<div><input type="text" name="fname" required placeholder="Enter your first name.. "></div> <br>
<div><input type="text" name="lname" required placeholder="Enter your last name"></div><br>
<div><input type="date" name="dob" required placeholder="Enter your date of birth "></div> <br>
<div><input type="number" name="mobile" required placeholder="Enter your mobile number"> </div> <br>
<div><input type="email" name="email" required placeholder="Enter your email address"> </div><br>
<div><input type="password" name="password" required placeholder="Enter your password"> </div> <br>
<div><input type="submit" value="submit"></div>
</form>
</div>
</body>
</html>
<html>
<style>
.container {
background-color: lightblue;
padding: 6px 40px 40px 40px;
border: 2px solid;
border-radius: 8px;
width: 30%;
}
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: 2px;
border-radius: 4px;
cursor: pointer;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Sample</title>
</head>
<body>
<div class="container" >
<div ><h2>This is a sample of contact form</h2></div>
<form>
<div><input type="text" name="fname" required placeholder="Enter your first name.. "></div> <br>
<div><input type="text" name="lname" required placeholder="Enter your last name"></div><br>
<div><input type="date" name="dob" required placeholder="Enter your date of birth "></div> <br>
<div><input type="number" name="mobile" required placeholder="Enter your mobile number"> </div> <br>
<div><input type="email" name="email" required placeholder="Enter your email address"> </div><br>
<div><input type="password" name="password" required placeholder="Enter your password"> </div> <br>
<div><input type="submit" value="submit"></div>
</form>
</div>
</body>
</html>
Table Preview
0 Comments