Showing posts with label Responsive Contact us form using HTML &CSS. Show all posts
Showing posts with label Responsive Contact us form using HTML &CSS. Show all posts

Sunday, October 22, 2023

Creating Sample Contact Us Form Using HTML

  

Creating Sample Contact Us Form Using HTML

           CONTACT  FORM


contact form


PROGRAM :CODE

CONTACT FROM

what is the contact form?

A page on a website that allows users to communicate with the site owner. The page has fields for filling in name, address and type of comment. On most blogger websites, email and mailing addresses are also included; however, the contact form provides an immediate, convenient way for users to ask the blogger website questions.


<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="
width=device-width, initial-scale=1">  

<link href ="https ://fonts.googleapis.com
/css?family =Raleway " rel= " stylesheet ">
<style>  
body{  
  font-family: Calibri, Helvetica, sans-serf;  
 
}  
.container {  
    padding: 50px;  
  background-color : skyblue ;  
}  
 
input[type=text], input[type=password],textarea {  
  width: 100%;  
  padding: 15px;  
  margin: 5px 0 22px 0;  
  display: inline-block;  
  border: none;  
  background: #f1f1f1;  
}  
input[type=text]:focus,input[type=password]
:focus {  
  background-color: orange;  
  outline: none;  
}  
 div {  
            padding: 10px 0;  
         }  
hr {  
  border: 1px solid #f1f1f1;  
  margin-bottom: 25px;  
}  
.registerbtn {  
  background-color: #4CAF50;  
  color: white;  
  padding: 16px 20px;  
  margin: 8px 0;  
  border: none;  
  cursor: pointer;  
  width: 100%;  
  opacity: 0.9;  
}  
.registerbtn:hover {  
  opacity: 1;  
}  

</style>  
</head>  
<body>  
<form>
</br>
</br>
<!--<marquee    bgcolor ="Red" >
Registertion Now </Marquee >-->
</br>
</br>
  <div class="container">  
  <center>  <h1>  Contact  Us </h1> </center>  
  <hr>  
  <label> Firstname </label>  
<input type="text" name="firstname"
placeholder= "Firstname" size="15" required />  
<label> Middlename: </label>  
<input type="text" name="product  name "
placeholder="Middlename" size="15" required />  
<label> Lastname: </label>    
<input type="text" name="lastname"
placeholder="Lastname" size="15"required />  
<div>  
<label>  
<div>  
<label>  
Gender :  
</label><br>  
<input type="radio" value="Male"
name="gender" checked > Male  
<input type="radio" value="Female"
name="gender"> Female  
<input type="radio" value="Other"
name="gender"> Other  
</div>  
<label>  
Phone :  
</label>  
<input type="text" name"phone"
placeholder=""  value="+91" size="2"/>  
<input type="text" name="phone" placeholder="
retype phone no." size="10"/ required>  
</br>

State   :  
<input type ="text " name = "state "
placeholder = "state ">
</br>
</br>

 <label for="email"><b>Email</b></label>  
 <input type="text" placeholder="Enter Email"
name="email" required>  
 
    <label for="psw"><b>Password</b></label>  
    <input type="password" placeholder=
"Enter Password" name="psw" required>  
 
    <label for="psw-repeat"><b>Re-type
Password</b></label>  
    <input type="password" placeholder=
"Retype Password" name="psw-repeat" required>  
    <button type="submit" class="registerbtn">
Submit </button>    
</form>  
</body>  
</html>  

VISIT LINK:

👍👍

how-to-create-registration-form