Skip to content

Commit

Permalink
Added Order Cancellation Form (#949)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pujan-sarkar
Pujan-sarkar authored Jun 19, 2024
1 parent 1050dc6 commit 39c7ddb
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 0 deletions.
107 changes: 107 additions & 0 deletions Components/Forms/Order-Cancellation-Form/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Order Cancellation Form</title>
</head>
<body>
<div class="container">
<h1>Order Cancellation Form</h1>
<form id="cancellationForm">
<section>
<h2>Customer Information</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>

<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
</section>

<section>
<h2>Order Information</h2>
<label for="orderNumber">Order Number:</label>
<input type="text" id="orderNumber" name="orderNumber" required>

<label for="orderDate">Order Date:</label>
<input type="date" id="orderDate" name="orderDate" required>

<label for="products">Product(s) Ordered:</label>
<textarea id="products" name="products" rows="4" required></textarea>

<label for="reason">Reason for Cancellation:</label>
<select id="reason" name="reason" required>
<option value="" disabled selected>Select a reason</option>
<option value="mistake">Ordered by mistake</option>
<option value="better-price">Found a better price elsewhere</option>
<option value="delivery-time">Delivery time too long</option>
<option value="changed-mind">Changed mind</option>
<option value="no-longer-needed">Product no longer needed</option>
<option value="other">Other</option>
</select>
</section>

<section>
<h2>Cancellation Details</h2>
<label for="resolution">Preferred Resolution:</label>
<select id="resolution" name="resolution" required>
<option value="" disabled selected>Select a resolution</option>
<option value="refund">Refund</option>
<option value="store-credit">Store Credit</option>
<option value="exchange">Exchange</option>
</select>

<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments" rows="4"></textarea>
</section>

<section>
<h2>Refund Information</h2>
<label for="refundMethod">Preferred Refund Method:</label>
<select id="refundMethod" name="refundMethod" required>
<option value="" disabled selected>Select a refund method</option>
<option value="original">Original payment method</option>
<option value="bank-transfer">Bank Transfer</option>
<option value="store-credit">Store Credit</option>
</select>

<div id="bankDetails" style="display: none;">
<label for="bankName">Bank Name:</label>
<input type="text" id="bankName" name="bankName">

<label for="accountNumber">Account Number:</label>
<input type="text" id="accountNumber" name="accountNumber">

<label for="accountHolder">Account Holder Name:</label>
<input type="text" id="accountHolder" name="accountHolder">

<label for="swiftCode">Bank Swift Code:</label>
<input type="text" id="swiftCode" name="swiftCode">
</div>
</section>

<section>
<h2>Customer Agreement</h2>
<p>I hereby request the cancellation of the order as specified above. I understand that the processing of this cancellation request will be in accordance with the seller’s cancellation and refund policies.</p>

<label for="signature">Customer Signature:</label>
<input type="text" id="signature" name="signature" required>

<label for="date">Date:</label>
<input type="date" id="date" name="date" required>
</section>

<button type="submit">Submit</button>
</form>
</div>

<script src="script.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions Components/Forms/Order-Cancellation-Form/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
document.getElementById('refundMethod').addEventListener('change', function () {
const bankDetails = document.getElementById('bankDetails');
if (this.value === 'bank-transfer') {
bankDetails.style.display = 'block';
} else {
bankDetails.style.display = 'none';
}
});

document.getElementById('cancellationForm').addEventListener('submit', function (e) {
e.preventDefault();
alert('Order cancellation request submitted successfully.');
});
117 changes: 117 additions & 0 deletions Components/Forms/Order-Cancellation-Form/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #4facfe, #00f2fe);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start; /* Changed alignment */
min-height: 100vh;
padding-top: 20px; /* Added padding to top */
}

.container {
max-width: 800px;
margin: 20px; /* Adjusted margin */
background-color: #fff;
padding: 30px; /* Increased padding for better spacing */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border-radius: 10px; /* Slightly increased border-radius */
}

h1 {
text-align: center;
color: #333;
font-size: 28px;
margin-bottom: 20px; /* Added spacing below the heading */
font-weight: 700;
text-transform: uppercase;
}

section {
margin-bottom: 20px;
}

h2 {
border-bottom: 2px solid #007BFF;
padding-bottom: 5px;
color: #007BFF;
font-size: 20px;
margin-bottom: 10px; /* Added spacing below the section heading */
}

label {
display: block;
margin-top: 10px;
font-weight: bold;
color: #555; /* Darker label color for better contrast */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
width: calc(100% - 20px);
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #f9f9f9; /* Slight background color for inputs */
}

textarea {
resize: vertical;
}

button {
display: block;
width: 100%;
padding: 15px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

@media (max-width: 600px) {
.container {
padding: 15px;
}

h1 {
font-size: 24px;
}

h2 {
font-size: 18px;
}

label {
font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
font-size: 14px;
}

button {
padding: 12px;
font-size: 16px;
}
}
13 changes: 13 additions & 0 deletions assets/html_files/forms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,19 @@ <h1>OTP Verification Form</h1>
</a>
</div>
</div>
<div class="box">
<h1>Order Cancellation Form</h1>
<div class="preview">
<a href="../../Components/Forms/Order-Cancellation-Form/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/Order-Cancellation-Form" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
<div class="box">
<h1>Payment Form</h1>
<div class="preview">
Expand Down

0 comments on commit 39c7ddb

Please sign in to comment.