RESPONSIVE FEEDBACK FORM - DOWNLOAD FULL CODE WITH VALIDATIONS
For live demo - here
Full code - HTML, CSS and Javascript can be found below. Bonus is, it has validations and a cool loader.
<!DOCTYPE html>
<html>
<head>
<title>RESPONSIVE FEEDBACK FORM </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
body {
margin: 0 auto;
background-color: black;
}
div.formContainer {
margin: 4em auto 4em auto;
width: 80%;
color: #FCE205;
border: 1px solid #FCE205;
border-radius: 2px;
}
div.heading {
margin: 0 auto 0 auto;
width: 100%;
padding: 1em 0 1em 0;
letter-spacing: 0.1em;
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #FCE205;
text-align: center;
background-color: #FCE205;
color: black;
}
div.description {
padding: 1em 0 1em 0;
width: 80%;
margin: 0 auto 0 auto;
text-align: center;
}
div.form {
margin: 0 auto 0 auto;
width: 100%;
}
div.form form {
margin: 0 auto 0 auto;
width: 80%;
}
div.form label {
display: block;
width: 80%;
margin: 1em auto 1em auto;
outline: none;
color: #FCE205;
font-weight: bolder;
letter-spacing: 0.1;
}
div.form input {
display: block;
width: 80%;
margin: 1em auto 1em auto;
outline: none;
color: #FCE205;
padding: 1.2em 0 1em 1.2em;
background-color: black;
border: 0.5px solid #FCE205;
}
div.form textarea {
display: block;
width: 80%;
margin: 1em auto 1em auto;
outline: none;
color: #FCE205;
padding: 1.2em 0 1em 1.2em;
background-color: black;
border: 0.5px solid #FCE205;
height: 8em;
resize: none;
}
div.form button {
outline: none;
margin: 2em auto 2em auto;
padding: 2em;
cursor: pointer;
border: none;
display: block;
width: 60%;
text-align: center;
border: 1px solid #FCE205;
}
div.form input:active,
div.form input:focus,
div.form select:active,
div.form select:focus,
div.form textarea:active,
div.form textarea:focus,
div.form button:active,
div.form button:hover {
box-shadow: 0 0 2px 2px white;
}
div.form button {
background-color: black;
color: #FCE205;
font-weight: bolder;
transition: all 0.2s linear;
}
@keyframes status {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
div.statusActive {
display: block;
width: 80%;
margin: 1em auto 1em auto;
padding: 1.2em 0 1em 1.2em;
background-color: #FCE205;
color: black;
text-align: center;
animation-name: status;
animation-duration: 0.3s;
transition: all 0.2s linear;
}
div.loadingActive {
width: 90%;
margin: 4em auto 4em auto;
grid-template-columns: 33.3% 33.3% 33.3%;
display: grid;
transition: all linear 0.2s;
}
div.loadingActive div {
padding: 0.5em;
background-color: #FCE205;
animation-name: rotatingDiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes rotatingDiv {
from {
transform: rotate(-180deg);
}
to {
transform: rotate(360deg);
}
}
@media only screen and (min-width: 1224px) {
div.formContainer {
width: 500px;
}
}
@media only screen and (min-width: 1824px) {
div.formContainer {
width: 500px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
div.formContainer {
width: 80%;
}
}
</style>
</head>
<body>
<div class="formContainer">
<div class="heading">
FEEDBACK FORM STYLE
</div>
<div class="description">
<p> This is a responsive form with some Good UI.</p>
</div>
<div class="form">
<form id="form">
<label for="name">Name</label>
<input name="name" type="text" id="name" />
<label for="email">Email</label>
<input name="email" type="email" id="email" />
<label for="designation">Designation</label>
<input name="designation" type="text" id="designation" />
<label for="feedback">Feedback</label>
<textarea name="feedback" id="feedback"></textarea>
<button type="submit">SUBMIT</button>
</form>
</div>
<div id="loading">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="status">
</div>
</div>
<script>
class Feedback {
constructor() {
this.formEle = document.getElementById("form");
this.emailEle = document.getElementById("email");
this.designationEle = document.getElementById("designation");
this.nameEle = document.getElementById("name");
this.feedbackEle = document.getElementById("feedback");
this.statusEle = document.getElementById("status");
this.loading = document.getElementById("loading");
}
setStatus(content) {
this.removeLoading();
this.statusEle.classList.add("statusActive");
this.statusEle.innerHTML = content;
}
removeStatus() {
this.statusEle.classList.remove("statusActive");
this.statusEle.innerHTML = ``;
}
addLoading() {
this.loading.classList.add("loadingActive");
}
removeLoading() {
this.loading.classList.remove("loadingActive");
}
isEmpty(value) {
return (value.trim().length == 0) ? true : false;
}
invalidLength(value, len) {
return (value.length > len) ? true : false;
}
validateEmail(email) {
let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
initialize() {
this.formEle.onsubmit = (e) => {
e.preventDefault();
this.removeStatus();
this.addLoading();
this.validate();
}
}
validate() {
let email = this.emailEle.value.trim();
let designation = this.designationEle.value.trim();
let feedback = this.feedbackEle.value.trim();
let name = this.nameEle.value.trim();
let hasErrors = false;
let errors = `<h>ERROR</h>`;
if (this.isEmpty(name)) {
errors = `${errors} <p> We need your name pal !!! </p>`;
hasErrors = true;
}
if (this.invalidLength(name, 59)) {
errors = `${errors} <p>Name cant exceed 60 characters</p>`;
hasErrors = true;
}
if (!this.validateEmail(email)) {
errors = `${errors} <p> Is that a valid email ? ? </p>`;
hasErrors = true;
}
if (this.isEmpty(email)) {
errors = `${errors} <p> Email can not be empty </p>`;
hasErrors = true;
}
if (this.invalidLength(email, 319)) {
errors = `${errors} <p>Email can not exceed 320 characters</p>`;
hasErrors = true;
}
if (this.isEmpty(designation)) {
errors = `${errors} <p> Designation cant be empty </p>`;
hasErrors = true;
}
if (this.invalidLength(designation, 59)) {
errors = `${errors} <p>Please fit your designation within 60 characters</p>`;
hasErrors = true;
}
if (this.isEmpty(feedback)) {
errors = `${errors} <p> Irony....!feedback cant be empty</p>`;
hasErrors = true;
}
if (this.invalidLength(feedback, 5999)) {
errors = `${errors} <p>Thats a long feedback,sorry feedback can not exceed 6000 characters</p>`;
hasErrors = true;
}
if (hasErrors) {
this.setStatus(errors);
} else {
let data = {
data: {
email: email,
designation: designation,
name: name,
feedback: feedback
}
}
// this.sendData(JSON.stringify(data));
}
}
sendData(jsonData) {
const url = "./php/AddFeedback.php";
let xhttp = new XMLHttpRequest();
let that = this;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText) {
that.setStatus("Thank you ! We got your feedback, we look forward to more from you.");
that.formEle.reset();
} else {
that.setStatus("Are you sure you entered valid data? Dont worry there might also be problem with our server. Why not give it another shot?");
}
}
};
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(`data=${jsonData}`);
}
}
const fb = new Feedback();
fb.initialize();
</script>
</body>
</html>As said earlier, this is a complete Ajax form with validations.
This will send Form Data to the server in JSON format with POST request, whose parameter name is data.
Before POST request, below object is stringified using JSON.stringify and then passed to POST data parameter in XMLHTTPRequest
let data = {
data: {
email: email,
designation: designation,
name: name,
feedback: feedback
}
}To use this form right away, uncomment this.sendData() in validate() and also change url in sendData()
For live demo - here
Bonus - Contact us ajax responsive from with both front end and back end code here
ALTERNATE TITLES