كود أتصل بنا مع زر تحميل المرفقات بالرسالة 2025

أهمية قسم "اتصل بنا" المطوّر في مدونتك:

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

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

ميزة إضافة زر "رفع الملفات": نقلة نوعية في التواصل:

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

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

شرح طريقة التركيب (مع تحسين وتوضيح):

بدلاً من مجرد لصق كود، سأشرح لك الطريقة بشكل مُفصّل مع بعض النصائح الإضافية:

1. إنشاء صفحة جديدة: في لوحة تحكم بلوجر، انتقل إلى "الصفحات" ثم انقر على "صفحة جديدة".

2. اختيار وضع HTML: في مُحرّر الصفحات، تأكّد من اختيار وضع "HTML" بدلاً من وضع "الإنشاء".

3. إضافة الكود: هنا يأتي دور الكود الذي سيُنشئ نموذج الاتصال. ستحتاج إلى كود HTML وربما بعض أكواد CSS و JavaScript لإضافة وظيفة رفع الملفات. نظرًا لأن توفير كود جاهز هنا قد يكون مُعقّدًا (بسبب الحاجة إلى معالجة رفع الملفات على الخادم)، أنصحك بالبحث عن "نموذج اتصال HTML مع رفع ملفات" على الإنترنت. ستجد العديد من الأمثلة الجاهزة التي يُمكنك تعديلها لتناسب تصميم مدونتك.

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

5. تسمية الصفحة: أعطِ الصفحة اسمًا مُناسبًا مثل "اتصل بنا" أو "تواصل معنا".

6. نشر الصفحة: بعد الانتهاء من التعديلات، انشر الصفحة.

ملاحظات مهمة:

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

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

الأكواد الخاصة بالأضافة

<style>

.container {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}  

.form-control {display: block;width: 100%;height: calc(2.25rem + 2px);padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}  

.form-row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -5px;margin-left: -5px;}   

.form-row>.col, .form-row>[class*=col-] {padding-right: 5px;padding-left: 5px;}

.col {-ms-flex-preferred-size: 0;flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}

.form-group {margin-bottom: 1rem;}   

.drK .form-control {background: var(--darkBs);border-color: rgba(255, 255, 255, .15);}

textarea.form-control {height: 200px;}

button.btn.btn-lg.btn-dark.btn-block{border: 1px solid transparent;border-radius: .25rem;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;background: #29992c;color: #ffffff;width: 100%;height: 44px;    cursor: pointer;}  

button.btn.btn-lg.btn-dark.btn-block:hover{background: #2778fc;} 

.form {padding: 35px 20px;background: #e3e3e30a;border-radius: 8px;}

.form-control:focus{outline:none;border-color:rgba(81,203,238,1);border: 1px solid #2ba356;}

input[type="file"] {background: #ffffff08;width: 100%;padding: 10px 13px;border-radius: 3px; border: 1px solid #66666633;}

</style>

  

<div class="container">

  <form action="https://formsubmit.co/xxxxxxxxxxxxxx" enctype="multipart/form-data" method="POST" target="_blank">

    <div class="form-group">

      <div class="form-row">

        <div class="col">

          <input class="form-control" name="First-Name" required="" type="text" placeholder=" الأسم الأول " />

        </div>

        <div class="col">

          <input class="form-control" name="Last-Name" required="" type="Name" placeholder=" اللقـب " />

        </div>

      </div>

    </div>

<div class="form-row"> 

      <div class="col">

      <input class="form-control" name="email" required="" type="email" placeholder=" الرسالة " />

</div></div><br />  

      

    <div class="form-group">

      <div class="form-row">

        <div class="col">

        <input name="attachment" type="file" />

        </div>

      </div>

    </div>

    

    <div class="form-group">

      <textarea class="form-control" name="message" required="" rows="5"  placeholder=" أكتب رسالتك هنــا ... "></textarea>

    </div>

    <button class="btn btn-lg btn-dark btn-block" type="submit">Submit Form</button>

  </form>

</div>

التعديلات التي يجب أن تقوم بها

ستجد بداخل الاكواد xxxxxxxxxxxxxx   قم بتغيرهم بالايميل الخاص بك التي تريد ان يصلك الأيميل .

ثم قم بحفظ الصفحة 

لاول مرة قم انت بتجربة الارسال ستجد عند الضغط على الارسال مثل هذه الرسالة

ستصلك رسالة على الأيميل تقوم بتفعيل الاداة لمرة واحدة فقط 

و الان عندما يقوم اي شخص بارسال رسالة لك ستظهر معه هذه الصورة و عندما يؤشر على الصورة سيتم الارسال

و ستكون اضافة أتصل بنا شغالة 100%

و شكرا