كيفية تخصيص نماذج WordPress في Elementor [+ قوالب]

هل ترغب في إنشاء وتخصيص نموذج WordPress الخاص بك في Elementor؟

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

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

أنشئ نموذج WordPress الخاص بك الآن

هل أحتاج إلى Elementor لـ WordPress؟

ليس من الضروري أن تحصل على المكون الإضافي Elementor لموقع WordPress الخاص بك، ولكنه مفيد بشكل لا يصدق.

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

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

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

كيفية تخصيص نماذج ووردبريس في Elementor

تثبيت وتفعيل الإضافات

وغني عن القول أنك ستحتاج إلى كل من WPForms و Elementor لاتباع هذه الخطوات هنا.

ولكننا سنمضي قدمًا ونقول ذلك على أي حال: تأكد من تثبيت وتنشيط المكونات الإضافية WPForms وElementor في لوحة تحكم WordPress الخاصة بك.

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

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

هل تريد المزيد من الإلهام؟ تحقق من هذا الأسلوب المختلف لإضافة نماذج WordPress وتخصيصها في Elementor.

نموذج الاتصال

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

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

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

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

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

دعونا نضغط على + نموذج جديد لإدراج النموذج الخاص بنا في الكتلة.

سيتم بعد ذلك تحميل منشئ WPForms حتى تتمكن من تخصيص النموذج الذي تريد استخدامه في Elementor.

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

ثم حدد قالبًا من المعرض لإنشاء النموذج الخاص بك.

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

بالنسبة لنموذج الاتصال الخاص بنا، سنستخدم قالبًا.

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

سنستخدم قالب نموذج الاتصال البسيط لبناء النموذج الخاص بنا.

يعد هذا أحد قوالب النماذج الأكثر شيوعًا لدينا، لذا نوصيك باستخدامه لجني فوائده أيضًا!

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

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

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

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

في قالب نموذج الاتصال البسيط الخاص بنا، تقول رسالة التأكيد: "شكرًا على اتصالك بنا! سنكون على اتصال معكم قريبا."

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

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

الآن، سوف نعود إلى أداة إنشاء صفحات Elementor.

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

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

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

ما هي أنواع التصميم الذي ستتوصل إليه؟

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

ما عليك سوى النقر على زر النشر الموجود في شريط الأدوات السفلي.

الآن، سنبني على هذه الخطوات لتخصيص المزيد من صفحات النماذج باستخدام Elementor.

نموذج الاشتراك في النشرة الإخبارية

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

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

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

لذلك، سوف نستخدم نموذج نموذج الاشتراك في النشرة الإخبارية.

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

أما بالنسبة لرسالة التأكيد، فقد تم الاعتناء بها مرة أخرى بفضل القالب.

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

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

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

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

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

ثم وجه انتباهك إلى زر الإرسال.

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

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

بعد ذلك، سنصبح أكثر إبداعًا مع جميع خيارات تصميم النماذج في Elementor.

استمارة التسجيل في المخيم

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

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

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

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

بعد ذلك، في منشئ الصفحة Elementor، سنعمل في الإعدادات المتقدمة .

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

انقر فوق علامة التبويب "الخلفية" الموجودة أسفل الإعدادات المتقدمة لإنشاء الخلفية الخاصة بك. وتأكد من أن نوع الخلفية موجود على Classic .

ثم يمكنك تحميل صورة لتكون الخلفية المعروضة في كتلة WPForms.

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

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

نموذج طلب العميل

لا يمكننا كتابة مقال يعرض قوالب النماذج ولا نذكر قوالب نماذج الطلبات الخاصة بنا.

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

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

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

النتيجة النهائية مذهلة وخيارات التخصيص لا حصر لها.

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

أنشئ نموذج WordPress الخاص بك الآن

بعد ذلك، قم بتوصيل نماذج Elementor بجداول بيانات Google

تهانينا! أنت في طريقك لإنشاء نماذج رائعة في Elementor.

الآن، حاول ربط هذه النماذج بجداول بيانات Google. بينما يمكن لـ Elementor تخزين إدخالات النموذج داخل لوحة تحكم WordPress، هناك أوقات قد ترغب فيها في الاحتفاظ بنسخة من إدخالات النموذج والعملاء المتوقعين في ورقة Google.

لذلك، تحقق من البرنامج التعليمي لدينا لمعرفة كيف!

على استعداد لبناء النموذج الخاص بك؟ ابدأ اليوم مع أسهل مكون إضافي لإنشاء النماذج في WordPress. يتضمن WPForms Pro الكثير من القوالب المجانية ويقدم ضمان استعادة الأموال لمدة 14 يومًا.

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