پرش به محتوا

تماس با ما: تفاوت میان نسخه‌ها

از دانشنامه کتاب مقدس
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۴: خط ۴:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>فرم تماس با دانشنامه کتاب مقدس</title>
     <title>فرم تماس - دانشنامه کتاب مقدس</title>
    <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: 600px;
             max-width: 800px;
             margin: 0 auto;
             margin: 0 auto;
             background: white;
             background: white;
خط ۴۶: خط ۴۷:
         }
         }
          
          
         .form-container {
         .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;
         }
         }
          
          
خط ۱۸۲: خط ۲۰۹:
             border-radius: 8px;
             border-radius: 8px;
             text-align: center;
             text-align: center;
            display: none;
         }
         }
          
          
خط ۱۹۵: خط ۲۲۱:
             color: #721c24;
             color: #721c24;
             border: 1px solid #f5c6cb;
             border: 1px solid #f5c6cb;
        }
       
        .submission {
            background: #f8f9fa;
            padding: 15px;
            margin: 15px 0;
            border-radius: 8px;
            border-right: 4px solid #6a89cc;
        }
       
        .submission h4 {
            color: #4a69bd;
            margin-bottom: 10px;
        }
       
        .submission p {
            margin: 5px 0;
         }
         }
          
          
خط ۲۱۱: خط ۲۵۴:
             }
             }
              
              
             .form-container {
             .tab-content {
                 padding: 20px;
                 padding: 20px;
             }
             }
خط ۲۲۹: خط ۲۷۲:
         </div>
         </div>
          
          
         <div class="form-container">
         <div class="tabs">
             <div id="alertBox" class="alert"></div>
            <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>
              
              
             <form id="contactForm" action="https://formspree.io/f/mgvlblka" method="POST">
             <form id="contactForm">
                <input type="hidden" name="_language" value="fa">
                <input type="hidden" name="_subject" value="پیام جدید از سایت دانشنامه کتاب مقدس">
               
                 <div class="form-group">
                 <div class="form-group">
                     <label for="userName" class="required">نام شما</label>
                     <label for="userName" class="required">نام شما</label>
خط ۲۴۸: خط ۲۹۴:
                 <div class="form-group">
                 <div class="form-group">
                     <label for="userSubject" class="required">موضوع پیام</label>
                     <label for="userSubject" class="required">موضوع پیام</label>
                     <select id="userSubject" name="_subject" required>
                     <select id="userSubject" name="subject" required>
                         <option value="">انتخاب موضوع</option>
                         <option value="">انتخاب موضوع</option>
                         <option value="سوال">سوال</option>
                         <option value="سوال">سوال</option>
خط ۲۷۶: خط ۳۲۲:
                 </button>
                 </button>
             </form>
             </form>
        </div>
       
        <div class="tab-content" id="status-tab">
            <h3>پیام‌های ارسال شده</h3>
            <div id="submissionsList">
                <p id="noSubmissions">هیچ پیامی ارسال نشده است.</p>
            </div>
        </div>
       
        <div class="tab-content" id="help-tab">
            <h3>راهنمای عیب‌یابی مشکل ایمیل</h3>
            <div class="note">
                <p><strong>اگر ایمیل را دریافت نمی‌کنید، لطفاً موارد زیر را بررسی کنید:</strong></p>
                <ol>
                    <li>پوشه اسپم (Spam) یا هرزنامه ایمیل خود را بررسی کنید</li>
                    <li>از صحت آدرس ایمیل وارد شده اطمینان حاصل کنید</li>
                    <li>ممکن است ایمیل تأیید Formspree را دریافت کرده و باید آن را تأیید کنید</li>
                    <li>پیام‌های ارسال شده در بخش "وضعیت پیام‌ها" نیز ذخیره می‌شوند</li>
                </ol>
                <p>برای تست، می‌توانید یک پیام آزمایشی ارسال کرده و سپس پوشه اسپم خود را بررسی کنید.</p>
            </div>
           
            <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>
            </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() {
خط ۲۹۹: خط ۳۹۲:
         // مدیریت ارسال فرم
         // مدیریت ارسال فرم
         document.getElementById('contactForm').addEventListener('submit', function(e) {
         document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
           
             // دریافت اطلاعات از کاربر
             // دریافت اطلاعات از کاربر
             let name = document.getElementById('userName').value;
             let name = document.getElementById('userName').value;
خط ۳۰۹: خط ۴۰۴:
             if (!name || !email || !subject || !message) {
             if (!name || !email || !subject || !message) {
                 showAlert('لطفاً تمام فیلدهای ضروری را پر کنید', 'error');
                 showAlert('لطفاً تمام فیلدهای ضروری را پر کنید', 'error');
                e.preventDefault();
                 return;
                 return;
             }
             }
خط ۳۱۶: خط ۴۱۰:
             if (!notRobot) {
             if (!notRobot) {
                 showAlert('لطفاً گزینه "من ربات نیستم" را تأیید کنید', 'error');
                 showAlert('لطفاً گزینه "من ربات نیستم" را تأیید کنید', 'error');
                e.preventDefault();
                 return;
                 return;
             }
             }
              
              
             // اگر همه چیز درست است، فرم ارسال می‌شود
             // ذخیره پیام در localStorage
             showAlert('در حال ارسال پیام...', 'success');
            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('پیام شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً尝试 کنید.', 'error');
            });
         });
         });
          
          
         // تابع نمایش پیام
         // تابع نمایش پیام
         function showAlert(message, type) {
         function showAlert(message, type) {
             const alertBox = document.getElementById('alertBox');
             const alertBox = document.getElementById('formAlert');
             alertBox.textContent = message;
             alertBox.textContent = message;
             alertBox.className = 'alert';
             alertBox.className = 'alert';
خط ۳۳۵: خط ۴۵۷:
             setTimeout(() => {
             setTimeout(() => {
                 alertBox.style.display = 'none';
                 alertBox.style.display = 'none';
             }, 5000);
             }, 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>
   
    <!-- آیکون های فونت آوسام -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</body>
</body>
</html>
</html>

نسخهٔ ‏۱۵ سپتامبر ۲۰۲۵، ساعت ۲۱:۱۱

<!DOCTYPE html> فرم تماس - دانشنامه کتاب مقدس

ارسال پیام به دانشنامه کتاب مقدس

پاسخگوی سوالات و پیام های شما هستیم

ارسال پیام
وضعیت پیام‌ها
راهنما
لطفاً راه ارتباطی خود (ایمیل یا تلگرام) را در متن پیام ذکر کنید

پیام‌های ارسال شده

هیچ پیامی ارسال نشده است.

راهنمای عیب‌یابی مشکل ایمیل

اگر ایمیل را دریافت نمی‌کنید، لطفاً موارد زیر را بررسی کنید:

  1. پوشه اسپم (Spam) یا هرزنامه ایمیل خود را بررسی کنید
  2. از صحت آدرس ایمیل وارد شده اطمینان حاصل کنید
  3. ممکن است ایمیل تأیید Formspree را دریافت کرده و باید آن را تأیید کنید
  4. پیام‌های ارسال شده در بخش "وضعیت پیام‌ها" نیز ذخیره می‌شوند

برای تست، می‌توانید یک پیام آزمایشی ارسال کرده و سپس پوشه اسپم خود را بررسی کنید.

تماس مستقیم

در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.

راه های ارتباطی

دانشنامه کتاب مقدس

کلیه حقوق محفوظ است © ۲۰۲۳

برگرفته از «https://www.pediabible.com/index.php?title=تماس_با_ما&oldid=3324»