پرش به محتوا

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

از دانشنامه کتاب مقدس
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<!DOCTYPE html>
<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">
    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
     <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;
         }
         }
          
          
خط ۱۰۹: خط ۱۳۳:
         .note {
         .note {
             background-color: #f8f9fa;
             background-color: #f8f9fa;
             border-right: 4px solid #6a69bd;
             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;
            display: none;
         }
         }
          
          
خط ۱۹۹: خط ۲۲۲:
         }
         }
          
          
         .setup-instructions {
         .submission {
             background-color: #f8f9fa;
             background: #f8f9fa;
            border-right: 4px solid #6a69bd;
             padding: 15px;
             padding: 20px;
             margin: 15px 0;
             margin: 20px 0;
             border-radius: 8px;
             border-radius: 8px;
            border-right: 4px solid #6a89cc;
         }
         }
          
          
         .setup-instructions h3 {
         .submission h4 {
             color: #4a69bd;
             color: #4a69bd;
             margin-bottom: 15px;
             margin-bottom: 10px;
        }
       
        .instruction-step {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #ccc;
         }
         }
          
          
         .instruction-step:last-child {
         .submission p {
            border-bottom: none;
             margin: 5px 0;
             margin-bottom: 0;
            padding-bottom: 0;
         }
         }
          
          
خط ۲۳۸: خط ۲۵۳:
             }
             }
              
              
             .form-container {
             .tab-content {
                 padding: 20px;
                 padding: 20px;
             }
             }
خط ۲۵۶: خط ۲۷۱:
         </div>
         </div>
          
          
         <div class="form-container">
         <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="user_name" placeholder="نام خود را وارد کنید" required>
                     <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="user_email" placeholder="email@example.com" required>
                     <input type="email" id="userEmail" name="email" placeholder="email@example.com" required>
                 </div>
                 </div>
                  
                  
خط ۳۰۲: خط ۳۲۳:
         </div>
         </div>
          
          
         <div class="setup-instructions">
         <div class="tab-content" id="status-tab">
             <h3>راهنمای تنظیم EmailJS</h3>
             <h3>پیام‌های ارسال شده</h3>
             <div class="instruction-step">
             <div id="submissionsList">
                 <p><strong>1. ایجاد حساب رایگان در EmailJS:</strong></p>
                 <p id="noSubmissions">هیچ پیامی ارسال نشده است.</p>
                <p>به <a href="https://www.emailjs.com/" target="_blank">EmailJS.com</a> بروید و یک حساب رایگان ایجاد کنید.</p>
             </div>
             </div>
             <div class="instruction-step">
        </div>
                 <p><strong>2. اضافه کردن سرویس ایمیل:</strong></p>
       
                 <p>در پنل EmailJS، سرویس ایمیل خود (مانند Gmail) را اضافه و تأیید کنید.</p>
        <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>
             </div>
             <div class="instruction-step">
              
                <p><strong>3. ایجاد تمپلیت ایمیل:</strong></p>
            <h3>تماس مستقیم</h3>
                <p>یک تمپلیت جدید ایجاد کنید و متغیرهای زیر را استفاده کنید:</p>
             <div class="contact-info">
                <p>{{user_name}}، {{user_email}}، {{subject}}، {{message}}</p>
                <a href="mailto:info@pediabible.com" class="email-link">
             </div>
                    <i class="fas fa-envelope"></i> info@pediabible.com
            <div class="instruction-step">
                </a>
                <p><strong>4. جایگزینی اطلاعات حساب:</strong></p>
                 <p>در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.</p>
                 <p>مقادیر SERVICE_ID، TEMPLATE_ID و PUBLIC_KEY را در کد JavaScript با اطلاعات حساب خود جایگزین کنید.</p>
             </div>
             </div>
         </div>
         </div>
خط ۳۳۷: خط ۳۶۶:


     <script>
     <script>
         // مقداردهی اولیه EmailJS
         // مدیریت تب‌ها
         // لطفاً این مقادیر را با اطلاعات حساب EmailJS خود جایگزین کنید
         document.querySelectorAll('.tab').forEach(tab => {
        emailjs.init("YOUR_PUBLIC_KEY"); // کلید عمومی خود را اینجا قرار دهید
            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
            document.getElementById('submitBtn').disabled = true;
             saveSubmission(name, email, subject, message);
             document.getElementById('submitBtn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> در حال ارسال...';
              
              
             // ارسال ایمیل با استفاده از EmailJS
             // ارسال به Formspree
             emailjs.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", {
            const formData = new FormData();
                 user_name: name,
            formData.append('name', name);
                 user_email: email,
            formData.append('email', email);
                 subject: subject,
            formData.append('subject', subject);
                 message: message,
            formData.append('message', message);
                 to_email: "info@pediabible.com"
            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');
                 }
             })
             })
             .then(function(response) {
             .catch(error => {
                 showAlert('پیام شما با موفقیت ارسال شد. به زودی با شما تماس خواهیم گرفت.', 'success');
                 showAlert('پیام شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً尝试 کنید.', 'error');
                document.getElementById('contactForm').reset();
                document.getElementById('submitBtn').disabled = true;
                document.getElementById('submitBtn').innerHTML = '<i class="fas fa-paper-plane"></i> ارسال پیام';
            }, function(error) {
                showAlert('متأسفانه مشکلی در ارسال پیام پیش آمد. لطفاً مستقیماً به info@pediabible.com ایمیل بزنید.', 'error');
                document.getElementById('submitBtn').disabled = false;
                document.getElementById('submitBtn').innerHTML = '<i class="fas fa-paper-plane"></i> ارسال پیام';
             });
             });
         });
         });
خط ۴۰۵: خط ۴۵۷:
                 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>

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

فرم تماس - دانشنامه کتاب مقدس

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

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

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

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

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

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

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

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

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

تماس مستقیم

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

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

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

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

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