Skip to content

Commit 6ed58cc

Browse files
sampadatiwari30sampadatiwari30
authored
Merge pull request #1925 from isimarjitsingh/main
UI IMPROVEMENT OF FEEDBACK FORM #1838
2 parents 099d5d7 + 2173507 commit 6ed58cc

File tree

1 file changed

+158
-40
lines changed

1 file changed

+158
-40
lines changed

‎index.html‎

Lines changed: 158 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2215,49 +2215,167 @@ <h3 class="title" style="color: #2f6be5;"><span></span> Blog Posts</h3>
22152215
</head>
22162216

22172217
<body>
2218-
<div class="form-section">
2219-
<form class="feedbackform" id="feedback-form">
2220-
<div class="form-group">
2221-
<div class="section-title text-center">
2222-
<h2 class="form-heading">We Value Your Feedback</h2>
2223-
<p>Your input helps us to improve and provide better services. Please fill out the form to let us know your
2224-
thoughts.</p>
2218+
<div class="feedback-section">
2219+
<form class="feedback-form" id="feedback-form">
2220+
<div class="form-group">
2221+
<div class="section-heading text-center">
2222+
<h2 class="form-title">We Value Your Feedback</h2>
2223+
<p>Your input helps us to improve and provide better services. Please fill out the form to let us know your thoughts.</p>
2224+
</div>
2225+
<label class="form-label" for="name">Name:</label>
2226+
<input class="input-field" type="text" id="name" name="name" required>
22252227
</div>
2226-
<label class="form-label" for="name">Name:</label>
2227-
<input class="form-input" type="text" id="name" name="name" required>
2228-
</div>
2229-
<div class="form-group">
2230-
<label class="form-label" for="email">Email:</label>
2231-
<input class="form-input" placeholder="Enter your email" type="email" id="email" name="email" required>
2232-
</div>
2233-
<div class="form-group">
2234-
<label class="form-label">Rating:</label>
2235-
<div id="emoji-description" class="emoji-description">Select an option</div>
2236-
</div>
2237-
<div class="emojis">
2238-
<input class="form-input" type="radio" id="emoji1" name="rating" value="1">
2239-
<label class="form-label" for="emoji1">&#128577;</label> <!-- Very Bad -->
2240-
<input class="form-input" type="radio" id="emoji2" name="rating" value="2">
2241-
<label class="form-label" for="emoji2">&#128542;</label> <!-- Bad -->
2242-
<input class="form-input" type="radio" id="emoji3" name="rating" value="3">
2243-
<label class="form-label" for="emoji3">&#128528;</label> <!-- Neutral -->
2244-
<input class="form-input" type="radio" id="emoji4" name="rating" value="4">
2245-
<label class="form-label" for="emoji4">&#128522;</label> <!-- Good -->
2246-
<input class="form-input" type="radio" id="emoji5" name="rating" value="5">
2247-
<label class="form-label" for="emoji5">&#128515;</label> <!-- Excellent -->
2248-
</div>
2249-
<div class="form-group">
2250-
<label class="form-label" for="comments">Comments:</label>
2251-
<textarea class="form-textarea" placeholder="Enter your comments" id="comments" name="comments" rows="4"
2252-
required></textarea>
2253-
</div>
2254-
<div class="form-group">
22552228
<div class="form-group">
2256-
<button class="form-button" id="feed-submit" type="submit">Submit</button>
2229+
<label class="form-label" for="email">Email:</label>
2230+
<input class="input-field" placeholder="Enter your email" type="email" id="email" name="email" required>
2231+
</div>
2232+
<div class="form-group">
2233+
<label class="form-label">Rating:</label>
2234+
<div id="emoji-description" class="emoji-text">Select an option</div>
2235+
</div>
2236+
<div class="rating-emojis">
2237+
<input class="rating-input" type="radio" id="emoji1" name="rating" value="1">
2238+
<label class="emoji-label" for="emoji1">&#128577;</label> <!-- Very Bad -->
2239+
<input class="rating-input" type="radio" id="emoji2" name="rating" value="2">
2240+
<label class="emoji-label" for="emoji2">&#128542;</label> <!-- Bad -->
2241+
<input class="rating-input" type="radio" id="emoji3" name="rating" value="3">
2242+
<label class="emoji-label" for="emoji3">&#128528;</label> <!-- Neutral -->
2243+
<input class="rating-input" type="radio" id="emoji4" name="rating" value="4">
2244+
<label class="emoji-label" for="emoji4">&#128522;</label> <!-- Good -->
2245+
<input class="rating-input" type="radio" id="emoji5" name="rating" value="5">
2246+
<label class="emoji-label" for="emoji5">&#128515;</label> <!-- Excellent -->
2247+
</div>
2248+
<div class="form-group">
2249+
<label class="form-label" for="comments">Comments:</label>
2250+
<textarea class="comments-field" placeholder="Enter your comments" id="comments" name="comments" rows="4" required></textarea>
2251+
</div>
2252+
<div class="form-group">
2253+
<div class="submit-group">
2254+
<button class="submit-button" id="submit-feedback" type="submit">Submit</button>
2255+
</div>
22572256
</div>
2258-
</div>
22592257
</form>
2260-
</div>
2258+
</div>
2259+
2260+
<style>
2261+
/* Styling the parent container with interactive background color and black border */
2262+
.feedback-section {
2263+
background: linear-gradient(135deg, #182848, #4b6cb7);
2264+
padding: 40px;
2265+
margin: 50px auto;
2266+
border-radius: 10px;
2267+
max-width: 700px;
2268+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2269+
border: 5px solid black; /* Added black border */
2270+
transition: background 0.3s ease-in-out;
2271+
}
2272+
2273+
.feedback-section:hover {
2274+
background: linear-gradient(135deg, #4b6cb7, #182848); /* Reverse the gradient on hover */
2275+
}
2276+
2277+
/* Styling the section title */
2278+
.section-heading h2 {
2279+
color: #333;
2280+
font-size: 2.5rem;
2281+
text-align: center;
2282+
margin-bottom: 10px;
2283+
}
2284+
2285+
/* Styling the description text */
2286+
.section-heading p {
2287+
color: #555;
2288+
font-size: 1rem;
2289+
text-align: center;
2290+
margin-bottom: 30px;
2291+
}
2292+
2293+
/* Input fields styling */
2294+
.input-field, .comments-field {
2295+
2296+
width: 100%;
2297+
padding: 12px;
2298+
border-radius: 5px;
2299+
border: 1px solid #ddd;
2300+
font-size: 1rem;
2301+
margin-bottom: 20px;
2302+
background-color: #f9f9f9;
2303+
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
2304+
}
2305+
2306+
/* Focus effects for input fields */
2307+
.input-field:focus, .comments-field:focus {
2308+
background-color: #fff5e1;
2309+
outline: none;
2310+
border-color: #ff8c42;
2311+
box-shadow: 0 0 5px rgba(255, 140, 66, 0.5);
2312+
}
2313+
2314+
/* Emoji feedback buttons */
2315+
.rating-emojis {
2316+
display: flex;
2317+
justify-content: space-around;
2318+
margin-bottom: 20px;
2319+
}
2320+
2321+
/* Hide the radio button dots */
2322+
.rating-input {
2323+
display: none;
2324+
}
2325+
2326+
.emoji-label {
2327+
font-size: 2.5rem;
2328+
cursor: pointer;
2329+
padding: 15px;
2330+
border-radius: 8px;
2331+
background-color: #141212;
2332+
transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
2333+
}
2334+
2335+
/* Hover effect for emoji buttons */
2336+
.emoji-label:hover {
2337+
background-color: #ffe4b3; /* Background color on hover */
2338+
transform: scale(1.1); /* Slight scale on hover */
2339+
}
2340+
2341+
/* Active (clicked) state for emoji buttons */
2342+
.emoji-label:active {
2343+
background-color: #ffda79;
2344+
transform: scale(1.15); /* A bit larger when clicked */
2345+
}
2346+
2347+
/* Styling the submit button */
2348+
.submit-button {
2349+
width: 100%;
2350+
padding: 12px;
2351+
background-color: #ff8c42;
2352+
color: white;
2353+
font-size: 1.2rem;
2354+
border: none;
2355+
border-radius: 5px;
2356+
cursor: pointer;
2357+
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
2358+
}
2359+
2360+
/* Hover effect for the submit button */
2361+
.submit-button:hover {
2362+
background-color: #e67e22;
2363+
transform: scale(1.05); /* Slight scale on hover */
2364+
}
2365+
2366+
.submit-button:active {
2367+
background-color: #d35400; /* Darker color on click */
2368+
transform: scale(1.03);
2369+
}
2370+
2371+
/* Background change on form focus */
2372+
.feedback-section:focus-within {
2373+
background: linear-gradient(135deg, #fff3e1, #fbb387); /* Subtle background shift when form is focused */
2374+
}
2375+
2376+
</style>
2377+
2378+
22612379
<div class="modal" id="successModal">
22622380
<div class="modal-content">
22632381
<span class="modal-close" id="closeSuccessModal">✖</span>
@@ -2709,4 +2827,4 @@ <h4 class="title custom-margin">Contact Us</h4>
27092827

27102828
</body>
27112829

2712-
</html>
2830+
</html>

0 commit comments

Comments
 (0)