20 نصيحة لتصميم نماذج ووردبريس | اجعل نماذجك جاهزة للتحويل
نشرت: 2018-11-13تعد صفحة الاتصال جزءًا أساسيًا من كل موقع ويب رائع. بأكثر من طريقة - يعتمد عليها المزيد من المشاركة وتحسين تجربة المستخدم. وبالتالي ، تحتاج نماذج WordPress إلى الحصول على نفس القدر من الاهتمام مثل الأجزاء الأخرى من موقع الويب الخاص بك.
يحب المستخدمون ملء نموذج مصمم بشكل جيد ومنظم بشكل جميل وسهل الفهم. علاوة على ذلك ، فإن تصميم نموذج الاتصال يكون غير معقد إلى حد ما إذا كنت على اتصال بالأداة المناسبة.
يحتاج تصميم النموذج الغزير إلى شيئين: المعلومات التي تريد جمعها من الزوار والتصميم الذي تريد إقناع المستخدمين به. بالنسبة إلى موقع HTML الثابت ، تحتاج إلى إنشاء نموذج جهة الاتصال يدويًا ، بينما في WordPress ، يمكنك القيام بذلك بكفاءة أكبر.
لماذا نحتاج إلى نموذج اتصال جيد لموقعك على الويب؟
بالنسبة لجميع مواقع الويب ، يعد نموذج الاتصال أمرًا ضروريًا لبناء جمهور مخلص. إذا كنت تدير مدونة شخصية ، فقد يرغب القراء في التواصل معك من خلال الاستفسارات. كلما تمكنت من تلبية احتياجاتهم ، زادت الفائدة التي يمكنك تحقيقها.
في حالة وجود موقع ويب خاص بالعمل ، يحتاج العملاء إلى دعم للخدمات التي قاموا بشرائها. أو ، الأهم من ذلك ، قد يطرح عليك عملاؤك المحتملون أسئلة قبل شراء شيء ما. في كلتا الحالتين ، يمكن للمستخدمين الاتصال بك في أي وقت يريدون.
قبل كل شيء ، تسمح نماذج الاتصال للمستخدمين بالتواصل مع مشرفي المواقع مباشرة دون أي عائق. يمنحهم شعورًا بالتواصل الخاص والآمن. لسوء الحظ ، لا يركز العديد من مشرفي المواقع على صفحات الاتصال الخاصة بهم.
ضع في اعتبارك أن صفحة الاتصال هي أداة رائعة لجمع العملاء المحتملين. إذا كنت تشعر أنك لا تحصل على مخرجات كافية منه ، فستساعدك هذه المقالة. لقد قمنا بتجميع قائمة من الاقتراحات لجعل النموذج الخاص بك بارزًا على بعد ميل.
اقرأ معًا للتعرف على تصميم نماذج WordPress وتأكد من أن النموذج الخاص بك جاهز لتعزيز التحويل الكلي.
كيفية إنشاء صفحة نموذج الاتصال في WordPress؟
يعد WordPress أحد أكثر أنظمة إدارة المحتوى استخدامًا عبر الإنترنت ، وذلك بفضل مرونته وأفق الاحتمالات. مجموعة ميزاته القوية ، للأسف ، لا تجلب نموذج اتصال بالداخل. عليك أن تصنعها بنفسك لأن عملك لا يمكن أن يستمر بدونه.
يمكن أن يقلل المكون الإضافي لنموذج الاتصال من جهدك ويساعدك على إنشاء نموذج وظيفي ومحسن وجاهز للتحويل في لحظة. Fluent Forms هو مكون إضافي مجاني منشئ نماذج WordPress يأتي مع مجموعة واسعة من حقول الإدخال والوظائف لإنشاء أنواع متعددة من نماذج الاتصال.
نوصي باستخدام Fluent Forms لأن فريقنا قام ببنائه بعناية لجعله البرنامج المساعد لنماذج الاتصال الأكثر سهولة للمستخدمين من جميع المستويات. يمكنك الحصول على الإصدار المجاني من wordpress.org وإضافة WP Fluent Forms Pro من موقعنا على الإنترنت.
يتوفر دليل تفصيلي حول كيفية إنشاء نموذج اتصال جديد في وثائقنا. باتباع التعليمات المذكورة هناك ، يمكن لأي شخص بناء نموذج رائع. نفترض ، بمساعدتها ، أنك قد أنشأت نموذج اتصال بنجاح.
ألقِ نظرة الآن على أفضل ممارسات تصميم نماذج WordPress لتعزيز تحويلاتك وإقناع المزيد من المستخدمين.
نصائح لتصميم نماذج ووردبريس
هذه ليست اقتراحات عشوائية أجمعها من الإنترنت. أعمل في صناعة WordPress منذ أكثر من 10 سنوات ولدي اتصال قوي بمنشئي نماذج WordPress. أعرف ما الذي يعمل بشكل أفضل ، وما يبدو أنه يعمل ولكنه في الواقع لا يعمل. دون مزيد من اللغط ، انتقل إلى المناقشة.
اجعل استماراتك بسيطة ومباشرة
تريد أن تبرز النماذج الخاصة بك عن غيرها. اهتم بالتصميم لضمان قيام المستخدمين بتعبئة النموذج بحماس. اجعل النموذج بسيطًا ويجب أن يتبعه تصميم الصفحة. وإلا فسيكون من الصعب جذب انتباه المستخدم إلى النموذج.
إذا كنت تقصر في الأفكار ، فحاول بناء نموذج بعد الحصول على الإلهام
تجنب الحقول الزائدة عن الحاجة
يعد توخي الحذر في إنشاء النموذج أمرًا مهمًا لأن حجم المبيعات يعتمد عليه في معظم الأوقات. ليس من المخالفة أن تضيف العديد من الحقول كما تريد ؛ لكن تذكر أن الحقول الإضافية تتطلب وقتًا إضافيًا من جانب المستخدم. يمكن أن يتسبب فقد المستخدم للصبر في خسارة إكمال النموذج.
ومن ثم ، من المهم دمج الحقول الضرورية فقط وتجاهل الحقول ذات القيمة القليلة. اطرح الأسئلة الأكثر صلة ، لأنه من المرجح أن يستجيب المستخدمون بشكل أفضل لنموذج يحتوي على عدد أقل من حقول الإدخال.
استخدم نماذج متعددة الخطوات إذا كان النموذج الخاص بك طويلاً
هناك أسطورة مستمرة بين الأشكال ذات الخطوة الواحدة والمتعددة الخطوات. يعتقد بعض الخبراء أن النماذج ذات الخطوة الواحدة أفضل ، بينما يرى البعض الآخر وجهة نظر معاكسة. كلا النوعين من الأشكال لها مزاياها وعيوبها. في بعض الأحيان يكون من الضروري استخدام نموذج متعدد الخطوات ونفس الشيء ينطبق على نموذج الخطوة الواحدة.
يرغب المستخدمون عبر الإنترنت في إنجاز الكثير من الأشياء في غضون فترة زمنية أقصر. أيضًا ، من غير المرجح أن يقضوا الكثير من الوقت على صفحة ويب واحدة. لتحقيق هدفك باستخدام النماذج ، تحتاج إلى توجيههم بشكل صحيح. تعمل النماذج متعددة الخطوات بشكل أفضل عندما يكون النموذج طويلاً للغاية ، ويتطلب مزيدًا من الوقت لإكماله ، وعادةً ما يجمع أنواعًا متعددة من بيانات المستخدم.
المنطق الشرطي لمزيد من التحكم
في كثير من الحالات ، قد تكون بعض حقول النموذج غير ضرورية لمستخدمين معينين. إنها ممارسة جيدة لإخفاء العناصر غير الضرورية حتى يتمكن المستخدمون من المرور عبر الحقول الأساسية فقط. يسمح لك المنطق الشرطي بإخفاء وإظهار العناصر الموجودة في طريقك.
أفضل جزء هو أنه يتعين على المستخدمين فقط ملء بعض الحقول والتحكم في يدك. إذا لم يكونوا مؤهلين لبعض الخيارات ، فلا تعرض لهم هذه الميزات. ل
التحقق المضمن للتخفيف من الارتباك
ليس من الجيد إعطاء تحذير عندما يكون المستخدمون على وشك إرسال النموذج (بينما أمضوا بعض الوقت في إكماله). بدلا من ذلك يجب عليك وضع التحقق من الصحة المضمنة. توفر لهم معرفة ما يحدث في الوقت الفعلي تجربة أكثر سلاسة.
ولكن أفضل ممارسة مع التحقق المضمن هي أنه لا ينبغي إزعاج المستخدمين على الفور. على الأقل ، يجب أن يظهر التحقق مباشرة بعد إكمال الحقل. يمكنك إعطاء بعض التلميحات أثناء إنشاء كلمة مرور مثل "يجب أن تكون كلمة مرورك مزيجًا من الأحرف والأرقام" أو اسم المستخدم (بعض الأفكار التي تم إنشاؤها مسبقًا بناءً على اسم المستخدم أو البريد الإلكتروني).
العنوان والخريطة ورقم الهاتف
بينما يعرف المستخدمون أنه يمكنهم الوصول إليك من خلال نموذج الاتصال ، من المفيد أيضًا توفير طريقة بديلة للاتصال. سيساعدهم ذلك في العثور على الخيار الأكثر ملاءمة للتواصل. في بعض الأحيان يحتاجون إلى الحصول على رد عاجل ولا يمكن لنموذج الاتصال الخاص بك أن يؤكد ذلك.
على الرغم من أن نشاطك التجاري متصل بالإنترنت ، فإنه يميل إلى تعزيز مشاركة أفضل إذا أضفت عنوانًا محليًا باستخدام خرائط Google (أو خريطة مخصصة). ذكر الناس أنك موجود في الواقع ، وأنه يمكن الوصول إليك. الى جانب ذلك ، مضيفا
أعلى محاذاة التسميات
يمكن وضع الملصقات في أي مكان ولا توجد قاعدة صارمة وسريعة لذلك. تميل النماذج ذات التسميات المحاذية لأعلى إلى تحويل أعلى من النماذج ذات التسميات المحاذاة إلى اليسار . علاوة على ذلك ، تبدو الملصقات المحاذاة لأعلى جيدة على شاشات الجوال أيضًا.
بالنسبة لمتطلبات البيانات الكبيرة ، يمكنك استخدام ملصقات المحاذاة لليسار لأنها تساعد المستخدمين على المسح الضوئي بسهولة. علاوة على ذلك ، فإنها تستهلك مساحة أقل مما يقلل الارتفاع غير الضروري للشكل. بالنسبة للنماذج الصغيرة أو ذات الخطوة الواحدة ، تكون تسميات المحاذاة العلوية أكثر وضوحًا.
اجعل CTA جريئة وجذابة
عبارة الحث على اتخاذ إجراء هي الجزء الذي يخبرك بالمكان الذي تريد أن ينقر عليه المستخدمون في النهاية. اجعلها تبدو جريئة حتى تتمكن من لفت انتباه المستخدم إليها. الأساسي والثانوي ، زران منفصلان يجلبان مخرجات أكثر فاعلية لأن الغرض منهما مختلف بشكل كبير.
أيضًا ، لون زر الحث على الشراء مهم لإعطاء الأولوية. تنجذب عيون الإنسان إلى الألوان الزاهية. دعنا نقرر اللون بناءً على مخطط التصميم العام الخاص بك ولكن ضع في اعتبارك أي شيء غامق.
reCaptcha لمنع روبوتات البريد العشوائي
يعتبر جعل النماذج الخاصة بك آمنة من البريد العشوائي نقطة مهمة أخرى. لحسن الحظ ، هناك طرق تعلم للقيام بذلك وأحدها هو reCaptcha من Google. على الرغم من أنه ليس جدار الحماية النهائي ، إلا أنه لا يزال يتمتع بميزة رائعة من حيث حفظ النموذج من التعرض للهجوم من قبل برامج التتبع غير المرغوب فيها.
وجدت العديد من الدراسات أن بعض المستخدمين يأخذون رموز التحقق بشكل سلبي. طالما أنه لا يتطلب سوى نقرة على مربع الاختيار ، فلن يشعر المستخدمون بالإحباط كثيرًا. الأمن يأتي في المقام الأول
تجنب كل الأحرف الكبيرة
أثناء تعيين نص العنصر النائب وتسميات الحقول ، تجنب كل الأحرف الكبيرة. لأن جميع القبعات يصعب مسحها بالنظر إلى ما هو مريح للعين. من الواضح أن حالة الجملة هي الشكل الأكثر قابلية للقراءة ونحن جميعًا معتادون عليها نظرًا لأننا نقرأ جميع النصوص تقريبًا بهذا التنسيق.
إنه مجرد نص ويجب أن يشعر بهذه الطريقة. لا تجعل الأمر صعبًا على المستخدمين.
الروابط الاجتماعية تحت النماذج
مهما كان ما تفعله عبر الإنترنت ، يجب أن تكسب قاعدة ثقة قوية من بين المستخدمين لديك. بهذه الطريقة ستستمر الأعمال لفترة أطول ويمكن تحقيق الولاء تمامًا. إلى جانب الاتصال بك من خلال نماذج الاتصال ، قد يفضل بعض المستخدمين التواصل معك عبر قنوات التواصل الاجتماعي.
قبل كل شيء ، يمكن أن توفر المنصات الاجتماعية مثل Facebook و Twitter شعورًا بالراحة. عند رؤية نشاطك هناك ، يمكن بسهولة إقناع المستخدمين بالاتصال بك. يبدو أنه أسهل وأكثر حيوية مقارنة بنموذج الاتصال.
خيار الاشتراك
هل تريد المزيد من المشتركين في قائمة البريد الإلكتروني الخاصة بك؟ يجب عليك استخدام التقيد في الأماكن البارزة في موقع الويب الخاص بك. ويمكن أن يكون النموذج مكانًا جيدًا لمطالبة المستخدمين بوضع عناوين بريدهم الإلكتروني لتلقي تحديثات منتظمة.
للقيام بذلك ، أضف خانة اختيار أسفل النموذج الذي يطلب الإذن من المستخدمين إذا كانوا يريدون الانضمام إلى القائمة. يمكن أن يكون إنشاء قائمة بريد إلكتروني مصدرًا كبيرًا لحركة المرور المحتملة والعملاء الموثوق بهم. لنمنح المستخدمين شعورًا بتزايد الاتصال.
الأسئلة الشائعة والموارد الأخرى
إذا كنت قد بدأت للتو ، فقد لا تجد صعوبة في الرد على جميع الاستفسارات التي قدمها عملاؤك. ستبدأ بالملاحظة بعد فترة من الوقت ، يسأل الكثير من الأشخاص نفس الأشياء أو تختلف الأسئلة قليلاً. تشتمل العديد من مواقع الويب الشهيرة على قسم الأسئلة الشائعة حتى يتمكن المستخدمون من الإجابة على أسئلتهم بسهولة.
إلى جانب إضافة الأسئلة الشائعة ، يمكنك تعيين رابط للموارد الإضافية. على سبيل المثال ، إذا كان لديك وثائق وأدلة حول مواضيع مختلفة ، فدع الزوار يعرفون أنها موجودة قبل أن يرسلوا نموذجًا.
أفضل إذا كنت تعرف CSS
ما تراه على الإنترنت هو نتيجة CSS. لإلقاء نظرة مثيرة للاهتمام على صفحة ويب مسطحة ، لا شيء أقوى من CSS. إذا كنت خبيرًا أو لديك بعض المعرفة بـ CSS ، فيمكنك تعديل النموذج بتصميم جذاب بصريًا.
إذا كنت لا تعرف كيفية التصميم باستخدام CSS ، فيمكنك تعلمه عبر الإنترنت. هناك الآلاف من الموارد المجانية المتاحة للبدء على الفور. حسنًا ، ليس من الضروري تعلم CSS ، ولكن إذا كان بإمكانك تعديل الأكواد ، يمكنك تصميم نموذج أفضل يلهم الملايين.
أيضًا ، تسمح العديد من الإضافات الشائعة لمنشئي النماذج مثل نماذج Fluent للمستخدمين بتضمين CSS إضافي والذي يغير ببساطة التصميم الحالي بطريقتك.
التجمع لمجالات مماثلة
من السهل فهم ما إذا كانت جميع حقول البيانات الدلالية مرتبة ضمن مجموعة واحدة. لمزيد من التوضيح ، يمكنك الاحتفاظ بالاسم ورقم الهاتف وعنوان البريد الإلكتروني في قسم يسمى التفاصيل الشخصية. وبالمثل ، يجب ملء قسم الدفع برقم البطاقة وتاريخ انتهاء صلاحية البطاقة.
في حالة الشكل الطويل ، هناك فرصة كبيرة لأن يشعر المستخدمون بالارتباك. ولكن ، إذا قمت بإنشاء مجموعات بقاعدة منطقية ، فقد يزيد معدل إكمال النموذج بشكل أسرع لأنه يمنح المستخدمين فهمًا سهلاً للبيانات المطلوبة.
أضف بعض المعلومات التي يجب أن يعرفها المستخدمون
اجعل نموذج الاتصال الخاص بك مرحبًا. ليس الأمر كما لو كنت تجبر المستخدمين على إدخال بياناتهم. إذا كان ذلك ممكنًا ، فقم بتعيين رسالة مهذبة لدعوتهم للتواصل معك. أخبرهم أيضًا بالأغراض التي يمكنهم من خلالها الاتصال بك.
ليس إلزاميًا ولكنه ممارسة جيدة لإرشاد المستخدمين ببعض المعلومات الأساسية قبل إرسال طلب الاتصال. للتوضيح ، يمكنك الاحتفاظ بنموذج دعم فقط للعملاء الحاليين ونموذج اتصال عام للجميع. علاوة على ذلك ، يمكنك ذكر المدة التي قد يتعين عليهم الانتظار فيها للحصول على رد منك.
قم بتضمين رسالة شكر
إن التقدير والاعتراف البسيط يجعلان المستخدمين يثقون في نظامك. يتطلب وقتًا لملء نموذج. بعد الانتهاء من ذلك ، قد يكونون أكثر سعادة لرؤية ملاحظة تقول شيئًا مثل "شكرًا لك على الاتصال بنا. سنصل إلى استفسارك قريبًا. "
من خلال هذه الطريقة ، يمكنك أيضًا التأكيد لهم أن النموذج قد تم استلامه من قبل السلطة. بدلاً من ذلك ، يمكنك إعادة توجيه المستخدمين إلى صفحة جديدة حيث تحتفظ ببعض العروض لهم. أو ، إذا نقلتهم إلى موارد إضافية ، فقد يجدونها مفيدة ؛ مما قد يكون بالطبع إشارة رائعة لمزيد من التحويل.
ضع علامة النجمة للحقول الإلزامية
يجب أن يعرف المستخدمون الحقول الإلزامية وأيها اختيارية. لتوفير الوقت والجهد ، قد يرغبون في تخطي الحقول الاختيارية. هذا هو السبب في ضرورة تمييز الحقول الإجبارية بوضوح. تستخدم العديد من النماذج العلامات النجمية للإشارة إلى الحقول المطلوبة.
حسنًا ، هناك مشكلة أخرى - قد لا يفهم بعض الأشخاص (الذين ليسوا على دراية كبيرة بنماذج الاتصال) ما ترمز إليه علامة النجمة (*). بالنسبة لهم وللجميع ، يمكنك تحديد الحقول الاختيارية التي تشير إلى أن جميع الحقول الأخرى إلزامية.
اجعل بعض المرح إذا استطعت
ليس عليك بالضرورة أن تكون جادًا جدًا مع النموذج. يمكن أن تشعر بمزيد من الجاذبية إذا تم تقديمها بطريقة محادثة عن طريق إضافة بعض التفاصيل. دع المستخدمين يشعرون بجو علامتك التجارية. مع بعض الرسومات ،
نص واضح لزر الإرسال
عندما يصل المستخدمون إلى نهاية النموذج ، يجب أن يعرفوا ما سيحدث بعد ذلك. يجب أن يصف الزر الإجراء بدقة. فكرة جيدة هي تحسين ما هو مكتوب في CTA ، أو إضافة سطر من النص لتوضيح ما يمكن توقعه. تؤكد العبارة المكونة من كلمتين أو ثلاث كلمات مثل "الحصول على حق الوصول المبكر" على زيادة التحويل. اجعلها وصفية ، اجعلها واضحة. لا تترك المستخدمين في الظلام.
القوالب التي تم إنشاؤها مسبقًا مفيدة
تعد قوالب النماذج الجاهزة فعالة للغاية فيما يتعلق بالعمل السهل. أيضًا ، يمكنهم المساعدة ببعض الإلهام لإنشاء نموذج رائع. يحتوي Fluent Forms على ثلاثة نماذج تم إنشاؤها مسبقًا لاستخدامها على الفور. إذا كنت تستخدم مكونات WordPress الإضافية لإنشاء النماذج ، فابحث عن المكونات الإضافية مع القوالب. في حال لم تكن لديك فكرة عن الحقول التي يجب تضمينها ، يمكن للنماذج الجاهزة للاستخدام تحسين العملية.
نص المساعد وتلميحات الأدوات والعنصر النائب
لا تتوقع أن يتعرف كل مستخدم على نماذج الويب. يمكن أن يشعر عدد من الأشخاص بالحيرة تجاه ما يكتبونه أو ما هو الإصدار الصحيح لمدخل معين. النص المساعد والعناصر النائبة - يمكن أن يكون كلاهما مفيدًا للغاية لإظهار المستخدمين بالطريقة الصحيحة.
هدفك هو جعل النموذج غير مزعج لجميع المستخدمين. تؤدي إضافة عناصر نائبة إلى تسهيل فهم النماذج وتعبئتها بشكل أسرع. تعتبر تلميحات الأدوات أيضًا بعض رجال الإنقاذ الرائعين لتوضيح العناصر المعقدة. العناصر النائبة ، ومع ذلك ، يوصى بشدة. بين النسخ المساعد وتلميحات الأدوات - حدد ما يجب استخدامه بناءً على محنتك.
المكافأة: استخدام التقويمات التلقائية لاختيار التاريخ والشهر والسنة
يمكن للمستخدمين ملء التاريخ بحرية. حسنا. ومع ذلك ، إذا وفرت لهم خيارًا منظمًا وسهلاً ، فسيكون ذلك أكثر فعالية. تعني إضافة تقويم أنه عندما ينقر المستخدمون على حقل التاريخ ، سيحصلون على تقويم منبثق. من هناك يمكنهم اختيار التاريخ بسهولة مع الشهر واليوم بنقرة واحدة. لا يتطلب أي كتابة يدوية وهو خيار سهل الاستخدام أيضًا.
تحرك للأمام
باختصار ، تُستخدم نصائح وحيل تصميم النموذج لتسريع عملية تحويل النموذج. آمل أن تستخدم هذه النصائح لتعزيز نماذجك بتصميمات رائعة ووظائف مذهلة.
إذا كان موقعك على WordPress ، فسيكون لديك الكثير من الخيارات لإنشاء نموذج اتصال دون أي تعقيدات. حتى إضافات WordPress المجانية يمكن أن تمنحك النتيجة حسب رغبتك.
لا تدع البرنامج المساعد يقرر ما يجب فعله وما لا يجب فعله. أنت الذي ستقدم النموذج لجمهورك. إنه الشكل الذي يقدم علامتك التجارية.
تهدف هذه المقالة إلى تقديم بعض الاختراقات المفيدة في التصميم مع تصميم النموذج بحيث يحبها المستخدمون وبالتالي يمكن تحويلها.
WP Fluent Forms Pro
جرب نماذج فلوينت اليوم وانظر بنفسك!
أصدر WPManageNinja عددًا من المكونات الإضافية لمساعدة محبي WordPress. اكتسبت NinjaTables شعبية كبيرة من خلال نسختها المجانية بالإضافة إلى الإصدار المحترف.
تتقدم Fluent Forms في السباق ويقدم المستخدمون ملاحظات ملهمة. يمكنك استخدامه لمعرفة الميزات التي يحتوي عليها. آمل أن تكون هذه المقالة قد ساعدتك كثيرًا ، حيث قدمت قيمة كافية في تصميم نماذج WordPress بمعنى أكبر.
بصرف النظر عن استخدام المكونات الإضافية ، يمكنك أيضًا الحصول على مزيد من المساعدة والدعم باستخدام WordPress من WP Buffs وصيانة موقع WordPress وموفر خدمات دعم الإدارة. تقدم WP Buffs تخصيصات غير محدودة ووظائف إصلاح على مواقع WordPress الخاصة بك حتى لا تقلق بشأن صيانة موقع الويب الخاص بك مرة أخرى!
اشترك في قناتنا على YouTube للحصول على النصائح والحيل المتعلقة بـ WordPress. أيضًا ، تابعونا على Twitter و Facebook.