Enquiry Form
In this blog we discuss how to create enquiry form using html, css and javascript
Here we create three file for designing a enquiry form one is index.html, another is style.css and last one is script.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>
Enquiry Form
</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<center>
<div class="query">
<h2>📝 Enquiry Form 📝</h2><br>
<div class="form">
<label>Enter Name</label>
<input type="text" name="name" id="n" required="required "/><br> <br>
<label>Contact No. </label>
<input type="number" name="contact" id="contact" required="required " id="cn"><br> <br>
<label>Email ID      </label>
<input type="email" name="email" required="required " id="eid"><br><br>
<label>Your Query  </label>
<textarea name="query" style="width:186px;" required="required" id="q"></textarea><br> <br>
<input type="submit" class="b1" id="btn1" value="Send" onclick="t1()">
</div>
</div>
</center>
</form>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background: #fec107;
padding: 0 10px;
}
.query
{
max-width: 500px;
width: 100%;
background: #fff;
margin: 100px auto;
padding: 20px;
border-radius:0 40px 0 40px;
}
.b1{
margin-left :150px;
background-color:blue;
font-size:15px;
width :60px;
height :30px;
border-radius:50px;
border:none;
color:white;
}
h2{
text-align:center;
}
script.js
function t1()
{
var a = (document.getElementById("n").value);
var b = (document.getElementById("cn").value);
var c = (document.getElementById("eid").value);
var d = (document.getElementById("q").value);
if(a=="")
{
alert("Please Enter Name ");
}
else if(b=="")
{
alert("Please Enter Contact Number ");
}
else if(c=="")
{
alert("Please Enter Email ID ");
}
else if(d=="")
{
alert("Please Enter Your Query ");
}
else
{
document.write("😎 Thank You For Your Feedback 😎");
}
}
Also learn -
Keyboard key design using html and css
comment 0 comments
more_vert