تماس با ما: تفاوت میان نسخه‌ها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
<head> | <head> | ||
| خط ۶: | خط ۵: | ||
<title>فرم تماس - دانشنامه کتاب مقدس</title> | <title>فرم تماس - دانشنامه کتاب مقدس</title> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | ||
<style> | <style> | ||
* { | * { | ||
| خط ۲۳: | خط ۲۱: | ||
.container { | .container { | ||
max-width: | max-width: 800px; | ||
margin: 0 auto; | margin: 0 auto; | ||
background: white; | background: white; | ||
| خط ۴۸: | خط ۴۶: | ||
} | } | ||
. | .tabs { | ||
display: flex; | |||
background: #f8f9fa; | |||
border-bottom: 1px solid #ddd; | |||
} | |||
.tab { | |||
padding: 15px 20px; | |||
cursor: pointer; | |||
font-weight: bold; | |||
flex: 1; | |||
text-align: center; | |||
transition: all 0.3s; | |||
} | |||
.tab.active { | |||
background: white; | |||
border-bottom: 3px solid #4a69bd; | |||
color: #4a69bd; | |||
} | |||
.tab-content { | |||
display: none; | |||
padding: 25px; | padding: 25px; | ||
} | |||
.tab-content.active { | |||
display: block; | |||
} | } | ||
| خط ۱۰۹: | خط ۱۳۳: | ||
.note { | .note { | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
border-right: 4px solid # | border-right: 4px solid #6a89cc; | ||
padding: 12px 15px; | padding: 12px 15px; | ||
margin: 20px 0; | margin: 20px 0; | ||
| خط ۱۸۴: | خط ۲۰۸: | ||
border-radius: 8px; | border-radius: 8px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| خط ۱۹۹: | خط ۲۲۲: | ||
} | } | ||
. | .submission { | ||
background | background: #f8f9fa; | ||
padding: 15px; | |||
padding: | margin: 15px 0; | ||
margin: | |||
border-radius: 8px; | border-radius: 8px; | ||
border-right: 4px solid #6a89cc; | |||
} | } | ||
. | .submission h4 { | ||
color: #4a69bd; | color: #4a69bd; | ||
margin-bottom: | margin-bottom: 10px; | ||
} | } | ||
. | .submission p { | ||
margin | margin: 5px 0; | ||
} | } | ||
| خط ۲۳۸: | خط ۲۵۳: | ||
} | } | ||
. | .tab-content { | ||
padding: 20px; | padding: 20px; | ||
} | } | ||
| خط ۲۵۶: | خط ۲۷۱: | ||
</div> | </div> | ||
<div class="form- | <div class="tabs"> | ||
<div class="tab active" data-tab="form">ارسال پیام</div> | |||
<div class="tab" data-tab="status">وضعیت پیام‌ها</div> | |||
<div class="tab" data-tab="help">راهنما</div> | |||
</div> | |||
<div class="tab-content active" id="form-tab"> | |||
<div id="formAlert" class="alert" style="display: none;"></div> | <div id="formAlert" class="alert" style="display: none;"></div> | ||
| خط ۲۶۲: | خط ۲۸۳: | ||
<div class="form-group"> | <div class="form-group"> | ||
<label for="userName" class="required">نام شما</label> | <label for="userName" class="required">نام شما</label> | ||
<input type="text" id="userName" name=" | <input type="text" id="userName" name="name" placeholder="نام خود را وارد کنید" required> | ||
</div> | </div> | ||
<div class="form-group"> | <div class="form-group"> | ||
<label for="userEmail" class="required">ایمیل شما</label> | <label for="userEmail" class="required">ایمیل شما</label> | ||
<input type="email" id="userEmail" name=" | <input type="email" id="userEmail" name="email" placeholder="email@example.com" required> | ||
</div> | </div> | ||
| خط ۳۰۲: | خط ۳۲۳: | ||
</div> | </div> | ||
<div class=" | <div class="tab-content" id="status-tab"> | ||
<h3> | <h3>پیام‌های ارسال شده</h3> | ||
<div | <div id="submissionsList"> | ||
<p | <p id="noSubmissions">هیچ پیامی ارسال نشده است.</p> | ||
</div> | </div> | ||
</div> | |||
<div class="tab-content" id="help-tab"> | |||
<div class=" | <h3>تماس مستقیم</h3> | ||
< | <div class="contact-info"> | ||
<a href="mailto:info@pediabible.com" class="email-link"> | |||
<i class="fas fa-envelope"></i> info@pediabible.com | |||
</a> | |||
<p>در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.</p> | |||
<p> | |||
</div> | </div> | ||
</div> | </div> | ||
| خط ۳۳۷: | خط ۳۵۵: | ||
<script> | <script> | ||
// | // مدیریت تب‌ها | ||
// | document.querySelectorAll('.tab').forEach(tab => { | ||
tab.addEventListener('click', () => { | |||
// غیرفعال کردن همه تب‌ها | |||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |||
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active')); | |||
// فعال کردن تب انتخاب شده | |||
tab.classList.add('active'); | |||
document.getElementById(tab.dataset.tab + '-tab').classList.add('active'); | |||
// اگر تب وضعیت پیام‌ها است، لیست را بارگذاری کن | |||
if (tab.dataset.tab === 'status') { | |||
loadSubmissions(); | |||
} | |||
}); | |||
}); | |||
// فعال کردن دکمه ارسال وقتی کاربر تیک میزند | // فعال کردن دکمه ارسال وقتی کاربر تیک میزند | ||
document.getElementById('notRobot').addEventListener('change', function() { | document.getElementById('notRobot').addEventListener('change', function() { | ||
| خط ۳۶۹: | خط ۴۰۱: | ||
} | } | ||
// | // ذخیره پیام در localStorage | ||
saveSubmission(name, email, subject, message); | |||
// ارسال | // ارسال به Formspree | ||
const formData = new FormData(); | |||
formData.append('name', name); | |||
formData.append('email', email); | |||
formData.append('subject', subject); | |||
formData.append('message', message); | |||
formData.append('_replyto', email); | |||
formData.append('_subject', 'پیام جدید از سایت: ' + subject); | |||
fetch('https://formspree.io/f/mgvlblka', { | |||
method: 'POST', | |||
body: formData, | |||
headers: { | |||
'Accept': 'application/json' | |||
} | |||
}) | |||
.then(response => { | |||
if (response.ok) { | |||
showAlert('پیام شما با موفقیت ارسال شد. در صورت عدم دریافت ایمیل، لطفاً پوشه اسپم خود را بررسی کنید.', 'success'); | |||
document.getElementById('contactForm').reset(); | |||
document.getElementById('submitBtn').disabled = true; | |||
} else { | |||
showAlert('پیام شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً تلاش کنید.', 'error'); | |||
} | |||
}) | }) | ||
. | .catch(error => { | ||
showAlert('پیام شما | showAlert('پیام شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً尝试 کنید.', 'error'); | ||
}); | }); | ||
}); | }); | ||
| خط ۴۰۵: | خط ۴۴۶: | ||
alertBox.style.display = 'none'; | alertBox.style.display = 'none'; | ||
}, 10000); | }, 10000); | ||
} | |||
// توابع مدیریت ذخیره پیام‌ها | |||
function saveSubmission(name, email, subject, message) { | |||
const submissions = JSON.parse(localStorage.getItem('formSubmissions') || '[]'); | |||
const newSubmission = { | |||
id: Date.now(), | |||
name, | |||
email, | |||
subject, | |||
message, | |||
date: new Date().toLocaleString('fa-IR') | |||
}; | |||
submissions.unshift(newSubmission); | |||
localStorage.setItem('formSubmissions', JSON.stringify(submissions)); | |||
} | |||
function loadSubmissions() { | |||
const submissions = JSON.parse(localStorage.getItem('formSubmissions') || '[]'); | |||
const submissionsList = document.getElementById('submissionsList'); | |||
const noSubmissions = document.getElementById('noSubmissions'); | |||
if (submissions.length === 0) { | |||
noSubmissions.style.display = 'block'; | |||
submissionsList.innerHTML = '<p id="noSubmissions">هیچ پیامی ارسال نشده است.</p>'; | |||
return; | |||
} | |||
noSubmissions.style.display = 'none'; | |||
submissionsList.innerHTML = ''; | |||
submissions.forEach(sub => { | |||
const submissionEl = document.createElement('div'); | |||
submissionEl.className = 'submission'; | |||
submissionEl.innerHTML = ` | |||
<h4>${sub.subject} - ${sub.name}</h4> | |||
<p><strong>تاریخ:</strong> ${sub.date}</p> | |||
<p><strong>ایمیل:</strong> ${sub.email}</p> | |||
<p><strong>پیام:</strong> ${sub.message}</p> | |||
`; | |||
submissionsList.appendChild(submissionEl); | |||
}); | |||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
نسخهٔ کنونی تا ۱۱ اکتبر ۲۰۲۵، ساعت ۲۳:۳۵
ارسال پیام به دانشنامه کتاب مقدس
پاسخگوی سوالات و پیام های شما هستیم
ارسال پیام
وضعیت پیام‌ها
راهنما
پیام‌های ارسال شده
هیچ پیامی ارسال نشده است.
تماس مستقیم
info@pediabible.com
در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.