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




on No comments:
Labels:

Saturday, October 21, 2023

Creating Sample Feedback Form Using HTML

 

Creating Sample Feedback  Form Using HTML

FEEDBACK FORM


feedback form

                                           


Programe  : CODE

Feedback form

 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="
width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
content="ie=edge">
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com
/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" integrity="sha384
-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+
QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
 
  </<link rel="stylesheet" href="style.css">
<style >
*{
  box-sizing: border-box;
}

body{
 
  color:#485e74;
  line-height:1.6;
  font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
  padding:1em;
}

.container{
  max-width:1170px;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
}

ul{
  list-style: none;
  padding:0;
}

.brand{
  text-align: center;
}

.brand span{
  color:#fff;
}

.wrapper{
  box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}

.wrapper > *{
  padding: 1em;
}

.company-info{
  background:#c9e6ff;
}

.company-info h3, .company-info ul{
  text-align: center;
  margin:0 0 1rem 0;
}

.contact{
  background:#f9feff;
}

/* FORM STYLES */
.contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:20px;
}

.contact form label{
  display:block;
}

.contact form p{
  margin:0;
}

.contact form .full{
  grid-column: 1 / 3;
}

.contact form button, .contact
form input, .contact form textarea{
  width:100%;
  padding:1em;
  border:1px solid #c9e6ff;
}

.contact form button{
  background:#c9e6ff;
  border:0;
  text-transform: uppercase;
}

.contact form button:hover,.contact
form button:focus{
  background:#92bde7;
  color:#fff;
  outline:0;
  transition: background-color 2s ease-out;
}

.alert{
  text-align: center;
  padding:10px;
  background:#79c879;
  color:#fff;
  margin-bottom:10px;
  display:none;
}

/* LARGE SCREENS */
@media(min-width:700px){
  .wrapper{
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .wrapper > *{
    padding:2em;
  }
h{
color: pink;
}
  .company-info h3, .company-info ul, .brand{
    text-align: left;
  }
}
</style >
</head>
<body>
  <div class="container">
      <div class="wrapper">
      <div class="company-info">
        <h3>Macrame Art  website</h3>
        <ul>
                 <li><i class="
fa fa-phone"></i>  type the nunber</li>
          <li><i class="fa fa-envelope"></i>
type the user email for example;<br>"
createthewebsiteinhtmlcssjsbtinlowprice@gmail
.com"<br>message-the-email& informaton<br>
           to you website.busines-than
create you website </li>
        </ul>
      </div>
      <div class="contact">
        <h3>Feedback form</h3>
        <div class="alert">Your message
has been sent</div>
        <form id="contactForm">
          <p>
            <label>Name</label>
            <input type="text" name="name"
id="name" required>
          </p>
     
          <p>
            <label>Email Address</label>
            <input type="email" name="email"
id="email" required>
          </p>
     
          <p class="full">
            <label>Message</label>
            <textarea name="message" rows="5"
id="message"></textarea>
          </p>
          <p class="full">
            <button type="submit">Submit
</button>
          </p>
        </form>
      </div>
    </div>
  </div>

 
// Initialize Firebase (ADD YOUR OWN DATA)

firebase.initializeApp(config);

// Reference messages collection


// Listen for form submit
document.getElementById('contactForm')
.addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();

  // Get values
  var name = getInputVal('name');
  var email = getInputVal('email');
 var message = getInputVal('message');

  // Save message
  saveMessage(name,  email, message);

  // Show alert
  document.querySelector('.alert')
.style.display = 'block';

  // Hide alert after 3 seconds
  setTimeout(function(){
    document.querySelector('.alert')
.style.display = 'none';
  },3000);

  // Clear form
  document.getElementById('contactForm').reset();
}

// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(name,  email,  message){
  var newMessageRef = messagesRef.push();
  newMessageRef.set({
    name: name,
   
    email:email,
   
    message:message
  });
}
</script >
</body>
</html>



// click visite the blogger


👍👍





on No comments:
Labels:

Monday, September 4, 2023

Creating Sample Student information Form Using HTML



Creating Sample Student  information Form Using HTML

Basic html FORM



How to create registration form in html and css 

form html css




Program Form        

<html>  
<head>
<title>form create using html and css </title>
<style>
 input[type=email]
{
color:green;
font-family::courier new;
}
input[type=password]
{
    color:red;
  }
 input[type=submit]
  {
      color:white;
     background-color:orange;
   }
input[type=submit]:hover
     {
       background-color:red;
       color:purple;
       }
body
      {
     background-color:#7FFFD4;
     border: 5px solid plum;
     text-align:center;
     }
</style>
</head>
 <body>
<form>
<label for="fn">First Name:</label><br>
<input type="text" id="fn" name="fn" required><br><br>
<label for="ln">Last Name:</label><br>
<input type="text" id="ln" name="ln" required><br><br>
<label for="mn">Middle Name</label><br>
<input type="text" id="mn" name="mn" required><br><br>
<input type="date" name="date" id="date" placeholder="date"><br><br>
<input type="email" name="email" placeholder="user email"><br><br>
<input type="password" id="password" name="password" placeholder="user  password"><br><br>
<textarea  name="comment" cols="30" row="40">user comment</textarea>

<h3>cource</h3>
<select>
<option disabled selected>courser</option>
<option>c</option>
<option>c++</option>
<option>java</option>
<option>data structure</option>
<option>digital marketing</option>
</select><br><br>

<h3>Gender</h3>
<input type="radio" value="f" name="gender">
<label for="f">Female</label><br>
<input type="radio" value="m" name="gender">
<label for="m">Man</label><br>
<input type="radio" value="o" name="gender">
<label for="f">other</label><br><br>
<input type="submit" value="login">
</form>
</body>
</html>

Visit Link 

inline-css.html

on No comments:
Labels:
Subscribe to: Posts (Atom)