<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3 style="position:absolute;top:15%">
<i class="fa-face-smile"></i>
Upload your FeedBack form for us!!
</h3>
<div class="form-box">
<div class="textup">
It only takes two minutes!!
</div>
<br />
<form name="myForm" onsubmit="return( feedback());">
<label for="uname">
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>
<i class="fa-solid fa-face-smile"></i>
Do you satisfy with our service?
</label>
<div class="radio-group">
<input type="radio" id="yes"
name="satisfy" value="yes" checked>
<label for="yes">Yes</label>
<input type="radio" id="no"
name="satisfy" value="no">
<label for="no">No</label>
</div>
<label for="msg">
<i class="fa-solid fa-comments"
style="margin-right: 3px;"></i>
Write your Suggestions:
</label>
<textarea id="msg" name="msg"
rows="4" cols="10" required>
</textarea>
<button type="submit">
Submit
</button>
</form>
</div>
<div class="logoposition">
<img src="images/WhatsApp Image 2024-01-27 at 12.37.00_0f8d14e3.jpg" class="logo" />
</div>
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
background-color: #bde5d2;
font-family: 'Poppins', sans-serif;
background-repeat: no-repeat;
background-image: url('images/dodgeball-player-painted-vector.jpg');
padding: 0;
background-size: cover;
background-position: center;
}
.textup {
text-align: center;
color: rgb(11, 118, 11);
font-weight: 700;
}
i {
margin-right: 3px;
}
.form-box {
background-color: #fff;
box-shadow: 0 0 10px rgba(36, 67, 40, 0.8);
padding: 15px;
border-radius: 8px;
width: 500px;
margin: 0 auto; /* Center the form horizontally */
margin-top: 10%; /* Adjust the top margin as needed */
opacity: 0.7;
}
form {
max-width: 400px;
margin: 0 auto;
}
.radio-group {
display: flex;
margin-bottom: 16px;
}
input[type="radio"] {
margin-left: 8px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 17px;
color: green;
font-weight: 600;
}
input,
textarea {
width: 100%;
padding: 8px;
margin-bottom: 12px;
box-sizing: border-box;
border-radius: 10px;
}
button {
background-color: #368b44;
color: #fff;
padding: 10px;
border: none;
border-radius: 25px;
cursor: pointer;
width: 100%;
font-size: 15px;
transition: .2s linear;
opacity: 1 !important;
}
button:hover {
background-color: #0a6808;
border: none;
transform: translateY(-10px);
opacity: 1 !important;
}
.rounded {
flex: none;
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.logo {
object-fit: cover;
display: block;
/* Make sure the image fills the container width */
max-height: 200px;
min-height: 200px;
max-width: 200px;
border-radius: 50%;
overflow: hidden;
flex: none;
width: auto;
}
.logoposition {
right: 20px;
position: absolute;
top: 35px;
}
</style>
<script>
function feedback() {
//check for empty input
if (document.forms[0].uname.value == "") {
alert("Please fill in your name.");
document.forms[0].uname.focus();
return false;
}
if (document.forms[0].email.value == "") {
alert("Please provide your password within 8 to 16 characters.");
document.forms[0].email.focus();
return false;
}
if (document.forms[0].yes.checked == false)
if (document.forms[0].no.checked == false) {
alert("Please select your gender.");
return false;
} else if (document.forms[0].yes.checked == true)
if (document.forms[0].no.checked == true) {
return false;
}
if (document.forms[0].channel.value == "") {
alert("Please select from where you hear about us!");
document.forms[0].channel.focus();
return false;
}
alert("submited");
}
</script>
</body>
</html>
i cant popup the blockers, i am not sure whether the scripts is respondin. when I didn’t key in the name it shows the blocking from the itself but not the popup blocker. I do check whether there is any class name issue or any general problem but still cant find out what the problem is. I expect that when i not insert any value, the popup blocker should popup
