eee
- mysun9656
- 2월 16일
- 1분 분량
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예담플라워 SMS 주문상담</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; }
.container { max-width: 600px; margin: auto; padding: 20px; }
.title { font-size: 24px; font-weight: bold; }
.sms { color: red; font-weight: bold; }
select, input, textarea, button { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 5px; }
button { background: #4CAF50; color: white; cursor: pointer; }
button:hover { background: #45a049; }
.hidden { display: none; }
</style>
<script>
function toggleFields() {
var selection = document.getElementById("productType").value;
document.getElementById("condolenceFields").classList.add("hidden");
document.getElementById("celebrationFields").classList.add("hidden");
if (selection === "근조화환") {
document.getElementById("condolenceFields").classList.remove("hidden");
} else if (selection === "축하화환") {
document.getElementById("celebrationFields").classList.remove("hidden");
}
}
function sendOrder() {
let name = document.getElementById('customerName').value;
let phone = document.getElementById('customerPhone').value;
let product = document.getElementById('productType').value;
let details = document.getElementById('orderDetails').value;
if (!name || !phone || !product || !details) {
alert("모든 필수 입력란을 작성해 주세요.");
return;
}
let message = `[주문 정보]\n이름: ${name}\n전화번호: ${phone}\n상품 유형: ${product}\n주문 상세 내용: ${details}`;
let encodedMessage = encodeURIComponent(message);
let kakaoUrl = `https://pf.kakao.com/_Xixmxfxj/chat?text=${encodedMessage}`;
if (confirm("아래 정보를 전송하시겠습니까?\n\n" + message)) {
window.location.href = kakaoUrl;
}
}
</script>
</head>
<body>
<div class="container">
<h1 class="title">예담플라워 <span class="sms">SMS</span> 주문상담</h1>
<p>SMS 주문상담으로 전국 축하화환, 근조화환, 동·서양란, 관엽식물을 주문이 가능합니다.</p>
<h2>주문 정보 입력</h2>
<form id="orderForm">
<input type="text" id="customerName" name="customerName" placeholder="주문자 이름" required>
<input type="tel" id="customerPhone" name="customerPhone" placeholder="주문자 전화번호" required>
<h2>상품 선택</h2>
<select id="productType" name="productType" onchange="toggleFields()">
<option value="">상품을 선택하세요</option>
<option value="근조화환">근조화환</option>
<option value="축하화환">축하화환</option>
</select>
<div id="condolenceFields" class="hidden">
<h3>근조화환 주문 상세</h3>
<input type="text" name="funeralHall" placeholder="장례식장명 및 빈소호실" required>
<input type="text" name="deceasedName" placeholder="고인 또는 상주 성함" required>
<input type="text" name="senderName" placeholder="리본에 쓸 보내는 분" required>
<textarea name="message" placeholder="조의문구 (미기재 시 기본 문구 자동 입력)">삼가 故人의 冥福을 빕니다</textarea>
</div>
<div id="celebrationFields" class="hidden">
<h3>축하화환 주문 상세</h3>
<input type="text" name="weddingHall" placeholder="예식장명 및 예식일시" required>
<input type="text" name="brideGroomName" placeholder="신랑 또는 신부 성함 (한 측만 기재)" required>
<input type="text" name="senderName" placeholder="리본에 쓸 보내는 분" required>
<textarea name="message" placeholder="축하문구 (미기재 시 기본 문구 자동 입력)">祝結婚 (축결혼)</textarea>
</div>
<h3>추가 요청 사항</h3>
<textarea id="orderDetails" name="orderDetails" placeholder="기타 요청 사항을 입력하세요."></textarea>
<button type="button" onclick="sendOrder()">전송하기</button>
</form>
<p>문의전화: 010-2662-3485</p>
<p>카카오톡 상담: <a href="http://pf.kakao.com/_Xixmxfxj/chat" target="_blank">채팅하기</a></p>
<div class="product-guide">
<h2>상품 안내</h2>
<img src="file:///mnt/data/간편주문%20상품%20안내%201_enhanced.png" alt="간편주문 상품 안내 1">
<img src="file:///mnt/data/간편주문%20상품%20안내%202_enhanced.png" alt="간편주문 상품 안내 2">
<img src="file:///mnt/data/간편주문%20상품%20안내%203_enhanced.png" alt="간편주문 상품 안내 3">
</div>
</div>
</body>
</html>
댓글