Monday, June 24, 2024

how to create Feedback form

Feedback Form design template


 How to Create Feedback Form using  html and CSS

👇ஃ Create a  Feedback Form with source codeஃ

Source Code 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content=
"width=device-width,initial-scale=1.0">
    <title>Responsive Form Card</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax
/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="index.css">
<style>
    /*style.css */
@import url(
'https://fonts.googleapis.com/
css2?family=Poppins&display=swap');

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    height: 60vh;
    background-color: ;
    font-family: 'Poppins', sans-serif;

}

.textup {
    text-align: center;
    color: rgb(11, 118, 11);
    font-weight: 700;
}

i {
    margin-right: 3px;
}

.form-box {
    background-color: ;
    box-shadow: 0 0 10px rgba(36, 67, 40, 0.8);
    padding: 15px;
    border-radius: 8px;
    width: 500px;
}

form {
    max-width: 400px;
    margin: 0 auto;
}

 

input[type="radio"] {
    margin-right: 8px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    color: #000000;
    font-weight: 600;
}

input,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
    border-radius: 10px;

}

button {
    background-color:#6495ED;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    font-size: 15px;
    transition: .2s linear;
}

button:hover {
    background-color: #FA8072;
    border: none;
    transform: translateY(-10px);
}



    </style>
</head>

<body>
     <!-- end contact section -->
 
  <!-- footer section start -->

  <?php include 'navigationbar.php';?>

<!-- footer  section Start --><br></br>
     
    <div class="form-box">
       
        <div class="textup">
             
        </div>
<center> <h1><b>Feedback Form</b></h1>
</center> <br><br>
        <form>
           
           <label for="uname">
          <i class="fa fa-solid fa-user"></i>
                Name
            </label>
            <input type="text" id="uname"
                name="uname" required>

            <label for="email">
           <i class="fa fa-solid fa-envelope">
</i>
                Email Address
            </label>
            <input type="email" id="email"
                name="email" required>

            <label for="phone">
          <i class="fa-solid fa-phone"></i>
                Phone No
            </label>
            <input type="tel" id="phone"
                name="phone" required>
            <label for="msg">
            <i class="fa-solid fa-comments"
              style="margin-right: 3px;"></i>
                Write your Feedback:
            </label>
            <textarea id="msg" name="msg"
                rows="4" cols="10" required>
            </textarea><br> <br>
            <button type="submit">
                Submit
            </button>
        </form>
    </div>
   
</body>

</html>


How to Create Feedback Form using  html and CSS

Feedback Form design template
Related Post :-
on No comments:
Labels: ,

How to create a Navigation bar

 
Navigation bar design template

How to Create Navigation bar using  html and CSS, JS

👇ஃ Create a  Navigation bar with source codeஃ

Source Code 

<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width,
initial-scale=1.0">
    <title>User Login</title>
    <link rel="stylesheet"
href="css/bootstrap.css">
  <style>
.dropbtn {
  background-color:#0096FF;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: pink;
  min-width: 160px;
  overflow: auto;
  box-shadow:  rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 16px 12px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
    </style>
</head>
<div class="bg-white shadow container mt-5 p-3
text-center mx-auto">
                <a href="home.php" class="btn
btn-primary">
                   Home
                </a>
                <body style="background-color:
white;">


<div class="dropdown">
  <button onclick="myFunction()"
class="dropbtn btn btn-primary">
Dress</button>
  <div id="myDropdown"
class="dropdown-content">
    <a href="product1.php">Women Lehenga Choli
</a>
    <a href="#product2.php">Sharara Suit</a>
    <a href="product3.php">Anarkali  Suit</a>
  </div>
</div>
                <a href="About.php"
class="btn btn-primary">
                    About us
                </a>
<a href="contact.php" class="btn btn-primary">
                    Contact Us
                </a>

                <a href="feedback.php"
class="btn btn-primary">
                    Feedback
                </a>
                <a href="login.php"
class="btn btn-primary">
                    Login
                </a>
        </div>
        <script>

function myFunction() {
  document.getElementById("myDropdown").
classList.toggle("show");
}

// Close the dropdown if the user clicks
outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.
getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>    
 </html>

 How to Create Navigation bar using  html and CSS, JS

OutPut :- 

navigation bar

on No comments:
Labels:

How to create a Order Form

 

     

 

  How to Create Order form using  html and CSS, JS


 ðŸ‘‡à®ƒ Create a  Order form with source codeஃ

Source Code 

<!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>Order Form</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="
https://cdnjs.cloudflare.com/ajax/libs/animate.
css/3.5.2/animate.css" />
  <link rel="stylesheet" href="style6.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:#BC8F8F;
}

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

.contact{
  background:#99B1E7;
}

/* 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:#F5DEB3;
  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:#99B1E7;
  color:#fff;
  margin-bottom:10px;
  display:none;
}

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

  .wrapper > *{
    padding:2em;
  }

  .company-info h3, .company-info ul, .brand{
    text-align: left;
  }
}
  </style>
</head>
<body>
  <div class="container">
    <h1 class="brand"><span>Shree Saree shop
<span></h1>
    <div class="wrapper">
      <div class="company-info">
        <h3>company owner Name </h3>
        <ul>
          <li><i class="fa fa-road"></i>
xyz@gmail.com  <li>
<i class="fa fa-phone"></i> +91  776882903</li>
        </ul>
      </div>
      <div class="contact">
        <h3><center>Order Form</center></h3>
        <div class="alert">Your message has
been sent</div>
        <form id="contactForm">
          <p>
            <label>fullName</label>
            <input type="text" name="fullname"
id="fullname" required>
          </p>
          <p>
            <label>email id</label>
            <input type="text" name="email id"
id="email id">
          </p>
          <p>
            <label>Phone no</label>
            <input type="text" name="Phone no"
id="Phone no" required>
          </p>
          <p>
            <label>Address</label>
            <input type="text" name="Address"
id="Address">
          </p>
          <p class="full">
            <label>city</label>
             <input type="text" name="city"
id="city">
          </p>

           <p class="full">
            <label>Postal code</label>
            <input type="text" name="
Postal code" id="Postal code">
          </p>

          <p class="full">
        <button type="submit">Submit</button>
          </p>
        </form>
      </div>
    </div>
  </div>

  <script src="https://www.gstatic.com/
firebasejs/4.3.0/firebase.js"></script>
  <script src="db4.js"></script>
</body>
</html>

  How to create Order form using  html and CSS, JS

Output :-

order form


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