how to create a contact form with html and CSS


 

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 contact the website owner. This page contains fields for your name, address and language. On most blog sites, this includes email and postal addresses; however, the contact form provides a direct and easy way for users to ask questions on the blog site..


<!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>  

Related Post :-

👍👍

html button tag

css introduction

html color tag

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  ஃ   What Is CSS Text Color  ஃ   Syntax   ஃ   Purpose of Text Color  ஃ    Real world Use Cases  ஃ    What Is CSS Text Color  Example    ஃ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more