How to Build Elementor Contact Form [دليل المطورين]

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

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

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

لذلك ، من الضروري عمل نموذج اتصال أفضل لموقع ويب. كيفية عمل نموذج اتصال Elementor أفضل؟ هذا ما سنناقشه في هذه المقالة. ابقى معنا.

ما هو نموذج الاتصال في الموقع؟

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

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

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

لماذا يعد وجود نموذج اتصال في موقع الويب الخاص بك أمرًا مهمًا؟

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

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

يضيف نموذج الاتصال الاحتراف إلى الموقع

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

حماية الموقع من رسائل البريد الإلكتروني العشوائية

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

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

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

تجعلك متاحًا طوال الوقت

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

سهل ، يمكنك تعيين رد آلي في نموذج الاتصال. عندما يضغط الزائر على زر الإرسال ، سيتلقى الرسالة على الفور. بهذه الطريقة ، يسهل لك نموذج الاتصال الإجابة على جميع الاستفسارات.

يساعد نموذج الاتصال على جذب المزيد من العملاء المحتملين

بصفتك مالكًا لموقع ويب تجاري ، فإن هدفك هو الحصول على المزيد من العملاء المحتملين على الموقع. لهذا؛ تحتاج إلى نموذج اتصال على موقعك. يسهّل نموذج الاتصال على الزائرين الجدد الوصول إليك.

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

استخدام متعدد الوظائف

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

بناء قائمة التسويق عبر البريد الإلكتروني

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

كيفية بناء نموذج الاتصال Elementor؟

أول الأشياء أولاً ، تأكد من تثبيت وتنشيط Elementor و Elementor Pro. ماذا بعد؟ الآن يمكنك الانتقال إلى عملية التصميم.

الخطوة 01: إضافة أداة جهة اتصال من Elementor Library

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

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

الخطوة 02: قم بإعداد الحقول الضرورية في نموذج الاتصال

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

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

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

الخطوة 03: إضافة أو إزالة الحقول الإضافية من نموذج الاتصال

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

يشير "النوع" إلى نوع الحقل الذي يمكنك إضافته إلى النموذج. يمكن أن يكون النوع نصًا ، أو بريدًا إلكترونيًا ، أو عنوان URL ، أو كلمة مرور ، أو reCAPTCHA ، وما إلى ذلك ، ثم يُظهر "Label" العنصر الموجود أعلى حقل النموذج. "PlaceHolder" هو نص تريد من المستخدم إدخاله.

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

علامة تبويب متقدمة: إلى جانب علامة تبويب المحتوى ، توجد علامة تبويب "خيارات متقدمة". يتضمن القيمة الافتراضية والمعرف والرمز القصير. انظر ، هناك الكثير من الخيارات لك في elementor. يمكنك أيضًا إزالة علامات التبويب بالنقر فوق علامة الإغلاق.

الخطوة 04: قم بإعداد وجهة البيانات من نموذج الاتصال

حان الوقت الآن لتعيين الوجهة حيث تريد أن تذهب المعلومات. انقر فوق خيار "البريد الإلكتروني" لمعرفة الخيارات المتاحة. تشمل الخيارات ؛

• ل
• موضوعات
• رسالة
• من البريد الإلكترونى
• من الاسم
• الرد على
• CC و BCC

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

الخطوة الخامسة: إعداد الرسائل التلقائية لنموذج الاتصال

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

انقر فوق "خيارات إضافية" لتمكين خيار المراسلة المخصصة. بعد ذلك ، انقر على خيار "المراسلة المخصصة" إلى "نعم" ، والذي يسمح بأربعة أنواع مختلفة من الرسائل. الرسائل تشمل ؛

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

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

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

الإعداد 07: انشر نموذج الاتصال الخاص بك

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

أفضل 6 إضافات لعنصر لبناء نموذج اتصال جذاب

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

1. ملحق نموذج الاتصال Droit لـ Elementor - يوفر إضافة Elementor مجانًا مدى الحياة.
2. HubSpot - إنه مكون إضافي مجاني للتسويق عبر الإنترنت يمكنك استخدامه لإضافة النماذج والدردشة الحية والنوافذ المنبثقة وما إلى ذلك.
3. WPForms Plugin - هو الإصدار الأساسي الذي يقدم الكثير من الميزات. يمكنك إنشاء نماذج اتصال أساسية ، ويمكن دمجها بسهولة مع Elementor.
4. نموذج الاتصال 7 - إنه خيار مفيد ومباشر يأتي مع رموز قصيرة مدمجة.
5. Forminator - يأتي بواجهة سهلة الاستخدام. يحتوي المكون الإضافي على أكثر من 2 مليون عملية تثبيت نشطة.
6. نماذج كالديرا - تتضمن مجموعة من الميزات القوية المتاحة مجانًا.

التعليمات: كيفية بناء نموذج الاتصال Elementor؟

تغليف!

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

انظر ، لا يستغرق إنشاء نموذج اتصال ساعات عندما يكون لديك Elementor pro مثبتًا. يمكنك الآن إجراء المزيد من التغييرات في نموذج الاتصال الخاص بك.