أضافة نموذج أتصل بنا مع زر تحميل الملفات

إضافة قسم "اتصل بنا" إلى قالب بلوجر

تعتبر واحدة من أهم الميزات التي تعزز تجربة المستخدم وتزيد من تفاعل الزوار مع المدونة. أهمية إضافة قسم "اتصل بنا":

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

بناء الثقة : وجود قسم اتصال واضح يعكس احترافية المدونة ويعزز ثقة الزوار بها.

تحسين التفاعل : من خلال توفير وسيلة مريحة للتواصل، يمكن أن تزيد من نسبة التفاعل بينك وبين جمهورك.

إضافة زر "رفع الملفات" بداخل الرسالة

يضيف بُعدًا جديدًا لقسم "اتصل بنا"، حيث يصبح الزوار قادرين على إرسال مستندات أو صور لدعم استفساراتهم أو طلباتهم. إليك بعض

الفوائد الرئيسية :

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

شرح التركيب بالفيديو

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

شرح بالفيديو

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

  
<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>