إضافة خيار "إتصل بي " او "راسلني" إلى مدونات بلوجر .

ما هو نموج "اتصل بنا" أو "اتصل بي" أو "راسلني" .

نموذج "اتصل بنا" هو عبارة عن استمارة تتيح للزوار التواصل معك مباشرة من خلال موقعك 

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

بعد ملء النموذج، يمكن للزائر إرسال الرسالة، والتي تصل إلى بريدك الإلكتروني أو تُخزن في 

قاعدة بيانات الموقع.

.

مكونات نموذج "اتصل بنا".

1.    الاسم: حقل يتيح للزائر إدخال اسمه.

2.    البريد الإلكتروني: حقل يتيح للزائر إدخال بريده الإلكتروني للتواصل.

3.    الرسالة: حقل نصي يتيح للزائر كتابة رسالته أو استفساره.

4.    زر الإرسال: زر يتيح للزائر إرسال المعلومات المدخلة.

فوائد نمودج "اتصل بنا" .

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

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

إضافة نموذج "اتصل بنا" إلى مدونة بلوجر.

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

1.    تسجيل الدخول إلى حساب بلوجر:

 افتح Blogger وسجل الدخول إلى حسابك.

2.    اختيار المدونة:

· اختر المدونة التي تريد إضافة نموذج "اتصل بنا" إليها.

3.    الانتقال إلى الصفحات:

·  من القائمة الجانبية، اختر "الصفحات".

4.    لتبديل إلى وضع HTML:

5.    انقر على "HTML" للتبديل إلى وضع تحرير HTML.

6.    إدخال الكود:

7.    انسخ الكود التالي  والصقه في  الصفحة :

<div class="contact-form">

    <h2>اتصل بنا</h2>

    <form action="https://formspree.io/your-email@example.com" method="POST">

        <label for="name">الاسم:</label>

        <input type="text" id="name" name="name" required>

       

        <label for="email">البريد الإلكتروني:</label>

        <input type="email" id="email" name="email" required>

       

        <label for="message">الرسالة:</label>

        <textarea id="message" name="message" rows="4" required></textarea>

       

        <button type="submit">إرسال</button>

    </form>

</div>

<style>

.contact-form {

    max-width: 600px;

    margin: 0 auto;

    padding: 20px;

    border: 1px solid #ccc;

    border-radius: 10px;

    background-color: #f9f9f9;

}

.contact-form h2 {

    text-align: center;

    margin-bottom: 20px;

}

.contact-form label {

    display: block;

    margin-bottom: 5px;

}

.contact-form input,

.contact-form textarea {

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

}

.contact-form button {

    display: block;

    width: 100%;

    padding: 10px;

    background-color: #4CAF50;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

.contact-form button:hover {

    background-color: #45a049;

}

</style>

 

استبدل  your-email@example.com  ببريدك الالكتروني الذي تريد أن تستقبل عليه الرسائل.

انقر على "حفظ" لحفظ الأداة الجديدة.

8.     معاينة المدونة:

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