المقدمة: بوابة التواصل السريع

عندما تبني موقعك على منصة سنديان، تكون صفحة اتصل بنا هي جسرك الأهم مع الزوار. لكن ربط نماذج الاتصال بالبريد الإلكتروني قد يبدو معقدًا للبعض، ويتطلب إعداد خوادم برمجية خاصة.

الحل أسهل بكثير! في هذا الدليل، سنتعلم كيف نربط استمارات موقعك على سنديان ببريدك Gmail مباشرة وبالمجان عبر أداة Formspree، بخطوات بسيطة وبدون تعقيد برمي.

تهيئة الخدمة

الخطوة 1: إنشاء وتجهيز الاستمارة على Formspree

في البداية، سنحتاج إلى إعداد المستقبل الرقمي الذي سيتلقى بيانات زوار موقعك ويمررها إلى بريدك الإلكتروني.

  • التسجيل والتفعيل: توجه إلى موقع Formspree، وقم بإنشاء حساب جديد، ثم تفقد بريدك الإلكتروني لتفعيل الحساب.
  • إنشاء نموذج جديد: بعد تسجيل الدخول، انتقل إلى صفحة الاستمارات اضغط على زر Add new، ثم اختر New form.
  • تسمية النموذج: قم بتسمية الاستمارة (مثلًا: Contact Form)، ثم اضغط على Create form.
  • نسخ الرابط (Endpoint): بمجرد إنشاء الاستمارة، ستظهر لك لوحة التحكم الخاصة بها. ابحث عن حقل Form endpoint وقم بنسخ الرابط الموجود بداخله بالكامل، حيث سنحتاجه في الخطوة التالية لربطه بمنصة سنديان.

الخطوة 2: ربط الكود البرمجي بـمنصة سنديان

الآن بعد أن حصلت على رابط الـ Endpoint الخاص بك، حان الوقت لربطه بموقعك على منصة سنديان ليتم تفعيل النموذج تلقائيًا لأي صفحة.

  • الانتقال للاكواد المخصصة: توجه إلى لوحة تحكم موقعك على منصة سنديان، ثم انتقل إلى الإعدادات، ومنها إلى الأكواد المخصصة.
  • إضافة الكود في قسم محتوى الصفحة: قم بلصق الكود التالي داخله:

JavaScript Code

<script>
window.SNDIAN_FORM_ACTION_URL = "الصق_الرابط_هنا";
</script>
<script src="https://cdn.jsdelivr.net/npm/addition-formspree@1.0.3/index.js"></script>
  • تخصيص الرابط: كل ما عليك فعله هو تظليل النص الصق_الرابط_هنا وحذفه، ثم لصق رابط الـ Form endpoint الذي نسخته من موقع Formspree في الخطوة السابقة مكانه مباشرة.
  • لا تنسَ الضغط على زر حفظ لتطبيق التغييرات على موقعك.

استخدام القسم على الموقع

الخطوة 3: تحميل ورفع قسم التواصل على موقعك

في هذه الخطوة سنقوم بجلب التصميم الجاهز لقسم التواصل وإدراجه داخل لوحة تحكم موقعك لتتمكن من استخدامه في أي صفحة تريدها.

  • تحميل الملف الجاهز: قم بتحميل ملف القسم بصيغة المضغوطة مباشرة عبر الضغط على هذا الرابط
  • رفع القسم إلى حسابك: توجه إلى لوحة تحكم موقعك على منصة سنديان، واتبع المسار التالي:
    • اضغط على أضف قسم.
    • اختر تبويب أقسامي.
    • انتقل إلى نماذج.
    • اضغط على أضف قسم جديد، ثم قم برفع ملف الـ Zip الذي قمت بتحميله للتو

الخطوة 4: تخصيص وتنسيق حقول النموذج

  • تعديل الحقول (Inputs): اضغط على أي حقل إدخال (Input) موجود داخل النموذج لتعديل خصائصه، مثل النص التوضيحي (Placeholder) أو نوع البيانات المطلوبة (اسم، بريد إلكتروني، رقم هاتف).
  • تكرار الحقول: إذا كنت بحاجة إلى حقول إضافية داخل استمارة التواصل، ما عليك سوى الضغط على زر نسخ (Duplicate) للحقل الحالي، وستحصل فورًا على حقل جديد مكرر بنفس التنسيق.
  • ضبط البيانات: قم بتغيير وتعديل بيانات الحقول المكررة وتسميتها وتنسيقها بما يخدم موقعك، تمامًا كما هو موضح في الفيديو التوضيحي المرفق.

💡 إرشادات وملاحظات هامة:

في حالة تغيير الكود لأي سبب قم باستبدال عنصر Block الذي يحتوي على كلاس sndian-form ب form ولاتنسى استبدال إغلاقه أيضًا، فيصبح الشكل مثل


<form class="sndian-form" method="POST" style="display:flex;flex-direction:column;align-items:center">

خاتمة المقال

بوصولك إلى هنا، نكون قد نجحنا في بناء نموذج اتصال احترافي وديناميكي بالكامل لموقعك على منصة سنديان. من خلال الدمج الذكي بين مرونة التصميم في سنديان والحل البرمجي السريع الذي تقدمه أداة Formspree، أصبحت قادرًا الآن على استقبال رسائل واستفسارات عملائك وزوارك مباشرة في صندوق وارد Gmail الخاص بك دون تعقيد أو حاجة لإعداد خوادم منفصلة.

مقالات أخرى

صورة العنصر

إضافة بوابات الدافع لموقعك على منصة سنديان

في هذا المقال نستعرض كيفية التسجيل في الخدمة بداية من التعريف بها وصولًا لإضافة الدفع الفعلي عبر الموقع مع شرح طريقة معرفة كافة العمليات التي تجري على حسابك وتوضيح حالة الاشتراك

صورة العنصر

إضافة زر التواصل عبر واتس اب لموقع سنديان

شرح عملي بالخطوات والكود ودعم بالصور لكيفية عمل زر للتواصل عبر الواتس اب في منصة سنديان