كيفية إنشاء نموذج مخصص في موقع WordPress أو مدونة

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

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

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

فيديو تعليمي

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

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

1. تصميم النموذج:

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

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

• انتقل إلى الصفحات -> إضافة خيار جديد موجود أسفل لوحة معلومات WordPress الخاصة بك.
• أدخل عنوان الصفحة التي تريدها ، مثل "معلومات العميل" أو "تفاصيل العميل".
• انتقل الآن إلى علامة التبويب "HTML" لكتابة كود HTML.
• قم بإنشاء نموذج مخصص في WordPress تريده.
• أضف طريقة "POST" ، امنحها اسمًا "customer_details"
• أضف دالة "form_validation" في خاصية onsubmit لإضافة بعض عمليات التحقق من JavaScript لاحقًا وإعطاء الإجراء.
• الإجراء هو ملف PHP الذي سيتم تنفيذه عند تقديم النموذج.
• في هذه المرحلة ، قد ترغب في إضافة بعض الحقول في النموذج مثل الاسم والبريد الإلكتروني والجنس والعمر وما إلى ذلك وإغلاق النموذج.

يجب أن يبدو الرمز النهائي هكذا

اسمك: <br />
بريدك الإلكتروني: <br />
الجنس: ذكر انثى <br />
عمرك: <br />

2. التحقق من الصحة:

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

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

دالة form_validation () {
/ * تحقق من اسم العميل لإرسال فارغ * /
var customer_name = document.forms [“customer_details”] [“customer_name”]. value ؛
إذا (customer_name == “” || customer_name == null) {
تنبيه ("يجب ملء حقل الاسم") ؛
عودة كاذبة؛
} / * تحقق من البريد الإلكتروني للعميل بحثًا عن تنسيق غير صالح * /
var customer_email = document.forms [“customer_details”] [“customer_email”]. value ؛
var at_position = customer_email.indexOf ("@") ؛
var dot_position = customer_email.lastIndexOf (“.”) ؛
إذا (at_position & lt؛ 1 || dot_position = customer_email.length) {
تنبيه ("عنوان البريد الإلكتروني المقدم غير صالح.") ؛
عودة كاذبة؛
}
}

سيؤدي هذا إلى التحقق والتحقق من اسم العميل وعنوان البريد الإلكتروني. أضف هذا الرمز بعد. لذلك ، سيبدو الرمز الكامل في WordPress كما يلي-

اسمك: <br />
بريدك الإلكتروني: <br />
الجنس: ذكر انثى <br />
عمرك: <br />


دالة form_validation () {
/ * تحقق من اسم العميل لإرسال فارغ * /
var customer_name = document.forms [“customer_details”] [“customer_name”]. value ؛
إذا (customer_name == “” || customer_name == null) {
تنبيه ("يجب ملء حقل الاسم") ؛
عودة كاذبة؛
}
/ * تحقق من البريد الإلكتروني للعميل بحثًا عن تنسيق غير صالح * /
var customer_email = document.forms [“customer_details”] [“customer_email”]. value ؛
var at_position = customer_email.indexOf ("@") ؛
var dot_position = customer_email.lastIndexOf (“.”) ؛
إذا (at_position & lt؛ 1 || dot_position = customer_email.length) {
تنبيه ("عنوان البريد الإلكتروني المقدم غير صالح.") ؛
عودة كاذبة؛
}
}

الآن ، كل ما تبقى لك هو نشر الصفحة وهذا من شأنه أن يؤدي إلى الحيلة بشكل فعال.

3. البرامج النصية من جانب الخادم:

هل تتذكر الجزء الذي ذكرنا فيه "customer details.php"؟ حسنًا ، لقد حان الوقت لحضور هذا الجزء أيضًا.
افتح برنامج Notepad أو محرر النصوص المفضل لديك واكتب الكود الموضح أدناه واحفظ الملف كـ customer-details.php في سطح المكتب.

أولاً ، قم بالإعلان عن بعض المتغيرات المسماة $ customer_name ، و $ customer_email ، و $ customer_sex ، و $ customer_age ، وتعيين القيم إلى الحقول الخاصة التي يرسلها نموذج HTML.

على سبيل المثال ، $ customer_name = $ _POST [“customer_name”] سوف يمسك القيمة من نموذج HTML عن طريق طريقة POST ويخصصها للمتغير $ customer_name.

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

قم بتنزيل wp-config.php من تثبيت WordPress على سطح المكتب باستخدام عميل FTP المفضل لديك مثل FileZilla. افتح ملف wp-config.php باستخدام محرر النصوص المفضل لديك مثل Notepad وستجد إعدادات قاعدة البيانات المطلوبة.

بعد اتصال قاعدة البيانات ، أدخل البيانات التي تم جمعها من النموذج في قاعدة بيانات WordPress باستخدام mysqli_query.

هناك خطوة اختيارية في كود PHP هذا.

إذا كنت ترغب في إظهار بعض الرسائل للمستخدم بعد إرسال النموذج أو تريد إعادة توجيه المستخدم إلى صفحة أخرى ، يمكنك إضافة العنوان (“الموقع:”) إلى الكود. ستحتاج إلى إنشاء صفحة نجاح لهذا لاحقًا.

لذلك ، ستبدو تفاصيل العميل الكاملة .php مثل

// احصل على البيانات
$ customer_name = $ _POST [“customer_name”] ؛
$ customer_email = $ _POST [“customer_email”] ؛
$ customer_sex = $ _POST [“customer_sex”] ؛
$ customer_age = $ _POST [“customer_age”] ؛ // اتصال قاعدة البيانات
$ conn = mysqli_connect (“مضيف قاعدة البيانات” ، “اسم مستخدم قاعدة البيانات” ، “كلمة مرور قاعدة البيانات” ، “اسم قاعدة البيانات”) ؛
إذا (! $ conn) {
يموت ('مشكلة في اتصال قاعدة البيانات:'. mysql_error ()) ؛
}
// إدخال البيانات في قاعدة البيانات
$ query = "INSERT INTO" اسم قاعدة البيانات "." اسم الجدول "('customer_name'، 'customer_email'، 'customer_sex'، 'customer_age') VALUES ($ customer_name ، $ customer_email ، $ customer_sex ، $ customer_age)" ؛
mysqli_query ($ conn، $ query) ؛

// إعادة التوجيه إلى صفحة النجاح
header (“الموقع:“)؛

قم بتحميل ملف customer-details.php هذا إلى مجلد السمات باستخدام عميل FTP المفضل لديك.

4. النجاح:

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

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

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

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

من المهم ألا يبدو نموذج الاتصال الخاص بك عدوانيًا جدًا أو تدخليًا لهذه المسألة ، بحيث يمكن أن يساعد في زيادة معدلات التحويل هذه.

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

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

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

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

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