كيفية إنشاء نموذج اتصال باستخدام Formspree

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

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

ما هو Formspree وكيف يعمل؟

Formspree هي خدمة بريد إلكتروني يمكنك دمجها في نموذج اتصال مخصص. عند تسجيل الدخول إلى Formspree ، يمكنك تحديد عنوان بريدك الإلكتروني المستهدف لنموذج. يتعامل Formspree مع عمليات الإرسال نيابة عنك. يتيح لك إنشاء نموذج اتصال مجاني ، مثل Google Forms، لكنك تستضيف ترميز النموذج الفعلي على موقعك الخاص.

سيقوم Formspree بإنشاء نقطة نهاية ، والتي ستحتاج إلى إضافتها إلى النموذج المخصص الخاص بك. عندما يضغط المستخدم على زر "إرسال" ، سيستخدم النموذج نقطة النهاية لاستدعاء خدمة API الخاصة بـ Formspree. سيؤدي هذا إلى إنشاء بريد إلكتروني بمحتويات نموذج الاتصال.

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

لتسجيل بريدك الإلكتروني مع Formspree ، قم بتسجيل الدخول وأدخل عنوان البريد الإلكتروني المستهدف للنموذج الخاص بك.

1. تسجيل الدخول إلى فورمسبري. إذا لم يكن لديك حساب ، فستحتاج إلى إدخال عنوان بريدك الإلكتروني وكلمة مرور. قم بالتسجيل باستخدام عنوان البريد الإلكتروني الذي تريد نموذج الاتصال لإرسال الطلبات إليه. قد تحتاج أيضًا إلى التحقق من عنوان البريد الإلكتروني هذا أثناء عملية التسجيل.
2. بمجرد اكتمال عملية التسجيل ، سيتم فتح صفحة "النماذج". انقر فوق صيغة جديدة.
3. أدخل أي اسم لنموذج الاتصال الخاص بك واترك إعدادات المشروع الافتراضية. أدخل عنوان البريد الإلكتروني الهدف في حقل "إرسال رسائل بريد إلكتروني إلى". هذا هو المكان الذي سترسل فيه Formspree استمارات نموذج الاتصال الخاصة بك. بمجرد الانتهاء ، انقر فوق إنشاء النموذج.
4. سيوفر لك Formspree نقطة نهاية ، وأمثلة عن كيفية استخدامها. ستحتاج إلى إضافة نقطة النهاية هذه إلى نموذج الاتصال المخصص الخاص بك على موقع الويب الخاص بك (المزيد حول هذا لاحقًا).
5. بشكل افتراضي ، يخزن Formspree النموذج الخاص بك ضمن مشروع يسمى "My First Project". إذا كنت تريد تغيير اسم هذا ، فارجع إلى صفحة "النماذج". انقر فوق إعدادات بجانب اسم المشروع.
6. هنا ، يمكنك تغيير اسم مشروعك إلى اسم آخر. على سبيل المثال ، يمكنك إعادة تسميته ليكون له نفس اسم موقع الويب الخاص بك. يمكنك أيضًا إضافة عنوان URL لموقع الويب الخاص بك.

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

1. أضف نقطة النهاية إلى سمة "الإجراء" الخاصة بالنموذج. سيؤدي هذا إلى قيام مستعرض المستخدم بإرسال النموذج إلى عنوان URL هذا عند إرساله.

   <شكل العمل ="https://formspree.io/f/xjvlaqpe" طريقة ="بريد">
   <- استمارتك هنا ->
   <نوع الزر ="إرسال" فئة ="زر"> إرسال </button>
   </form>

2. أضف مدخلات إلى النموذج الخاص بك. يمكنك استخدام هذا النموذج النموذجي الذي يستخدم إطار عمل Bootstrap CSS:

   <شكل العمل ="https://formspree.io/f/mbjqjrdl" فئة ="حشوة اضافية" طريقة ="بريد">
   <فئة div ="يشكل مجموعه">
   <تسمية ل ="الرد على"> عنوان بريدك الإلكتروني </label>
   <نوع الإدخال ="البريد الإلكتروني" فئة ="شكل السيطرة" معرف ="الرد على" الاسم ="_الرد على" ngModel ="الرد" آريا الموصوفة بواسطة ="البريد الإلكتروني" نائب ="[email protected]">
   <معرف صغير ="البريد الإلكتروني" فئة ="نص النموذج كتم صوته"> لن يتم مشاركة بريدك الإلكتروني مع أي شخص آخر. </small>
   </div>
   <فئة div ="يشكل مجموعه">
   <تسمية ل ="رسالة"> رسالتك </label>
   <اسم منطقة النص ="رسالة" النمط ="الارتفاع: 200 بكسل" فئة ="شكل السيطرة" معرف ="رسالة" نائب ="مرحبًا يا من هناك! أنا'م الاتصال بك لأن ..."></textarea>
   </div>
   <نوع الزر ="إرسال" فئة ="زر"> إرسال </button>
   </form>
   

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

1. قم بتشغيل موقع الويب الخاص بك وافتح الصفحة التي تحتوي على نموذج الاتصال. أدخل رسالة في نموذج الاتصال واضغط إرسال.
2. سوف تتلقى رسالة نموذج الاتصال في صندوق الوارد الخاص بك.
3. إذا عدت إلى Formspree ، فانقر فوق التقديمات التبويب. هنا ستتمكن أيضًا من رؤية الرسائل المرسلة من نموذج الاتصال الخاص بك.

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

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

نبذة عن الكاتب

شارلين فون درينين (9 مقالات منشورة)

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

المزيد من Sharlene Von Drehnen