Feedback Form

 
<html>
<head>
 <title>Feedback</title>
 <style>
 *, *:before, *:after {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
body {
font-size: 12px;
 }
body, button, input {
 font-family: 'Montserrat', sans-serif;
 font-weight: 700;
 letter-spacing: 1.4px;
 }
.background {
 display: flex;
 min-height: 100vh;
 }
.container {
 flex: 0 1 700px;
 margin: auto;
 padding: 10px;
 }
.screen {
 position: relative;
 background: teal;
 border-radius: 15px;
 }
.screen:after {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 20px;
 right: 20px;
 bottom: 0;
 border-radius: 15px;
 box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
 z-index: -1;
 }
.screen-header {
 display: flex;
 align-items: center;
 padding: 10px 20px;
 background: darkslategray;
 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
 }
.screen-header-left {
 margin-right: auto;
 }
.screen-header-button {
 display: inline-block;
 width: 8px;
 height: 8px;
 margin-right: 3px;
 border-radius: 8px;
 background: white;
 }
.screen-header-button.close {
 background: #ed1c6f;
 }
.screen-header-button.maximize {
 background: #e8e925;
 }
.screen-header-button.minimize {
 background: #74c54f;
 }
.screen-header-right {
 display: flex;
 }
.screen-header-ellipsis {
 width: 3px;
 height: 3px;
 margin-left: 2px;
 border-radius: 8px;
 background: #999;
 }
.screen-body {
 display: flex;
 }
.screen-body-item {
 flex: 1;
 padding: 50px;
 }
.screen-body-item.left {
 display: flex;
 flex-direction: column;
 }
.app-title {
 display: flex;
 flex-direction: column;
 position: relative;
 color: papayawhip;
 font-size: 26px;
 }
.app-title:after {
 content: '';
 display: block;
 position: absolute;
 left: 0;
 bottom: -10px;
 width: 25px;
 height: 4px;
 background: papayawhip;
 }
.app-contact {
 margin-top: auto;
 font-size: 8px;
 color: papayawhip;
 }
.app-form-group {
 margin-bottom: 15px;
 }
.app-form-group.message {
 margin-top: 40px;
 }
.app-form-group.buttons {
 margin-bottom: 0;
 text-align: right;
 }
.app-form-control {
 width: 100%;
 padding: 10px 0;
 background: none;
 border: none;
 border-bottom: 1px solid papayawhip;
 color: papayawhip;
 font-size: 14px;
 outline: none;
 transition: border-color .2s;
 }
.app-form-control::placeholder {
 color: lightgray;
 }
.app-form-control:focus {
 border-bottom-color: lightgray;
 }
.app-form-button {
 background: none;
 border: none;
 color: papayawhip;
 font-size: 14px;
 cursor: pointer;
 outline: none;
 }
.app-form-button:hover {
 color: whitesmoke;
 }
.credits {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 20px;
 color: #ffa4bd;
 font-family: 'Roboto Condensed', sans-serif;
 font-size: 16px;
 font-weight: normal;
 }
.credits-link {
 display: flex;
 align-items: center;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 }
.dribbble {
 width: 20px;
 height: 20px;
 margin: 0 5px;
 }
@media screen and (max-width: 520px) {
 .screen-body {
 flex-direction: column;
 }
.screen-body-item.left {
 margin-bottom: 30px;
 }
.app-title {
 flex-direction: row;
 }
.app-title span {
 margin-right: 12px;
 }
.app-title:after {
 display: none;
 }
 }
@media screen and (max-width: 600px) {
 .screen-body {
 padding: 40px;
 }
.screen-body-item {
 padding: 0;
 }
 }
 </style>
</head>
<body>
 <div class="background">
 <div class="container">
 <div class="screen">
 <div class="screen-header">
 <div class="screen-header-left">
 <div class="screen-header-button close"></div>
 <div class="screen-header-button maximize"></div>
 <div class="screen-header-button minimize"></div>
 </div>
 <div class="screen-header-right">
 <div class="screen-header-ellipsis"></div>
 <div class="screen-header-ellipsis"></div>
 <div class="screen-header-ellipsis"></div>
 </div>
 </div>
 <div class="screen-body">
 <div class="screen-body-item left">
 <div class="app-title">
 <span>CONTACT US</span>
 </div>
 <div class="app-contact">CONTACT INFO : +91 956 153 4767</div>
 </div>
 <div class="screen-body-item">
 <div class="app-form">
 <div class="app-form-group">
 <input id="txtName" class="app-form-control" placeholder="NAME">
 </div>
 <div class="app-form-group">
 <input id="txtEmail" class="app-form-control" placeholder="EMAIL">
 </div>
 <div class="app-form-group">
 <input id="txtNumber" class="app-form-control" placeholder="CONTACT NUMBER">
 </div>
 <div class="app-form-group message">
 <input id="txtMessage" class="app-form-control" placeholder="MESSAGE">
 </div>
 <div class="app-form-group buttons">
 <button id="btnCancel" class="app-form-button">CANCEL</button>
 <button id="btnSend"class="app-form-button">SEND</button>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>
 </div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
 $(document).ready(function(){
 $('#btnCancel').click(function(){
 $('input').val('');
 });
$('#btnSend').click(function(){
 var username = $('#txtName').val();
 var useremail = $('#txtEmail').val();
 var usernumber = $('#txtNumber').val();
 var usermessage = $('#txtMessage').val();
Email.send({
 Host : "smtp.gmail.com",
 From : "youremail@gmail.com",
 Username : "youremail@gmail.com",
 Password : "pass@123",
 To : 'your@email.com',
 Subject : "Feedback from " + username,
 Body : "Name : " + username + "<br/>" + "Email : " + useremail + "<br/>" + "Contact Number : " + usernumber + "<br/>" + "Message : " + usermessage
 }).then(
 message => {
 if(message == "OK"){
 alert('Your feedback sent successfully.');
 $('input').val('');
 }
 else{
 alert('Failed to send your feedback. \n\nError: ' + message)
 }
 }
 );
 });
 });
 </script>
</body>
</html>



Subscribe to: Posts (Atom)