پرش به محتوا

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

از دانشنامه کتاب مقدس
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۶: خط ۶:
     <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: 800px;
             max-width: 600px;
             margin: 0 auto;
             margin: 0 auto;
             background: white;
             background: white;
خط ۴۷: خط ۴۸:
         }
         }
          
          
         .tabs {
         .form-container {
            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 #6a89cc;
             border-right: 4px solid #6a69cc;
             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;
         }
         }
          
          
خط ۲۲۳: خط ۱۹۹:
         }
         }
          
          
         .submission {
         .setup-guide {
             background: #f8f9fa;
             background: #f8f9fa;
             padding: 15px;
             padding: 20px;
             margin: 15px 0;
             margin: 20px 0;
             border-radius: 8px;
             border-radius: 8px;
             border-right: 4px solid #6a89cc;
             border-right: 4px solid #6a69cc;
         }
         }
          
          
         .submission h4 {
         .setup-guide h3 {
             color: #4a69bd;
             color: #4a69bd;
             margin-bottom: 10px;
             margin-bottom: 15px;
        }
       
        .setup-step {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #ccc;
         }
         }
          
          
         .submission p {
         .setup-step:last-child {
             margin: 5px 0;
            border-bottom: none;
             margin-bottom: 0;
            padding-bottom: 0;
         }
         }
          
          
خط ۲۵۴: خط ۲۳۸:
             }
             }
              
              
             .tab-content {
             .form-container {
                 padding: 20px;
                 padding: 20px;
             }
             }
خط ۲۷۲: خط ۲۵۶:
         </div>
         </div>
          
          
         <div class="tabs">
         <div class="form-container">
            <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="name" placeholder="نام خود را وارد کنید" required>
                     <input type="text" id="userName" name="userName" 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="email" placeholder="email@example.com" required>
                     <input type="email" id="userEmail" name="userEmail" placeholder="email@example.com" required>
                 </div>
                 </div>
                  
                  
                 <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="userSubject" required>
                         <option value="">انتخاب موضوع</option>
                         <option value="">انتخاب موضوع</option>
                         <option value="سوال">سوال</option>
                         <option value="سوال">سوال</option>
خط ۳۰۶: خط ۲۸۴:
                 <div class="form-group">
                 <div class="form-group">
                     <label for="userMessage" class="required">پیام شما</label>
                     <label for="userMessage" class="required">پیام شما</label>
                     <textarea id="userMessage" name="message" placeholder="پیام خود را اینجا بنویسید..." rows="5" required></textarea>
                     <textarea id="userMessage" name="userMessage" placeholder="پیام خود را اینجا بنویسید..." rows="5" required></textarea>
                 </div>
                 </div>
                  
                  
خط ۳۲۴: خط ۳۰۲:
         </div>
         </div>
          
          
         <div class="tab-content" id="status-tab">
         <div class="setup-guide">
             <h3>پیام‌های ارسال شده</h3>
             <h3>راهنمای تنظیم ایمیل خودکار</h3>
             <div id="submissionsList">
             <div class="setup-step">
                 <p id="noSubmissions">هیچ پیامی ارسال نشده است.</p>
                 <p><strong>۱. ایجاد حساب EmailJS رایگان:</strong></p>
                <p>به <a href="https://www.emailjs.com/" target="_blank">EmailJS.com</a> بروید و یک حساب رایگان ایجاد کنید.</p>
             </div>
             </div>
        </div>
            <div class="setup-step">
       
                 <p><strong>۲. افزودن سرویس ایمیل:</strong></p>
        <div class="tab-content" id="help-tab">
                 <p>در پنل EmailJS، سرویس ایمیل خود (Gmail، Outlook و غیره) را اضافه کنید.</p>
            <h3>راهنمای عیب‌یابی مشکل ایمیل</h3>
            </div>
            <div class="note">
            <div class="setup-step">
                 <p><strong>اگر ایمیل را دریافت نمی‌کنید، لطفاً موارد زیر را بررسی کنید:</strong></p>
                <p><strong>۳. ایجاد تمپلیت ایمیل:</strong></p>
                 <ol>
                 <p>یک تمپلیت ایمیل ایجاد کنید و متغیرهای زیر را استفاده کنید:</p>
                    <li>پوشه اسپم (Spam) یا هرزنامه ایمیل خود را بررسی کنید</li>
                <p>{{userName}}، {{userEmail}}، {{userSubject}}، {{userMessage}}</p>
                    <li>از صحت آدرس ایمیل وارد شده اطمینان حاصل کنید</li>
                    <li>ممکن است ایمیل تأیید Formspree را دریافت کرده و باید آن را تأیید کنید</li>
                    <li>پیام‌های ارسال شده در بخش "وضعیت پیام‌ها" نیز ذخیره می‌شوند</li>
                </ol>
                 <p>برای تست، می‌توانید یک پیام آزمایشی ارسال کرده و سپس پوشه اسپم خود را بررسی کنید.</p>
             </div>
             </div>
           
             <div class="setup-step">
            <h3>تماس مستقیم</h3>
                 <p><strong>۴. جایگزینی اطلاعات حساب:</strong></p>
             <div class="contact-info">
                 <p>مقادیر SERVICE_ID، TEMPLATE_ID و PUBLIC_KEY را در کد زیر با اطلاعات حساب خود جایگزین کنید.</p>
                 <a href="mailto:info@pediabible.com" class="email-link">
                    <i class="fas fa-envelope"></i> info@pediabible.com
                </a>
                 <p>در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.</p>
             </div>
             </div>
         </div>
         </div>
خط ۳۶۷: خط ۳۳۷:


     <script>
     <script>
         // مدیریت تب‌ها
         // مقداردهی اولیه EmailJS
         document.querySelectorAll('.tab').forEach(tab => {
         // لطفاً این مقادیر را با اطلاعات حساب EmailJS خود جایگزین کنید
            tab.addEventListener('click', () => {
        emailjs.init("YOUR_PUBLIC_KEY"); // کلید عمومی خود را اینجا قرار دهید
                // غیرفعال کردن همه تب‌ها
          
                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);
             document.getElementById('submitBtn').disabled = true;
           
             document.getElementById('submitBtn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> در حال ارسال...';
            // ارسال به 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', {
             // ارسال ایمیل با استفاده از EmailJS
                 method: 'POST',
            emailjs.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", {
                 body: formData,
                 userName: name,
                 headers: {
                 userEmail: email,
                    'Accept': 'application/json'
                 userSubject: subject,
                }
                userMessage: message,
            })
                 to_email: "info@pediabible.com"
            .then(response => {
                if (response.ok) {
                    showAlert('پیام شما با موفقیت ارسال شد. در صورت عدم دریافت ایمیل، لطفاً پوشه اسپم خود را بررسی کنید.', 'success');
                    document.getElementById('contactForm').reset();
                    document.getElementById('submitBtn').disabled = true;
                 } else {
                    showAlert('پیام شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً尝试 کنید.', 'error');
                }
             })
             })
             .catch(error => {
             .then(function(response) {
                 showAlert('پیام شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً尝试 کنید.', 'error');
                 showAlert('پیام شما با موفقیت ارسال شد. به زودی با شما تماس خواهیم گرفت.', 'success');
                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>

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

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

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

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

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

راهنمای تنظیم ایمیل خودکار

۱. ایجاد حساب EmailJS رایگان:

به EmailJS.com بروید و یک حساب رایگان ایجاد کنید.

۲. افزودن سرویس ایمیل:

در پنل EmailJS، سرویس ایمیل خود (Gmail، Outlook و غیره) را اضافه کنید.

۳. ایجاد تمپلیت ایمیل:

یک تمپلیت ایمیل ایجاد کنید و متغیرهای زیر را استفاده کنید:

{{userName}}، {{userEmail}}، {{userSubject}}، {{userMessage}}

۴. جایگزینی اطلاعات حساب:

مقادیر SERVICE_ID، TEMPLATE_ID و PUBLIC_KEY را در کد زیر با اطلاعات حساب خود جایگزین کنید.

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

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

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

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