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

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

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

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

هيا بنا نبدأ.

تنفيذ التصميم مع Divi

بناء قسم رأس ملء الشاشة

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

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

باستخدام Visual Builder ، أضف قسمًا بعرض كامل ووحدة رأس ذات عرض كامل إلى أعلى صفحتك.

قم بتحديث إعدادات Fullwidth Header كما يلي:

خيارات المحتوى

العنوان: [أدخل العنوان؛ حاول أن تكون عنوانًا شخصيًا أكثر من كونه عنوانًا مملًا مثل "نموذج الاقتباس"]
نص العنوان الفرعي: [أدخل نص العنوان الفرعي]

نص الزر رقم 1: [أدخل نص الزر ؛ شيء مثل "أرني" أو "لنفعل هذا"]
عنوان URL للزر رقم 1: #quote (سيُستخدم هذا لمعرّف Anchor CSS الذي سينتقل إلى القسم الذي يحتوي على النموذج أدناه)
عنوان URL لصورة الشعار: [أدخل صورة الشعار]
تراكب الخلفية: rgba (0،0،0،0.7)
صورة الخلفية: [قم بتحميل صورة الخلفية بدقة 1920 × 1080]

خيارات التصميم

توجيه النص والشعار: المركز
جعل ملء الشاشة: نعم
إظهار زر التمرير لأسفل: نعم
الرمز: [اختر أيقونة]
لون أيقونة التمرير لأسفل: # 999999
لون النص: فاتح
خط العنوان: أوبونتو
حجم خط العنوان: 36 بكسل
خط العنوان الفرعي: أوبونتو
حجم خط العنوان الفرعي: 22 بكسل
استخدام الأنماط المخصصة للزر الأول: نعم
حجم نص الزر: 20 بكسل
لون نص الزر: #ffffff
لون خلفية الزر واحد: # e09900؛
لون حدود الزر الأول: # e09900
زر تباعد حرف واحد: 1 بكسل
زر واحد الخط: أوبونتو

احفظ التغييرات

بناء نموذج الاقتباس

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

قم بتحديث إعدادات نموذج الاتصال على النحو التالي.

خيارات المحتوى؟

العنوان: [حدد عنوانًا لنموذج الاتصال الخاص بك أو أضف إرشادات إضافية]
إرسال نص الزر: احصل على عرض أسعار
البريد الإلكتروني: [أدخل عنوان البريد الإلكتروني حيث يجب إرسال الرسائل]
تمكين عنوان URL لإعادة التوجيه: نعم (هذا اختياري ولكنه فكرة جيدة)
عنوان URL لإعادة التوجيه: [أدخل عنوان URL لإعادة التوجيه إلى صفحة شكر مخصصة]

خيارات التصميم

خط العنوان: أوبونتو
حجم خط العنوان: 30 بكسل
تباعد حروف العنوان: 1 بكسل
خط حقل النموذج: Ubuntu
حجم خط حقل النموذج: 24 بكسل
لون نص حقل النموذج: # e09900
نصف قطر حدود الإدخال: 5 بكسل
استخدام الحدود: نعم
لون الحدود: # 999999
عرض الحدود: 1 بكسل
استخدام الأنماط المخصصة للزر: نعم
حجم نص الزر: 24 بكسل
لون نص الزر: #ffffff
لون خلفية الزر: # e09900؛
لون حدود الزر: # e09900
تباعد حرف الزر: 1 بكسل
خط الزر: أوبونتو

خيارات متقدمة (CSS مخصص)

حقل كلمة التحقق:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

نص كلمة التحقق:

Font-size: 24px

احفظ التغييرات

إضافة حقول نموذج الاقتباس

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

مجال الشركة

ضمن حقل "البريد الإلكتروني" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن "خيارات المحتوى" على النحو التالي:

رقم الحقل : شركة
اللقب : ما اسم شركتك؟
الحقل المطلوب : نعم

مجال الخدمة

ضمن حقل "الشركة" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن "خيارات المحتوى" على النحو التالي:

معرف الحقل : الخدمة
Title : كيف يمكننا مساعدتك اليوم؟
النوع : أزرار الاختيار
خيارات :

• إنتاج الموقع
• تطوير التطبيقات
• اتجاه الفن
• صناعة الفيديو

الحقل المطلوب : نعم

مجال الغرض الفني

ضمن حقل "الخدمة" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن خيارات المحتوى على النحو التالي:

معرف الحقل : art_purpose
العنوان : ما نوع الاتجاه الفني الذي تحتاجه؟
النوع : أزرار الاختيار
خيارات :

• تصميم غرافيك
• دعاية
• العلامة التجارية
• التعبئة والتغليف

الحقل المطلوب : نعم
تمكين المنطق الشرطي
العلاقة : أي
القواعد : كيف يمكننا مساعدتك اليوم؟ > يساوي> اتجاه الفن

ملاحظة : يوضح هذا المنطق هذا الحقل عندما يختار المستخدم "اتجاه الفن" من السؤال السابق.

مجال الغرض من الويب

ضمن الحقل "art_purpose" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن "خيارات المحتوى" على النحو التالي:

معرف الحقل : web_purpose
العنوان : ما نوع موقع الويب الذي تحتاجه؟
النوع : أزرار الاختيار
خيارات :

• التجارة الإلكترونية
• مدونة او مذكرة
• التطبيق على شبكة الإنترنت
• الصفحة المقصودة

الحقل المطلوب : نعم
تمكين المنطق الشرطي
العلاقة : أي
القواعد : كيف يمكننا مساعدتك اليوم؟ > يساوي> إنتاج الموقع

ملاحظة : يوضح هذا المنطق هذا الحقل عندما يختار المستخدم "إنتاج الويب" من السؤال السابق.

مجال الفيديو

ضمن حقل "web_purpose" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن "خيارات المحتوى" على النحو التالي:

معرف الحقل : فيديو
العنوان : على أي جهاز تريد عرض الفيديو؟
النوع : أزرار الاختيار
خيارات :

• هاتف محمول
• لوح
• شاشة أو تلفزيون
• كشاف ضوئي

الحقل المطلوب : نعم
تمكين المنطق الشرطي
العلاقة : أي
القواعد : كيف يمكننا مساعدتك اليوم؟ > يساوي> إنشاء الفيديو

ملاحظة : يوضح هذا المنطق هذا الحقل عندما يختار المستخدم "إنشاء الفيديو" من السؤال السابق.

حقل النظام الأساسي للتطبيق

ضمن حقل "الفيديو" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن "خيارات المحتوى" على النحو التالي:

معرف الحقل : app_platform
العنوان : على أي منصة تريد تطوير التطبيق؟
النوع : أزرار الاختيار
خيارات :

• iOS
• ذكري المظهر
• شبابيك
• بلاك بيري

الحقل المطلوب : نعم
تمكين المنطق الشرطي
العلاقة : أي
القواعد : كيف يمكننا مساعدتك اليوم؟ > يساوي> تطوير التطبيقات

ملاحظة : يوضح هذا المنطق هذا الحقل عندما يختار المستخدم "تطوير التطبيق" من السؤال السابق.

مجال الميزانية

ضمن حقل "app_platform" ، أضف حقلاً جديدًا وقم بتحديث الإعدادات ضمن "خيارات المحتوى" على النحو التالي:

معرف الحقل : الميزانية
العنوان : إذا كانت لديك ميزانية في الاعتبار ، فأخبرنا بذلك.
النوع : أزرار الاختيار
خيارات :

• أقل من ألف دولار
• حوالي 5 آلاف دولار
• أكبر من 10 آلاف دولار

الحقل المطلوب : NO
تمكين المنطق الشرطي
العلاقة : أي
القواعد :
كيف يمكننا مساعدتك اليوم؟ > يساوي> تطوير التطبيقات
كيف يمكننا مساعدتك اليوم؟ > يساوي> إنشاء الفيديو
كيف يمكننا مساعدتك اليوم؟ > يساوي> إنتاج الموقع
كيف يمكننا مساعدتك اليوم؟ > يساوي> اتجاه الفن

احفظ التغييرات

أضف معرف Anchor CSS

ارجع وعدّل إعدادات القسم للقسم الذي يحتوي على النموذج. ضمن علامة التبويب خيارات متقدمة ، أدخل "اقتباس" معرّف CSS.

سيتوافق هذا مع عنوان url في رأس fullwidth بحيث يتم تمرير الزر إلى القسم عند النقر فوقه.

قم بتعيين عرض مخصص لعمود نموذج الاقتباس

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

استخدام العرض المخصص: نعم
العرض المخصص: 556 بكسل

تخصيصات تصميم إضافية

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

إذا كنت لا ترغب في تغيير لون تمييز السمة الخاص بك على مستوى الموقع لزر الاختيار ، فانتقل إلى إعدادات الصفحة وأدخل CSS المخصص التالي في علامة التبويب CSS:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

يمكنك أيضًا إضافة CSS التالية لتخصيص نص العنوان للأسئلة التي تحتوي على أزرار اختيار:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

أخيرًا ، يمكنك إضافة حد ذي نمط إلى قوائم أزرار الاختيار لمطابقة نمط النموذج مع CSS التالية:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

هذا كل شيء.

تحقق من النتيجة النهائية:

افكار اخيرة

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

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