كيف يمكن عمل نافذة منبثقة popup window تحوي نموذجا form؟

يمكنك عمل ذلك عن طريق إظهار نافذة نموذج بشكل نافذة منبثقة بعد إعطاءها الإشارة عن طريق الحدث window.onload.

كما يمكن الإستعانة ببوتسراب لتحقيق هذا الغرض عن طريق مكون النوافذ Modal. 

نقوم بتضمين الملفات اللازمة لعمل بوتستراب بصفحة الـ HTML لدينا:

<!-- bootstrap تضمين ملف  -->
<link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]">


<!-- تضمين ملف جيكويري -->
<script src="[JQUERY_CDN_LINK_HERE]"></script>
    
<!-- popper تضمين ملف  -->
<script src="[POPPERJS_CDN_LINK_HERE]"></script>
    
<!-- bootstrap تضمين ملف  -->
<script src="[BOOTSTRAP_JS_HERE]"></script>

إضافة عنصر النموذج modal إلى صفحة الـ HTML لدينا:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان النافذة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>قم بإضافة نموذجك هنا</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">حفظ التغييرات</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
      </div>
    </div>
  </div>
</div>

إظهار النموذج بمجرد تمام تحميل موارد  الصفحة:

$(window).load(function(){
    $('#myModal').modal('show')
})

تعرف على بوتستراب أكثر هنا.