<style> .contact-form-wrapper { max-width: 700px; margin: 40px auto; padding: 30px; background-color: var(--bg-container); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); } .contact-form-header h2 { text-align: center; font-size: 28px; color: var(--text-primary); margin-top: 0; margin-bottom: 10px; } .contact-form-header p { text-align: center; font-size: 16px; color: var(--text-secondary); margin-top: 0; margin-bottom: 30px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; font-size: 15px; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s; background-color: var(--input-bg); color: var(--text-primary); box-sizing: border-box; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2); } .form-group textarea { min-height: 150px; resize: vertical; } .form-submit-button { display: block; width: 100%; background-color: var(--accent-blue); color: #fff; border: none; padding: 14px 30px; font-size: 17px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all 0.2s; } html[data-theme='dark'] .form-submit-button { color: #0f172a; } .form-submit-button:hover { transform: translateY(-2px); opacity: 0.9; } .form-submit-button:disabled { background-color: #9ca3af; cursor: not-allowed; } .form-success-message { text-align: center; padding: 40px 20px; border: 2px dashed var(--accent-blue); border-radius: 12px; background-color: var(--bg-hover); } .form-success-message h3 { font-size: 24px; color: var(--text-primary); margin: 0 0 10px 0; } .form-success-message p { font-size: 16px; color: var(--text-secondary); margin: 0; } </style> <div class="contact-form-wrapper" id="contact-wrapper"> <form action="https://formsubmit.co/bouchaib.amrouche@gmail.com" id="contact-form" method="POST"> <div class="contact-form-header"> <h2>تواصل معنا</h2> <p>هل لديك سؤال أو استفسار؟ يرجى ملء النموذج أدناه.</p> </div> <div class="form-group"> <label>الاسم بالكامل</label> <input id="name" name="name" placeholder="اكتب اسمك هنا..." required="" type="text" /> </div> <div class="form-group"> <label>البريد الإلكتروني</label> <input id="email" name="email" placeholder="بريدك الإلكتروني..." required="" type="email" /> </div> <div class="form-group"> <label>الموضوع</label> <input id="subject" name="subject" placeholder="موضوع رسالتك..." required="" type="text" /> </div> <div class="form-group"> <label>الرسالة</label> <textarea id="message" name="message" placeholder="اكتب رسالتك بالتفصيل هنا..." required=""></textarea> </div> <input name="_subject" type="hidden" value="رسالة جديدة من المدونة!" /> <input name="_captcha" type="hidden" value="false" /> <button class="form-submit-button" id="submit-btn" type="submit">إرسال الرسالة</button> </form> </div> <script> //<![CDATA[ const contactForm = document.getElementById('contact-form'); const contactWrapper = document.getElementById('contact-wrapper'); const submitBtn = document.getElementById('submit-btn'); contactForm.addEventListener('submit', function (e) { e.preventDefault(); const formData = new FormData(contactForm); submitBtn.disabled = true; submitBtn.textContent = 'جاري الإرسال...'; fetch(contactForm.action, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } }).then(response => { if (response.ok) { contactWrapper.innerHTML = ` <div class="form-success-message"> <h3>تم استلام رسالتك بنجاح!</h3> <p>شكراً لتواصلك معنا، سنقوم بالرد عليك في أقرب وقت ممكن.</p> </div>`; } else { alert('عفواً، حدث خطأ. يرجى المحاولة مرة أخرى.'); submitBtn.disabled = false; submitBtn.textContent = 'إرسال الرسالة'; } }).catch(error => { alert('عفواً، حدث خطأ في الاتصال.'); submitBtn.disabled = false; submitBtn.textContent = 'إرسال الرسالة'; }); }); //]]> </script>