Enquiry Form Using html, css and javascript
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
Comments
Post a Comment