إنشاء نموذج اتصال في ووردبريس. إرسال رسالة عبر البريد الإلكتروني

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

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

| تحميل المصادر |

فوائد إنشاء نموذج الاتصال الخاص بك

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

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

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

دعنا ننتقل إلى الكود

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

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

الإصدار: 1.0 المؤلف: Barış Ünver المؤلف URI: http://beyn.org/ */ // هذا السطر من التعليق يحل محل الكود البسيط المذهل الذي سنكتبه. لذلك لا تحتاج حقًا إلى القراءة هذا. ?>

وظيفة مساعد صغيرة: get_the_ip()

كما يمكنك التخمين من اسم الدالة، فإننا نستخدمها للحصول على القيمة الحقيقية عنوان IPالمستخدم، حتى لو "جاء" هذا المستخدم إلينا من خلال خادم وكيل. الحل بالطبع ليس فعالا بنسبة 100% لحماية والحصول على معلومات عن المستخدم، ولكن مع ذلك سنحصل على بعض المعلومات الإضافية عن المستخدم.

سوف نستخدم بشكل أساسي المتغيرات الأخرى $_SERVER: HTTP_X_FORWARDED_FORو HTTP_CLIENT_IP و REMOTE_ADDR. وهنا الكود نفسه:

الدالة wptuts_get_the_ip() ( if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) ( return $_SERVER["HTTP_X_FORWARDED_FOR"]; ) elseif (isset($_SERVER["HTTP_CLIENT_IP"])) ( return $_SERVER["HTTP_CLIENT_IP" ]; ) else ( return $_SERVER["REMOTE_ADDR"]; ) )

رمز قصير

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

الوظيفة wptuts_contact_form_sc($atts) ( // هذا السطر من التعليق أيضًا يحل محل الرمز القصير الرائع والبسيط الذي ينشئ نموذج الاتصال الخاص بنا. ومع ذلك فإنك لا تزال تضيع وقتك في قراءة هذا التعليق. برافو. ) add_shortcode( "جهة الاتصال"، "wptuts_contact_form_sc")؛

سمات الرمز القصير لدينا

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

extract(shortcode_atts(array(// إذا لم تقدم عنوان بريد إلكتروني، فسيقوم الرمز القصير باختيار عنوان البريد الإلكتروني للمسؤول: "email" => get_bloginfo("admin_email"), "subject" => ""، "label_name" => "اسمك"، "label_email" => "عنوان بريدك الإلكتروني"، "label_subject" => "الموضوع"، "label_message" => "رسالتك"، "label_submit" => "إرسال"، // رسالة الخطأ عندما يكون أحد الحقول المطلوبة فارغًا على الأقل: "error_empty" => "يرجى ملء جميع الحقول المطلوبة."، // رسالة الخطأ عندما يكون عنوان البريد الإلكتروني غير صالح : "error_noemail" => "الرجاء إدخال عنوان بريد إلكتروني صالح.", // ورسالة النجاح عند إرسال البريد الإلكتروني: "success" => "شكرًا على بريدك الإلكتروني! سنرد عليك" إليك في أقرب وقت ممكن."), $atts));

تذكر أننا سنشير إلى هذه السمات في الكود الخاص بنا كمتغيرات باسم السمة (على سبيل المثال: $label_submit ).

إرسال رسالة عبر البريد الإلكتروني

هذا هو الجزء الأكثر أهمية في الوظيفة المسؤولة عن إرسال البريد الإلكتروني:

//إذا كان

تم نشر العنصر، قم بتشغيل الكود التالي if ($_SERVER["REQUEST_METHOD"] == "POST") ( $error = false; // قم بتعيين "الحقول المطلوبة" للتحقق $required_fields = array("your_name", "email "، "message"، "subject")؛ // يجلب هذا الجزء كل ما تم نشره، ويعقمه ويسمح لنا باستخدامه كـ $form_data["subject"] foreach ($_POST as $field => $value) ( if (get_magic_quotes_gpc()) ( $value = stripslashes($value); ) $form_data[$field] = strip_tags($value ) // إذا كانت الحقول المطلوبة فارغة، فقم بتبديل $error إلى TRUE وقم بتعيين النص الناتج إلى سمة الرمز القصير المسماة "error_empty" foreach ($required_fields as $required_field) ( $value = Trim($form_data[$required_field]); if (empty($value)) ( $error = true; $result = $error_empty; ) ) // وإذا كان البريد الإلكتروني غير صالح، فقم بتحويل $error إلى TRUE وقم بتعيين نص النتيجة إلى سمة الرمز القصير المسماة "error_noemail" if (! is_email($form_data["email"])) ( $error = true; $result = $error_noemail ) if ($error == false) ( $email_subject = "[" . get_bloginfo("الاسم") . "] " . $form_data["subject"]; $email_message = $form_data["message"] . "nnIP: " . wptuts_get_the_ip(); $headers = "من: " . $form_data["name"] . "<" . $form_data["email"] . ">n"; $headers .= "نوع المحتوى: نص/عادي؛ charset=UTF-8n"; $headers .= "Content-Transfer-Encoding: 8bitn"; wp_mail($email, $email_subject, $email_message, $headers); $result = $success; $sent = true;) // ولكن إذا كان $error لا يزال خطأ، قم بتجميع المتغيرات المنشورة وأرسل البريد الإلكتروني! if ($error == false) ( // احصل على اسم موقع الويب وضعه أمام الموضوع $email_subject = "[ " . get_bloginfo("name") . "] " . $form_data["subject"]; // احصل على الرسالة من النموذج وأضف عنوان IP الخاص بالمستخدم أسفلها $email_message = $form_data["message"] " : " . wptuts_get_the_ip(); // قم بتعيين رؤوس البريد الإلكتروني مع اسم المستخدم وعنوان البريد الإلكتروني وترميز الأحرف $headers = "From: " . $form_data["your_name"] . "<" . $form_data["email"] . ">n"; $headers .= "نوع المحتوى: نص/عادي؛ charset=UTF-8n"; $headers .= "Content-Transfer-Encoding: 8bitn"; // أرسل البريد الإلكتروني باستخدام سمة الرمز القصير المسماة "email" والبيانات المنشورة wp_mail($email, $email_subject, $email_message ، $headers)؛ // وقم بتعيين النص الناتج على سمة الرمز القصير المسماة "success" $result = $success; // ... وقم بتبديل المتغير $sent إلى TRUE $sent = true;

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

هذا الجزء من العمل لا يقل أهمية عن الجزء السابق. بعد كل شيء، هذه هي الطريقة التي يجب أن يرسلها لك الرمز السابق بريد إلكتروني، إذا لم يكن هناك نموذج نفسه لتقديمه؟ :)

// إذا لم يكن هناك نص نتيجة $ (أي أنه لا يوجد خطأ أو نجاح، مما يعني أن المستخدم فتح الصفحة للتو ولم يفعل شيئًا) ليست هناك حاجة لإظهار متغير معلومات $ if ($result != "" ) (معلومات $ = "

" . نتيجة $ ."

"; ) // على أية حال، لنبني النموذج! (تذكر أننا نستخدم سمات الرمز القصير كمتغيرات بأسمائها) $email_form = "

" . $label_name . ":

" . $label_email . ":

" . $label_subject . ":

" . $label_message . ": " . $form_data["message"] . "

";

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

إضافة العودة إلى الرمز القصير

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

إذا ($sent == true) (return $info;) else (return $info .$email_form;)

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

إرجاع معلومات $. $email_form;

كود CSS

وبطبيعة الحال، فإن الكود نفسه لا يبدو مثاليا. دعونا نضيف القليل من السحر CSS. أضف الأسطر التالية إلى كود CSS في ملفك style.css:

تسمية نموذج جهة الاتصال، .إدخال نموذج جهة الاتصال، .منطقة نص نموذج جهة الاتصال ( العرض: كتلة؛ الهامش: 10 بكسل 0؛ ) . تسمية نموذج جهة الاتصال (حجم الخط: أكبر؛ ) .إدخال نموذج جهة الاتصال (الحشوة: 5 بكسل؛ ) #cf_message ( العرض: 90%; الحشو: 10 بكسل; ) #cf_send ( الحشو: 5 بكسل 10 بكسل; )

إذا قمت بكل شيء بشكل صحيح، فسترى شيئًا مشابهًا لما هو موضح في الصورة أدناه:

تهانينا: لقد قمت للتو بإنشاء نموذج الاتصال الخاص بك!

خاتمة

سيعمل نموذج الاتصال البسيط هذا مع معظم مواقع الويب، ولكن إذا كنت تريد إضافتها حقول إضافية، ثم قم بتحريره وإضافة المتغيرات $form_data["name_of_the_new_field"]داخل متغير $email_message(وقد تحتاج أيضًا إلى إضافة اسم الحقل في المصفوفة $required_fields).

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

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

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

إنشاء نموذج

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

بعد تثبيت وتفعيل الإضافة، يظهر قسم كامل في لوحة الإدارة:

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

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

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

عرض النموذج على الموقع

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

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

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

سأحاول أن أشرح بأكبر قدر ممكن من التفاصيل جميع مراحل تثبيت نموذج الاتصال، وفي هذا الصدد، سيكون الدرس طويلا جدا :)

إنشاء نموذج اتصال في ووردبريس

في البداية، أريد أن أشير إلى أن البرنامج المساعد Contact Form 7 هو سكانها ينالون الجنسية الروسية، ولن تواجه أي مشاكل معه. كدليل على كلامي يمكن أن يكون حقيقة أنه تم تنزيل هذا البرنامج المساعد أكثر من 25 مليون مرة!!!

اذا هيا بنا نبدأ. لإنشاء نموذج ردود الفعل عليك القيام بما يلي:

1. قم بتثبيت وتفعيل المكون الإضافي Contact Form 7. كيفية تثبيت الإضافات يمكنك.

2. بعد التفعيل اذهب إلى نموذج الاتصال 7 -> النماذج.

3. في النافذة التي تفتح انسخ السطرمع رمز التضمين.

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

مثله نتيجةبإضافة نموذج اتصال نحصل على:

مستعد!لقد قمت بتثبيت الزي الرسمي للعمل ردود الفعل على موقعك!

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

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

للقيام بذلك، نحتاج إلى أن يحتوي النموذج على الحقول التالية لملءها:

• الاسم (حقل مطلوب)
• اسم العائلة
• الهاتف (حقل مطلوب)
• الحقل مع اختيار الوقت المناسب للاتصال

بعد أن حددنا الحقول، ننتقل إلى إنشاء النموذج:

1. اذهب إلى نموذج الاتصال 7 -> إضافة جديد.

2. في النافذة التي تفتح، انقر فوق الزر "اضف جديد". إذا لزم الأمر، حدد لغة من القائمة المنسدلة أدناه. بواسطة افتراضيا ستكون اللغة الروسية.

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

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

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

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

5. الآن نحن بحاجة إلى إنشاء حقول جديدة: اسم(مطلوب) اسم العائلة, هاتف(مطلوب) وقت مكالمة مناسب.

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

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

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

بعد إضافة حقول الاسم الأول واسم العائلة والهاتف، سيبدو محرر النماذج كما يلي:

7. الآن لنقم بإنشاء الحقل وقت مكالمة مناسب.للقيام بذلك، انقر فوق "إنشاء علامة"و اختار "القائمة المنسدلة".

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

ونتيجة لذلك، يجب أن ينتهي بك الأمر بشيء مثل هذا:

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

بعد قيام المستخدم بتقديم طلب معاودة الاتصال من موقع الويب الخاص بك، سيتم إرسال خطاب إلى البريد الإلكتروني الخاص بكمع هذا المحتوى:

مستعد!هنا أنشأنا معك نموذج طلب معاودة الاتصال من الصفر.

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

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

آمل أن يكون هذا البرنامج التعليمي مفيدًا لك وأنك تفهم المكون الإضافي Contact Form 7.

إذا كانت لديك أي أسئلة أثناء إنشاء النموذج أو لم ينجح شيء ما - اكتب واطرح الأسئلة في التعليقات.

وتذكر ذلك نموذج الملاحظات على الموقع الإلكتروني - سمة مطلوبة في صفحة الاتصال.

مرحبا ايها الاصدقاء! سنتحدث في هذا الدرس عن إنشاء نموذج الملاحظات، أو كما يقول الأشخاص أيضًا "نموذج الاتصال". سنوضح لك اليوم كيف يمكنك إنشاء نموذج ملاحظات سهل وجميل وعملي في بضع دقائق باستخدام المكون الإضافي المفضل لـ Contact Form 7، وسأحاول أن أشرح بأكبر قدر ممكن من التفاصيل جميع مراحل تثبيت نموذج الاتصال، و لذلك سيكون الدرس طويلًا جدًا :) إنشاء نموذج اتصال في WordPress في البداية، أود أن أشير إلى أن المكون الإضافي Contact Form 7 هو سكانها ينالون الجنسية الروسية، ولن تواجه أي مشاكل معه. كدليل على كلامي يمكن أن يكون حقيقة أن هذا البرنامج المساعد ...

مراجعة

التصويت على الدرس

100

درجة

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

يعد نموذج الاتصال مفيدًا للغاية لموقعك - ​​فهو يبقي عنوان بريدك الإلكتروني بعيدًا عن الأنظار (مما يقلل من البريد العشوائي) ويسهل على المستخدمين الاتصال بك مباشرةً عبر الموقع.

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

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

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

قبل أن تبدأ هذا الدليل، سوف تحتاج إلى ما يلي:

• الوصول إلى اللوحة إدارة ووردبريس

الخطوة 1 – تثبيت نموذج الاتصال 7

1. قم بتسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك وانقر فوق الإضافات → إضافة جديدفي قائمة اللوحة اليسرى.
2. يجد نموذج الاتصال 7في البحث وانقر ثَبَّتَ.
3. بعد التثبيت اضغط تفعيللتفعيل البرنامج المساعد.

الخطوة 2 – كيفية إنشاء نموذج الملاحظات

بعد تفعيل البرنامج المساعد، سيتم عرض القائمة اليسرى للوحة قسم جديد نموذج الاتصال 7.

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

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

اعتمادًا على العناصر التي تحددها، يجب أن يبدو الكود الخاص بك كما يلي:

أسمك (مطلوب كتابته) بريدك الالكتروني (مطلوب) موضوع رسالة

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

• * في الكود يعني أن هذا الحقل مطلوب.

الخطوة 3 – إعداد تنسيق الرسالة

عندما يرسل الزائر رسالة عبر نموذج الملاحظات، ستتلقى رسالة تحتوي على اسمه ومعلومات الاتصال به والمحتوى نفسه.

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

مهم!تأكد من إدخال عنوان البريد الإلكتروني الصحيح في الحقل إلى من– هذا هو العنوان الذي سيتم تسليم كافة الرسائل إليه.

الخطوة 4 – إعداد الإخطارات

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

الخطوة 5 – حفظ النموذج ونشره

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

1. حدد الرمز القصير وانسخه
2. الصق الرمز القصير في الصفحة أو المنشور أو الأداة حيث تريد أن يظهر النموذج

1. يجب أن تكون النتيجة شيئا من هذا القبيل

الخطوة 6 – اختبار نموذج الاتصال لـ WordPress

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

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

خاتمة

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

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

تحيات أصدقاء. سيساعد البرنامج التعليمي اليوم موقع WordPress الخاص بك في الحصول على نموذج تعليقات لطيف وعملي. سنفعل ذلك باستخدام المكون الإضافي Contact Form 7. في وقت ما، قضيت الكثير من الوقت في البحث عن نموذج اتصال عادي و بديل جديرلم أجد هذا البرنامج المساعد بعد.

ميزات البرنامج المساعد

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

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

باختصار، البرنامج المساعد هو وظيفية ضخمة.

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

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

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

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

رابعا، إنه ببساطة أنيق وحديث.

تثبيت وتكوين المكون الإضافي Contact form 7

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

إعداد البرنامج المساعد لنموذج الاتصال 7

يتكون إعداد البرنامج المساعد من مرحلتين.

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

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

إذا هيا بنا.

للبدء، في القائمة اليسرى للوحة الإدارة، نجد علامة التبويب نموذج الاتصال 7 ستظهر تحتها قائمة تحتوي على عنصرين - "النماذج" و"إضافة جديد".

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

يتم تقسيم إعدادات النموذج إلى كتل منفصلة. وسوف تنظر فيها بالترتيب.

حظر "اسم النموذج"

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

حظر "قالب النموذج"

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

الحقول المطلوبة مشار إليها بعلامات النجمة. إذا تم ترك هذا الحقل فارغًا، فلن يتم إرسال الرسالة.

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

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

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

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

تشير خانة الاختيار الأولى إلى ما إذا كان الحقل مطلوبًا أم اختياريًا (تضيف علامة النجمة).

بعد إعداد الحقل، سيكون لديك رمزين قصيرين:

• "انسخ هذا الرمز والصقه في قالب النموذج الموجود على اليسار" - يتم إدراج هذا الرمز في رمز النموذج بنفس الطريقة مثل جميع التعليمات البرمجية الأخرى؛
• "والصق الكود التالي في قالب الرسالة أدناه" - سنحتاج إلى هذا الكود لتنسيق الحرف في الكتلة التالية.

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

كتلة "الرسالة"

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

مهمتنا هي تضمين جميع المعلومات الموجودة في الرسالة.

الخطوة الأولى هي الإشارة إلى عنوان البريد الإلكتروني الذي سيتم إرسال الرسالة إليه (يمكن أن يكون أي شيء).

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

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

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

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

وفي النهاية يشار إلى الموقع الذي أرسلت منه الرسالة.

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

أنا أحبه معلومات نصيةيمكن تغيير هذه الكتلة (باستثناء العلامات) حسب رغبتك. يمكنك أيضًا إضافة أي أوصاف وتبديل العلامات وترتيبها بالترتيب الذي يناسبك.

كتلة "الرسالة 2"

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

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

يمكنك إعداد نسخة لإرسالها، على سبيل المثال، إلى مديرك أو محاسبك.

منع "الإشعارات عند إرسال النموذج"

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

تفعيل النموذج

بعد ملء جميع الحقول، ارجع إلى البداية إلى كتلة "اسم النموذج" وانقر على زر "حفظ" الموجود على اليمين.

سيقوم البرنامج المساعد بوضع النموذج الذي قمت بإنشائه في قائمة النماذج النشطة وتعيينه رمز خاصشيء من هذا القبيل:

[ جهة الاتصال - النموذج - 7 معرف = "5464" عنوان = "Verification" ] !}

عن طريق لصق هذا الرمز في أي مكان على موقعك سوف تحصل عليه نموذج جاهزللتواصل مع عملائك المحتملين.

مكافحة البريد العشوائي – Akismet و Captcha

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

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

هناك طريقتان للتخلص من مرسلي البريد العشوائي:

1. ضع كلمة التحقق الإلزامية (يمكن القيام بذلك باستخدام مكون إضافي إضافي - كلمة التحقق البسيطة حقًا).
2. استخدم البرنامج المساعد لمكافحة البريد العشوائي في WordPress - Akismet.

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

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

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

الحماية من البريد العشوائي مع Akismet

1. قم بتثبيت البرنامج الإضافي Akismet على موقعك وقم بتفعيله - .

2. أضف بيانات إضافية إلى علامات نموذج الاتصال:

• أضف في الحقل اسم المؤلف Akismet :المؤلف
• في الميدان مع البريد الإلكتروني المرسلحروف Akismet:author_email
• في حقل عنوان الموقع Akismet:author_url

يجب أن تبدو هذه:

بمجرد حفظ نموذج الاتصال، يجب أن يحظر جميع الرسائل المرسلة من قبل مرسلي البريد العشوائي. يمكنك التحقق من تشغيل الفلتر باستخدام اسم الاختبار الخاص "viagra-test-123؟" – عند إدخاله يجب أن تظهر رسالة خطأ.

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

الحماية من البريد العشوائي باستخدام اختبار CAPTCHA البسيط حقًا

إذا وجدت أن Akismet لا يناسبك (فهو يسمح بمرور الكثير من الرسائل غير المرغوب فيها أو يحظر الرسائل الضرورية)، فيمكنك تمكين اختبار CAPTCHA. وللقيام بذلك، قم بتثبيت البرنامج الإضافي Real Simple CAPTCHA.

افتح نموذج الاتصال المطلوب للتحرير

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

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

وضع نموذج الملاحظات في نافذة منبثقة

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

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

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

ويتم ذلك باستخدام مكون إضافي آخر – Easy FancyBox.

1. قم بتثبيت البرنامج المساعد

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

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

الآن وبعد اكتمال إعداد المكون الإضافي، فلننتقل إلى إعداد زر الملاحظات.

2. الصق الكود في الموقع

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

في موقعك، حيث تريد عرض زر لنموذج الاتصال (في الرأس أو التذييل أو الشريط الجانبي)، أدخل الكود التالي:

< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "نموذج الاتصال"البديل = "نموذج الاتصال"سرك = "http://رابط للصورة"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ جهة الاتصال - النموذج - 7 معرف = "معرف النموذج الخاص بك" العنوان = "اسم النموذج الخاص بك"] < / div > < / div >

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

3. قم بإزالة القيود المفروضة على الرموز القصيرة في الشريط الجانبي

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

لتمكين هذه الوظيفة، تحتاج إلى فتح ملف function.php للتحرير (مباشرة من مشرف ووردبريس) وأدخل الكود التالي قبل قوس الإغلاق "؟>":

add_filter("widget_text", "do_shortcode");

add_filter ("widget_text"، "do_shortcode")؛

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

انتهى بي الأمر بهذا النموذج المنبثق الجميل:

عدة نماذج منبثقة مختلفة في صفحة واحدة

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

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

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

1. يتغير الرابط، قم بتعيين المعلمة href القيمة #contact_form_pop_2
2. قم بتغيير المعرف إلى نفس القيمة #contact_form_pop_2