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

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

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

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