نموذج صفحة إتصل بنا بلوجر بإستخدام منصة jotform
سنتعلم اليوم كيفية إنشاء نموذج صفحة اتصال مجاني لبلوجر باستخدام منصة jotform، وشرح كيفية استخدامه كإضافة أو إدراج النموذج في صفحة ثابتة. هذا المقال مكتوب استجابة لطلب عدد من متابعين مينت ويب، بعد توقف نموذج صفحة أتصل بنا السابق عن العمل، بسبب مشكلات تقنية في القوالب الجديدة، وبسبب ان النموذج مصمم للعمل علي دومين بلوجر المجاني فقط، قمت بمشاركة الطريقة التي نستحدمها هنا في مينت ويب لصفحة أتصل بنا.
تم النشر في
وقت القراءة
2 دقيقه للقراءة
مثال في مينت ويب مثال للإداة
سنتعلم اليوم كيفية إنشاء نموذج صفحة اتصال مجاني لبلوجر باستخدام منصة jotform، وشرح كيفية استخدامه كإضافة أو إدراج النموذج في صفحة ثابتة. هذا المقال مكتوب استجابة لطلب عدد من متابعين مينت ويب، بعد توقف نموذج صفحة أتصل بنا السابق عن العمل، بسبب مشكلات تقنية في القوالب الجديدة، وبسبب ان النموذج مصمم للعمل علي دومين بلوجر المجاني فقط، قمت بمشاركة الطريقة التي نستحدمها هنا في مينت ويب لصفحة أتصل بنا.
JotForm
لقد أتيحت لي الفرصة لتجربة عدد كبير من المنصات التي تسمح لنا بإنشاء نموذج صفحة اتصال مجاني ، حتى إذا جربتها مرة أخرى، فما زلت أختار jotform، في الواقع ، هو النموذج الذي أستخدمه في مينت ويب.من بساطتها لإنشاء النماذج، إلى مجموعة كبيرة من الإضافات والتخصيص المذهل، فإن المميزات كثيرة وكلها مجانية.
لدى JotForm أيضًا خطط لتحسين الإصدار المجاني، ومع ذلك، فلن تشعر في أي وقت أن المنصة تضغط عليك للحصول علي النسخة المدفوعة.
إذا كنت تشعر بالحاجة إلى زيادة سعة خطتك المجانية ولكن ليس لديك ما يكفي، يسمح لك jotform بتوسيعها إذا قمت بتنفيذ إجراءات Get More الحصول على المزيد من إعدادات الحساب.
أنا شخصياً أعتبر jotform الخيار الأفضل لـبلوجر عندما يتعلق الأمر بإنشاء النماذج، والأكثر اكتمالاً. إذا كنت ترغب في إنشاء نموذج بنفسك الآن، فيمكنك القيام بذلك ، ولكن إذا كنت ترغب في دمجه مع بلوجر لتحسينه وتطوير التصميمات في مينت ويب ، فأنا أدعوك لمواصلة القراءة.
إنشاء نموذج فارغ
أولاً سنقوم بإنشاء حساب على المنصة.الآن نذهب إلى الصفحة الرئيسية، ونقوم بالضغط على زر "Create From" وفي النافذة المنبثقة ، حدد "Start From Scratch".
في الصفحة التي تليها سنقوم بإختيار (Classic From).
في الصفحة التي تظهر ، سنقوم بالضغط علي (Add Form Element)، ومنها سنضيف عنصر الأسم الكامل "Full Name" إلى النموذج الفارغ على النحو التالي:
سنضيف أيضًا حقل البريد الألكتروني "Email" كما هو موضح في الصورة التالية:
وأهم ما في الأمر ، حقل النص الذي سيسمح للمستخدم بكتابة الرسالة، لهذا نضيف حقل نص طويل "Long Text" ونطلق عليه اسمًا:
لمواجهة الرسائل غير المرغوب فيها، أقترح إضافة اختبار CAPTCHA أو التحقق من النص، هذه نصيحة، وهي ليست إلزامية إذا كنت لا تريدها، ومع ذلك أوصي بها بشدة:
سنقوم بالضغط على مفتاح Ctrl ,وسنقوم بالضغط علي جميع الحقول لتحديدها ، وسيتم عرض قائمة في الجزؤ العلوي ، هناك سنضغط على زر مطلوب "Require" ، وبهذه الطريقة نهدف إلى ملء جميع الحقول وتجنب الرسائل الفارغة.
إذا قمنا بذلك بشكل صحيح ، فيجب أن تحتوي كل حقل من حقولنا على علامة نجمة حمراء ، مما يشير إلى أنه حقل إلزامي للتحقق من صحة النموذج:
سننتقل الآن إلى الإعدادات "Settings" ومنها نختار علامة التبويب إعدادات النموذج "Form Settings"، ثم اضغط على الزر إظهار المزيد من الخيارات "SHOW MORE OPTIONS" وقم بإلغاء تنشيط خِيار بيانات النموذج المشفرة "Encrypt Form Data" كما يلي:
من علامة التبويب البريد "EMAIL" ، يمكننا تكوين المستلمين ، والتنسيق ، والردود ، من بين خيارات أخرى. إذا كنت لا ترغب في تغيير أي شيء ، فاتركه كما هي وسيتم إرسال الرسائل إلى البريد الإلكتروني الذي استخدمته للتسجيل:
من علامة التبويب "صفحة الشكر" ، يمكنك تعديل الصفحة التي يراها المستخدمون عند إرسال رسالة بنجاح. يمكنك أيضًا إنشاء صفحة ثابتة على مدونتك وإضافة الرابط إلى النموذج الخاص بك:
أصيح جاهز، لقد انتهينا من أعداد نموذج صفحة أتصل بنا علي بلوجر، والأن سننتقل إلي المرحلة التالية.
دمج نموذج في بلوجر
يعد إدخال الرمز هو أفضل طريقة للقيام بذلك ، ولهذا سنذهب إلى قسم النشر "Publish" ، و إلى علامة التبويب تضمين "EMBED" حيث سنختار شفرة المصدر "Source Code" ، وأخيرًا اضغط على زر تنزيل شفرة المصدر "Download Source Code" .
نقوم بفك ضغط ملف rar وفتح document.html مع محرر نصوص عادي أو محرر نصوص برمجية. أولاً سنقوم بنسخ كود جافا سكريبت الخاص بالنموذج، الموجود أعلى
</head> و ذلك كما هو موضح في الصورة التالية:
الآن ننتقل إلى لوحة تحكم بلوجر لدينا ، المظهر ، تحرير HTML ولصق الشفرة أعلي الوسم
</body> وننتقل إلي الوسم </head> أعلاه نقوم بلصق الكود التالي:
<link href='//cdn.jsdelivr.net/gh/imintweb/mint-bundle@master/misc/forms/dist/mint-forms.min.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/gh/imintweb/mint-bundle@master/misc/forms/dist/mint-forms.default.min.css' rel='stylesheet'/>
لقد قمت بكتابة الأنماط وتقسيمها إلى وثيقتين لأنه في المستقبل سوف أشارك المزيد من السمات والشيء الوحيد الذي يتعين عليهم القيام به لتثبيتهما هو تغيير اسم المِلَفّ mint-forms.default.min.css.
الآن كل شيء مُعدّ لاستخدام النموذج. إذا لم يكن هناك شيء واضح لك، يمكنك طلب أي شيء في التعليقات.
التثبيت كإداة
لهذا سننشئ أداة HTML / Javascript ومن المحتوى سنقوم بلصق كود html لنموذجنا، يبدأ الكود من<form class="jotform-form"> في وقت لاحق سنضيف فئة</form>
نقوم بحفظ تغييرات الأداة ويمكننا رؤيتها تعمل على المدونة.
التثبيت كصفحة منفصلة
الإجراء هو نفسه ، والفرق الوحيد هو أنه بدلاً من كونها أداة ، سنلصق نموذج الاتصال في صفحة بلوجر ثابتة مع المحرر في وضع HMTL:
إذا قررت استخدامها كصفحة منفصلة ، لكي تحقق مدونتنا أداءً أفضل ، يمكننا تعديل الشفرة.
نأسف لطول المقال ولكن هذه مهم لنشرح جميع الأجزاء لفهم أعمق ، آمل أن يكون هذا شرح اليوم عن نموذج صفحة بنا بلوجر بإستخدام منصة jotform مفيداً لك ، ، وبهذه الطريقة سيساعدون المزيد من الأشخاص وسيساعدني أيضًا كثيرًا.
