الدليل النهائي لإنشاء نموذج اتصال Elementor

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

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

سنعرض لك اليوم كيفية إنشاء نموذج في بضع خطوات باستخدام عنصر واجهة مستخدم Elementor Contact Form.

لذا ، دعنا نقفز معًا!

كيفية إنشاء نموذج اتصال باستخدام Elementor (7 خطوات سهلة)

قبل البدء ، يجب أن نذكر أنها ميزة احترافية لـ Elementor. لذلك ، ستنجح ، إذا كنت تستخدم Elementor Pro وتكلفتها حوالي 49 دولارًا.

في هذه الأثناء ، إذا كنت جديدًا في Elementor ، فتحقق من دليل المبتدئين هذا لجعل رحلتك أكثر سلاسة.

الخطوة 1: قم بإضافة عنصر واجهة مستخدم نموذج جهة الاتصال Elementor إلى صفحتك المرغوبة

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

نظرًا لأن لديك خيار السحب والإفلات ، فمن السهل جدًا إضافة عنصر واجهة مستخدم في أي صفحة في Elementor.

لعدم إرباكك ، نحن نصف العملية بدقة. يرجى التحقق من GIF أدناه.

الخطوة 2: تخصيص حقول نموذج الاتصال الخاص بك Elementor

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

• اسم
• بريد الالكتروني
• رسالة

بعد الحصول على هذه الحقول الثلاثة افتراضيًا ، حان الوقت الآن لتخصيصها وفقًا لمتطلباتك.

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

هنا ، سوف تقدم مع Form Field . وهي تشمل-

اسم النموذج: اسم النموذج.

حقول النموذج: في هذا الحقل ، يمكنك إضافة ما تريده من الحقول. علاوة على ذلك ، هناك خيارات للنسخ والحذف. لعرض إعدادات كل حقل ، ما عليك سوى النقر عليها. العناصر التي ستحصل عليها هنا هي-

النوع: حدد أي نوع من الحقول. هناك مجموعة من الخيارات-

• نص
• بريد الالكتروني
• تيكستاريا
• URL
• هاتف
• مذياع
• يختار
• خانة اختيار
• قبول
• رقم
• تاريخ
• زمن
• تحميل الملف
• كلمة المرور
• لغة البرمجة
• مختفي
• reCAPTCHA
• reCAPTCHA V3.0
• وعاء العسل

Label: هو اسم الحقل الذي سيعرض في النموذج. بالإضافة إلى ذلك ، ستظهر على البريد الإلكتروني الذي تحصل عليه من العميل أو العملاء المتوقعين.

العنصر النائب: هو اسم عرض الواجهة الأمامية لهذا الحقل.

مطلوب: يمكنك تشغيل حقل أو إيقاف تشغيله كحقل مطلوب. يعني أنه يجب على المستخدم ملء القسم قبل إرسال النموذج.

عرض العمود: في هذا الجزء ، يمكنك ضبط عرض الحقل.

علامة تبويب متقدمة

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

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

الخطوة 3: صمم زر الإرسال

هنا ، يمكنك تخصيص زر الإرسال وفقًا لشروطك الخاصة.

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

قد ترغب أيضًا في قراءة: كيفية إنشاء موقع رياضي باستخدام Elementor

الخطوة 4: تكوين الإجراءات بعد الإرسال

عندما يقوم شخص ما بتصميم نموذج الاتصال Elementor ، يكون لديه سؤال شائع. وهذا هو- لماذا لا يحدث شيء بعد تقديم النموذج؟ حسنًا ، دعنا نكتشف الجواب.

لقد قمت بتعيين Elementor Form بشكل جيد للغاية. لا مشكلة في ذلك. لكن يا صديقي ، إذا لم تقم بإعداد قسم " الإجراءات بعد الإرسال " ،   لن تحصل على أي رد فعل.

مع أشكال Elementor من الإجراءات ، ستحصل على خيارات ممتازة. سيكون الدمج مع خدمات الجهات الخارجية أسهل كثيرًا. يحب-

• تقطر
• Hubspot
• Mailchimp
• تثاقل
• Convertkit ، إلخ

العمل مع هذه الخدمات سهل لأنها تكامل مضمّن لـ Elementor. علاوة على ذلك ، يمكنك الاتصال بـ Zapier ، عبر إجراء Webhook أيضًا. الحقيقة الممتعة هي أن Zapier يمكنه الاتصال بأكثر من 1000 خدمة. لذلك ، سوف يساعدك من خلال العمل كجسر بين الخدمات والشكل.

في الوقت الحالي ، تضيف إجراءات Elementor Forms-

• بريد الالكتروني
• البريد الإلكتروني 2
• Mailchimp
• إعادة توجيه
• الويب هوك
• تقطر
• ActiveCampaign
• تحصل على رد
• برنامج Convertkit
• ميلرلايت
• تثاقل
• الخلاف
• يظهر فجأة

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

لنفترض أنك اخترت إجراء البريد الإلكتروني. سيتضمن علامة تبويب للبريد الإلكتروني ويتم استخدامه لإظهار النتائج إلى المستخدم الإداري للموقع.

لإرسال بريد إلكتروني إلى مستخدم النموذج أو الذي أرسل النموذج ، يجب عليك تحديد خيار Email2 .

في البريد الإلكتروني ، ستحصل على خيارات مثل-

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

قم بتعيين الشروط وتخصيص إجراء النموذج الخاص بك بحيث يمكنه العمل بسلاسة مع موقع الويب الخاص بك.

تحقق من هذه الأسئلة الشائعة الشائعة التي طرحها الأشخاص على Elementor.

الخطوة 5: تخصيص رسائل نموذج جهة اتصال Elementor

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

هنا ، يمكنك تخصيص هذه الرسالة. هذه ميزة متقدمة في نموذج الاتصال Elementor.

لذلك ، انقر فوق خيارات إضافية واجعل الرسائل المخصصة لا إلى نعم.

الآن ، يمكنك تعديل أربع رسائل مختلفة.

• رسالة النجاح: ستظهر هذه الرسالة للمستخدم الذي أكمل النموذج وأرسله بنجاح.
• رسالة الخطأ: تظهر للمستخدم النموذج في حالة حدوث أي خطأ غير معروف أثناء إرسال النموذج.
• الرسالة المطلوبة: تظهر عندما يكون حقل النموذج مطلوبًا ولكن المستخدم لم يملأه ويقدم النموذج.
• رسالة غير صالحة: تظهر عندما يضيف المستخدم أي رقم هاتف محمول أو عنوان بريد إلكتروني غير صالح

الخطوة 6: تخصيص نمط نموذج الاتصال الخاص بك Elementor

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

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

الخطوة 7: انشر نموذج اتصال Elementor

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

تهانينا! لقد فعلتها بنجاح. سيظهر الآن على هذه الصفحة مباشرة ويمكنك جمع المزيد من العملاء المحتملين والمشتركين.

دعنا نلقي نظرة على العرض النهائي لنموذج الاتصال.

الدفع..

كيفية تخصيص تصميم النموذج الخاص بك في Elementor باستخدام Happy Form Widgets مجانًا!

الأفكار النهائية في نموذج الاتصال Elementor

تفو! نأمل أن يكون هذا البرنامج التعليمي قد أوضح كل ارتباكك. في الواقع ، يعتمد إنشاء وتصميم نموذج الاتصال الخاص بك على متطلباتك واختيارك.

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

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

أيضًا ، أخبرنا إذا واجهت أي صعوبات في إنشاء نموذج اتصال Elementor في قسم التعليقات أدناه.

هل جربت HappyAddons لإنشاء موقع ويب جديد تمامًا في غضون بضع دقائق؟ حسنًا ، تحقق من ميزات إضافات Elementor هذه لإضفاء مظهر رائع على موقع الويب الخاص بك.