كيفية إضافة نماذج الاتصال باستخدام البرنامج المساعد - P1: استخدم نموذج الاتصال 7

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

في الجزء الأول من سلسلة "نموذج الاتصال" ، دعنا نكتشف:

• ما هو نموذج الاتصال؟
• فوائد نموذج الاتصال
• كيف تستخدم البرنامج المساعد لنموذج الاتصال 7 لإنشاء نموذج؟

ما هو نموذج الاتصال وفوائده؟

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

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

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

فوائد نموذج الاتصال

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

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

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

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

كيفية إنشاء نموذج الاتصال

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

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

سأوضح لك في جميع مقالات هذه السلسلة كيفية إنشاء استمارة تسجيل جامعية على النحو التالي:

إنشاء نموذج باستخدام نموذج الاتصال 7

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

بادئ ذي بدء ، قم بتنزيل وتثبيت هذا المكون الإضافي من مستودع المكونات الإضافية على wordpress.org ، أو انتقل إلى Dashboard > Plugin > Add New لتثبيته وتنشيطه.

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

المؤلف (المؤلفون): تاكايوكي ميوشي

الإصدار الحالي: 5.5.3

تاريخ التحديث الأخير: ٢٨ نوفمبر ٢٠٢١

contact-form-7.5.5.3.zip

82٪ التقييمات 5،000،000+ مرات التثبيت يتطلب WP 5.7+

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

واجهه المستخدم

انتقل إلى لوحة المعلومات > جهة اتصال > إضافة جديد لإنشاء نموذج اتصال جديد. هذه هي الواجهة التي ستعمل بها:

(1): أدخل اسم نموذج الاتصال
(2): علامات تبويب لإنشاء نموذج اتصال وإعداده ، بما في ذلك:

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

إنشاء حقول لنموذج الاتصال

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

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

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

تعليمات عامة للحقول

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

الاسم : سمة الاسم
القيمة الافتراضية : القيمة الافتراضية للحقل
سمة المعرف : معرف الحقل
سمة الفئة : فئة المجال

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

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

عادة ، سيكون لعلامة كل حقل في نموذج الاتصال الذي تم إنشاؤه باستخدام نموذج الاتصال 7 الهيكل التالي:

 [field * name_attribute id: field_id class: field_class "القيمة الافتراضية للحقل"]

شروحات:

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

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

مع نماذج الاتصال في هذه السلسلة ، أحتاج إلى اختيار الحقول التالية:

جميع الحقول لديها المعلومات المشتركة التي قلتها أعلاه. لذلك ، أنا فقط أرشد الأجزاء المحددة لكل مجال الآن.

فيما يلي تعليمات مفصلة لكل مجال.

قم بإنشاء حقل لإدخال الاسم

حدد حقل النص وأدخل المعلومات الأساسية للحقل في المربع:

في قسم نوع الحقل ، يمكنك اختيار طلب بحيث يكون هذا الحقل إلزاميًا ليتم ملؤه (هذا اختياري).

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

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

قم بإنشاء حقل لإدخال رقم الهاتف

حدد حقل الرقم واملأ المعلومات الأساسية للحقل.

في قسم نوع الحقل ، اختر نوعًا لهذا الحقل. هناك نوعان من الحقول: Spinbox و Slider .

سيعرض شريط التمرير مقياسًا لاختيار الرقم على النحو التالي:

هذا النمط مناسب لتسجيل النقاط أو اختيار الأرقام بناءً على مقياس معين.

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

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

قم بإنشاء حقل لاختيار التخصصات ومواقع الدراسة

باستخدام هذا الحقل ، حدد القائمة المنسدلة .

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

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

قم بإنشاء حقل لاختيار الغرض من التسجيل

حدد خانة الاختيار .

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

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

قم بإنشاء زر التقديم

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

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

أضف تسميات للحقول

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

لذلك ، تحتاج إلى إضافة تسميات إلى الحقول عن طريق إدراج بنية التعليمات البرمجية التالية في جزء HTML من النموذج:

 <label> تسمية الحقل
[علامة الحقل] </label>

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

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

 <label> اسمك (مطلوب)
[text * your-name "أدخل اسمك"] </label> 

<label> رقم هاتفك
[number phone placeholder "أدخل رقم هاتفك"] </label> <label> بريدك الإلكتروني (مطلوب)
[email * your-email "أدخل بريدك الإلكتروني"] </label>

<label> التخصص
[حدد * رئيسي "علوم الكمبيوتر" "اللغويات" "الزراعة" "الهندسة" "التجارة الإلكترونية"] </ label>
<label> مكان للدراسة 
[حدد * موقع الدراسة "نيويورك" "شيكاغو" "لوس أنجلوس" "واشنطن العاصمة" "هيوستن" "فيلادلفيا"] </label>

</label> سجل في
[مربع الاختيار * سجل label_first "دراسة" "قم بجولة" "استشر"] </label>

[إرسال تقديم"]

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

إعدادات نموذج الاتصال

قم بإعداد البريد الإلكتروني

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

شروحات:

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

اعدادات اخرى

علامة تبويب الرسالة

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

علامة التبويب "إعدادات إضافية"

تساعدك علامة التبويب هذه على إضافة مقتطفات التعليمات البرمجية لتثبيت ما يلي:

• وضع المشتركين فقط
• الوضع التجريبي
• تخطي البريد
• القبول كتحقق
• إعدادات فلامنغو
• قمع تخزين الرسائل
• كود جافا سكريبت

هناك بعض الأجزاء المفيدة جدًا التي يجب عليك استخدامها مثل:

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

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

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

تتمثل الخطوة الأخيرة في عرض نموذج الاتصال الذي أنشأته للتو على موقع الويب.

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

ها هي نتائجي النهائية:

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

إذا كنت ترغب في إعادة تصميم نموذج الاتصال مثل النموذج الذي قدمته في بداية هذه المقالة ، فستحتاج إلى تحرير HTML للنموذج على النحو التالي لتسهيل التصميم:

 <div class = "form__field form__full-width">
<label> اسمك (مطلوب)
[text * your-name placeholder "أدخل اسمك"]
</label>
</div>
<div class = "form__field">
<label> رقم هاتفك
[number phone placeholder "أدخل رقم هاتفك"]
</label>
</div>
<div class = "form__field">
<label> بريدك الإلكتروني (مطلوب)
[البريد الإلكتروني * العنصر النائب الخاص بالبريد الإلكتروني "أدخل بريدك الإلكتروني"]
</label>
</div>
<div class = "form__field">
<label> التخصص
[حدد * رئيسي "علوم الكمبيوتر" "اللغويات" "الزراعة" "الهندسة" "التجارة الإلكترونية"]
</label>
</div>
<div class = "form__field">
<label> مكان للدراسة
[حدد * موقع الدراسة "نيويورك" "شيكاغو" "لوس أنجلوس" "واشنطن العاصمة" "هيوستن" "فيلادلفيا"]
</label>
</div>
<div class = "form__field form__full-width">
<label> سجل في
[مربع الاختيار * تسجيل use_label_element "دراسة" "قم بجولة" "استشر"]
</label>
</div>
<div class = "form__field form__full-width">
[أرسل "إرسال"] </div>

ثم انتقل إلى أداة تخصيص المظهر الخاص بك> CSS الإضافية والصق الكود التالي:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

أخيرًا ، انقر فوق " نشر" للحفظ.

الكلمات الأخيرة

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

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