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

على الرغم من أن نمط الاتصال الافتراضي لنموذج 7 يكفي لمعظم أشكال الاتصال الأساسية ، فغالبًا ما يتعين عليك تغييره.

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

إذا لم تقم مطلقًا بإنشاء موقع ويب WordPress ، فاكتشف ذلك كيفية تثبيت مدونة WordPress مع عميل FTP

بالنسبة للنموذج القياسي ، الكود الذي تم إنشاؤه بواسطة البرنامج المساعد هو:

[رد] اسمك (مطلوب) [نص * معرف اسمك: اسمك] بريدك الإلكتروني (مطلوب) [بريد إلكتروني * معرف بريدك الإلكتروني: بريدك الإلكتروني] موضوعك [text your-subject id: your-subject] رسالتك [textarea your-message id: your-message] [إرسال "إرسال"]

بعض الإضافات لتخصيص النموذج Contact Form 7

1. نموذج الاتصال 7 Style

البرنامج المساعد نموذج الاتصال 7 Style لديه عدد من الأساليب للاختيار من بينها.

لمستخدمي سمة Twenty Fifteen ، هناك أيضًا نمط متوافق.

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

2. نموذج الاتصال 7 Skins

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

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

هذا ما يبدو عليه شكل الاستطلاع باستخدام نمط Topaz باستخدام سمة Twenty Fifteen.

3. تصميم المواد لنموذج الاتصال

وتستند هذه الأنماط على أسلوب تصميم المواد.

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

هنا مثال مع موضوع هيستيا. لاحظ التسمية العائمة عند نقل المؤشر إلى حقل في النموذج.

نموذج الاتصال 7 اختبار على بعض وورد المواضيع

نموذج الاتصال مع ColorMag وورد الموضوع

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

نموذج الاتصال مع موضوع WordMress ColorMag

هنا هو النموذج دون نمط مخصص. يرث لون الزر الأزرق ColorMag وورد موضوع.

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

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

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

لم يظهر ملف GIF الذي يتم تدويره عند إرسال النموذج بشكل صحيح ، لقد وجدت بديلاً لـ Loading.io وقمت بالإشارة إليه باستخدام CSS.

هنا هو الشكل الناتج:

ها هو الكود:

div.wpcf7 {margin: 0؛ الحشو: 1.5em. الخلفية: url ('your_background_image_url_here') ؛ -Webkit-border-radius: 3px؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛ } .wpcf7 label ، .wpcf7-submit {color: white؛ text-shadow: 1px 1px 0px rgba (40، 157، 204، 1)؛ } .wpcf7 .wpcf7-form-control {10px 0 20px 0؛ } .wpcf7 .wpcf7-submit: hover {background: #186d8e؛ } .wpcf7-form-control: focus {border: 2px solid #289dcc؛ } div.wpcf7-response-output {background: #F8F8F8؛ محاذاة النص: المركز ؛ العرض: 92.5٪ ؛ الهامش: 1em 0em 1em 0em ؛ -Webkit-border-radius: 3px؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛ } span.wpcf7-not-valid-tip {background: #F8F8F8؛ عرض: كتلة مضمنة. العرض: السيارات ؛ الحشو: 1 ٪ ؛ -Webkit-border-radius: 3px؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛ } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here')؛ العرض: 50px ؛ الارتفاع: 50px ؛ }

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

اكتشف أيضًا بدائل 3 المتميزة التي ستساعدك في إنشاء نماذج جهات الاتصال الخاصة بك. 

1. نموذج الاتصال W8

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

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

تحميل | عرض | استضافة المواقع

2. اتصل بنا

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

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

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

تحميل | عرض | استضافة المواقع

3. Slick Popup Pro

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

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

تحميل | عرض | استضافة المواقع

الموارد الموصى بها

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

• 6 WordPress الإضافات للتحقق من CAPTCHA على النماذج الخاصة بك
• كيفية إضافة شكل من أشكال الاتصال مع وورد نموذج الاتصال 7
• كيفية إنشاء نماذج متوافقة مع GDPR على WordPress

وفي الختام

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

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

ولكن في غضون ذلك ، أخبرنا عن ملف تعليقات والاقتراحات في قسم مخصص.

...