0

كيفية إنشاء صفحة "اتصل بنا" على بلوجر HTML باللغتين العربية والإنجليزية

Mohamed Apd elshafy Mohamed Apd elshafy

نموذج اتصل بنا احترافي لموقعك على بلوجر HTML بالعربية والإنجليزية

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

كيفية إنشاء صفحة "اتصل بنا" على بلوجر HTML باللغتين العربية والإنجليزية
كيفية إنشاء صفحة "اتصل بنا" على بلوجر HTML باللغتين العربية والإنجليزية

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

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

أهمية صفحة اتصل بنا للمواقع 

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

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

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

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

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

مكونات صفحة اتصل بنا الأساسية

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

كود HTML لصفحة اتصل بنا بالعربية

<div dir="rtl" style="text-align: right;" trbidi="on">

<div id="contact-form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="بريد إلكتروني" size="30" type="text" value="" />

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />

<br />

<div style="text-align: center;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#0000FF;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>

<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

_WidgetManager._Init('');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارٍ الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغًا.', 'title': 'نموذج الاتصال', 'blogId': 'ضع id المدونة هنا', 'contactFormNameMsg': 'الاسم إجباري', 'contactFormEmailMsg': 'بريد إلكتروني إجباري', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

</script></div>


كود HTML لصفحة اتصل بنا بالإنجليزية

<div dir="en" style="text-align: right;" trbidi="on">

<div id="contact-form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="name" size="30" type="text" value="" />

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="e-mail" size="30" type="text" value="" />

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="The message is here" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="send" />

<br />

<div style="text-align: center;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>

<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

_WidgetManager._Init('');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'The message could not be sent, please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'it can not be The message field is empty.', 'title': 'Contact form', 'blogId': 'ضع id المدونة هنا', 'contactFormNameMsg': 'The name is mandatory', 'contactFormEmailMsg': 'Mandatory email', 'contactFormMessageMsg': 'message', 'contactFormSendMsg': 'send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

</script></div>

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

إليك قائمة بالألوان الأكثر شيوعًا مع أكواد الـHex الخاصة بها، التي يمكنك استخدامها لتغيير لون الزر أو أي عنصر آخر:

اول حاجة هنبحث عن الكود background-color دا فى عرض html على مدونتك فى صفحة اتصل بنا

background-color

الألوان الأساسية

  1. - أسود: `#000000`
  2. - أبيض: `#FFFFFF`
  3. - أحمر: `#ff0202`
  4. - أخضر: `#00FF00`
  5. - أزرق: `#0000FF`
  6. - أصفر: `#FFFF00`
  7. - سماوي (Cyan): `#00FFFF`
  8. - أرجواني (Magenta): `#FF00FF`

الألوان المحايدة

  1. - رمادي فاتح: `#D3D3D3`
  2. - رمادي متوسط: `#A9A9A9`
  3. - رمادي داكن: `#696969`
  4. - فضي: `#C0C0C0`
  5. - بني فاتح (بيج): `#F5F5DC`
  6. - بني: `#8B4513`

ألوان إضافية شائعة

  1. - أزرق سماوي: `#87CEEB`
  2. - أزرق ملكي (Royal Blue): `#4169E1`
  3. - أزرق غامق: `#00008B`
  4. - أحمر غامق (Maroon): `#800000`
  5. - أحمر وردي (Crimson): `#DC143C`
  6. - أخضر غامق: `#006400`
  7. - أخضر زيتوني: `#808000`
  8. - أصفر ذهبي: `#FFD700`
  9. - برتقالي: `#FFA500`
  10. - وردي فاتح: `#FFB6C1`
  11. - وردي غامق (Deep Pink): `#FF1493`
  12. - بنفسجي (Purple): `#800080`
  13. - بنفسجي فاتح (Lavender): `#E6E6FA`
  14. - ذهبي: `#FFD700`
  15. - فضي: `#C0C0C0`

ألوان طبيعية

  1. - أخضر عشبي: `#7CFC00`
  2. -أخضر نيون: `#39FF14`
  3. - بني طيني: `#8B4513`
  4. - أزرق تركواز: `#40E0D0`
  5. - أخضر زيتوني: `#556B2F`

يمكنك نسخ أي من هذه الأكواد واستخدامها كقيمة لـ`background-color` أو لأي خاصية أخرى للتحكم في ألوان العناصر.

نصائح إضافية

  • الوضوح: يجب أن يكون النموذج واضحًا وسهل الاستخدام.
  • السرعة: يجب أن يتم تحميل النموذج بسرعة.
  • الأمان: يجب حماية البيانات التي يتم جمعها.
  • التكامل: يمكنك دمج النموذج مع برامج التسويق عبر البريد الإلكتروني.

فيديو قناتنا التعليمي 

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




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

الخاتمة

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

تعرف على المزيد من خلال :

Mohamed Apd elshafy
Mohamed Apd elshafy
مؤسس موقع "تاريخكوا اليوم " حيث اقدم من خلال الموقع إلى نشر المعرفة التقنية وجعلها متاحة لجمهور واسع من المهتمين بالعلوم الحديثة. تاريخكوا اليوم : | بوابتك للعلوم والتكنولوجيا |

مقالات قد تهمك

تعليقات
إرسال تعليق

عزيزى القارئ لاتنسى تقييم المقالات من خلال تعليقكم على صفحات الموقع