طريقة إضافة نموذج اتصال عائم في بلوجر باحترافية

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

طريقة إضافة نموذج اتصال عائم في بلوجر باحترافية | Floating Contact Form Popup.

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

ما هو نموذج الاتصال العائم؟

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

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

لماذا يعتبر هذا النموذج مهمًا داخل المدونة؟

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

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

ما الذي ستحتاج إليه قبل التركيب؟

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

وجود مدونة على بلوجر أو موقع يقبل إدراج أكواد HTML وCSS وJavaScript.
بريد إلكتروني حقيقي تريد استقبال الرسائل عليه.
إمكانية الوصول إلى التخطيط أو القالب أو أداة HTML/JavaScript.
تحديد اللغة التي تريد أن يظهر بها النموذج: عربية أو إنجليزية.

كيف يعمل النموذج فعليًا؟

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

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

أين أضع البريد الإلكتروني الخاص بي؟

داخل كل نموذج ستجد سطرًا مشابهًا لهذا:

مكان وضع البريد الإلكتروني

action="https://formsubmit.co/you@example.com"

فقط استبدل you@example.com ببريدك الحقيقي. مثال عملي:

مثال جاهز

action="https://formsubmit.co/modyelna4@gmail.com"

بعد أول رسالة، قد تطلب الخدمة منك تأكيد البريد مرة واحدة، وبعد ذلك ستبدأ الرسائل بالوصول بشكل طبيعي.

الكود الإنجليزي الكامل لنموذج الاتصال العائم

هذا الإصدار مخصص للمواقع الإنجليزية، مع بقاء زر الإرسال في الجهة اليسرى داخل النموذج.

English Floating Contact Form Code

<style>
.k2b-fcf-wrap,.k2b-fcf-wrap *{box-sizing:border-box}
.k2b-fcf-btn{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:99999;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,99,235,.28);
  animation:k2bPulse 1.8s infinite;
}
.k2b-fcf-btn svg{
  width:26px;
  height:26px;
  fill:currentColor;
}
@keyframes k2bPulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45),0 10px 30px rgba(37,99,235,.28)}
  70%{box-shadow:0 0 0 16px rgba(37,99,235,0),0 10px 30px rgba(37,99,235,.28)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 10px 30px rgba(37,99,235,.28)}
}
.k2b-fcf-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:99998;
}
.k2b-fcf-popup{
  position:fixed;
  left:50%;
  top:50%;
  width:min(420px,calc(100% - 30px));
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(15,23,42,.22);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-40%);
  transition:.25s ease;
  z-index:99999;
  direction:ltr;
  text-align:left;
}
.k2b-fcf-popup.active{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%);
}
.k2b-fcf-overlay.active{
  opacity:1;
  visibility:visible;
}
.k2b-fcf-head{
  padding:18px 20px;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;
  position:relative;
}
.k2b-fcf-head h3{
  margin:0 0 6px;
  font-size:22px;
  color:#fff;
}
.k2b-fcf-head p{
  margin:0;
  opacity:.95;
  font-size:14px;
}
.k2b-fcf-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:20px;
}
.k2b-fcf-body{padding:18px}
.k2b-fcf-field{margin-bottom:14px}
.k2b-fcf-field label{
  display:block;
  margin-bottom:7px;
  font-weight:600;
  color:#0f172a;
  font-size:14px;
}
.k2b-fcf-input,
.k2b-fcf-textarea{
  width:100%;
  border:1px solid #dbe3ee;
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  outline:none;
  background:#fff;
}
.k2b-fcf-input:focus,
.k2b-fcf-textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.k2b-fcf-textarea{
  min-height:130px;
  resize:vertical;
}
.k2b-fcf-actions{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:10px;
}
.k2b-fcf-submit{
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 18px;
  cursor:pointer;
  font:600 14px/1.2 inherit;
}
.k2b-fcf-submit:hover{background:#1d4ed8}
.k2b-fcf-note{
  font-size:12px;
  color:#64748b;
  margin-top:12px;
}
@media (max-width:640px){
  .k2b-fcf-btn{left:14px;bottom:14px;width:54px;height:54px}
  .k2b-fcf-popup{width:min(420px,calc(100% - 24px))}
}
</style>

<div class="k2b-fcf-wrap">
  <button class="k2b-fcf-btn" id="k2bOpenFormEn" aria-label="Contact Us" title="Contact Us" type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v.01L12 13l8-5.99V7H4zm16 10V9.24l-7.4 5.55a1 1 0 0 1-1.2 0L4 9.24V17h16z"></path>
    </svg>
  </button>
  <div class="k2b-fcf-overlay" id="k2bOverlayEn"></div>

  <div class="k2b-fcf-popup" id="k2bPopupEn">
    <div class="k2b-fcf-head">
      <button class="k2b-fcf-close" type="button" id="k2bCloseFormEn">×</button>
      <h3>Contact Us</h3>
      <p>Send us your message and we will get back to you soon.</p>
    </div>

    <div class="k2b-fcf-body">
      <form action="https://formsubmit.co/you@example.com" method="POST">
        <input type="hidden" name="_captcha" value="false" />
        <input type="hidden" name="_subject" value="New message from floating contact form" />
        <input type="hidden" name="_template" value="table" />

        <div class="k2b-fcf-field">
          <label>Your Name</label>
          <input class="k2b-fcf-input" type="text" name="name" placeholder="Enter your name" required="required" />
        </div>

        <div class="k2b-fcf-field">
          <label>Your Email</label>
          <input class="k2b-fcf-input" type="email" name="email" placeholder="Enter your email" required="required" />
        </div>

        <div class="k2b-fcf-field">
          <label>Message</label>
          <textarea class="k2b-fcf-textarea" name="message" placeholder="Write your message here..." required="required"></textarea>
        </div>

        <div class="k2b-fcf-actions">
          <button class="k2b-fcf-submit" type="submit">Send Message</button>
        </div>

        <p class="k2b-fcf-note">Send your message now and get a quick reply very soon.</p>
      </form>
    </div>
  </div>
</div>

<script>
(function(){
  var openBtn = document.getElementById('k2bOpenFormEn');
  var closeBtn = document.getElementById('k2bCloseFormEn');
  var popup = document.getElementById('k2bPopupEn');
  var overlay = document.getElementById('k2bOverlayEn');

  function openPopup(){
    popup.classList.add('active');
    overlay.classList.add('active');
  }
  function closePopup(){
    popup.classList.remove('active');
    overlay.classList.remove('active');
  }

  openBtn.addEventListener('click', openPopup);
  closeBtn.addEventListener('click', closePopup);
  overlay.addEventListener('click', closePopup);
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){ closePopup(); }
  });
})();
</script>

الكود العربي الكامل لنموذج الاتصال العائم

هذا الإصدار معرب بالكامل، مع بقاء زر الإرسال دائمًا في اليسار كما طلبت.

Arabic Floating Contact Form Code

<style>
.k2b-fcf-ar-wrap,.k2b-fcf-ar-wrap *{box-sizing:border-box}
.k2b-fcf-ar-btn{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:99999;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#16a34a;
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(22,163,74,.28);
  animation:k2bPulseAr 1.8s infinite;
}
.k2b-fcf-ar-btn svg{
  width:26px;
  height:26px;
  fill:currentColor;
}
@keyframes k2bPulseAr{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.45),0 10px 30px rgba(22,163,74,.28)}
  70%{box-shadow:0 0 0 16px rgba(22,163,74,0),0 10px 30px rgba(22,163,74,.28)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0),0 10px 30px rgba(22,163,74,.28)}
}
.k2b-fcf-ar-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:99998;
}
.k2b-fcf-ar-popup{
  position:fixed;
  left:50%;
  top:50%;
  width:min(420px,calc(100% - 30px));
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(15,23,42,.22);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-40%);
  transition:.25s ease;
  z-index:99999;
  direction:rtl;
  text-align:right;
}
.k2b-fcf-ar-popup.active{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%);
}
.k2b-fcf-ar-overlay.active{
  opacity:1;
  visibility:visible;
}
.k2b-fcf-ar-head{
  padding:18px 20px;
  background:linear-gradient(135deg,#15803d,#16a34a);
  color:#fff;
  position:relative;
}
.k2b-fcf-ar-head h3{
  margin:0 0 6px;
  font-size:22px;
  color:#fff;
}
.k2b-fcf-ar-head p{
  margin:0;
  opacity:.95;
  font-size:14px;
}
.k2b-fcf-ar-close{
  position:absolute;
  top:12px;
  left:12px;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:20px;
}
.k2b-fcf-ar-body{padding:18px}
.k2b-fcf-ar-field{margin-bottom:14px}
.k2b-fcf-ar-field label{
  display:block;
  margin-bottom:7px;
  font-weight:700;
  color:#0f172a;
  font-size:14px;
}
.k2b-fcf-ar-input,
.k2b-fcf-ar-textarea{
  width:100%;
  border:1px solid #dbe3ee;
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  outline:none;
  background:#fff;
}
.k2b-fcf-ar-input:focus,
.k2b-fcf-ar-textarea:focus{
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
}
.k2b-fcf-ar-textarea{
  min-height:130px;
  resize:vertical;
}
.k2b-fcf-ar-actions{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:10px;
}
.k2b-fcf-ar-submit{
  background:#16a34a;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 18px;
  cursor:pointer;
  font:700 14px/1.2 inherit;
}
.k2b-fcf-ar-submit:hover{background:#15803d}
.k2b-fcf-ar-note{
  font-size:12px;
  color:#64748b;
  margin-top:12px;
}
@media (max-width:640px){
  .k2b-fcf-ar-btn{left:14px;bottom:14px;width:54px;height:54px}
  .k2b-fcf-ar-popup{width:min(420px,calc(100% - 24px))}
}
</style>

<div class="k2b-fcf-ar-wrap">
  <button class="k2b-fcf-ar-btn" id="k2bOpenFormAr" aria-label="تواصل معنا" title="تواصل معنا" type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v.01L12 13l8-5.99V7H4zm16 10V9.24l-7.4 5.55a1 1 0 0 1-1.2 0L4 9.24V17h16z"></path>
    </svg>
  </button>
  <div class="k2b-fcf-ar-overlay" id="k2bOverlayAr"></div>

  <div class="k2b-fcf-ar-popup" id="k2bPopupAr">
    <div class="k2b-fcf-ar-head">
      <button class="k2b-fcf-ar-close" type="button" id="k2bCloseFormAr">×</button>
      <h3>تواصل معنا</h3>
      <p>أرسل رسالتك الآن وسنقوم بالرد عليك في أقرب وقت ممكن.</p>
    </div>

    <div class="k2b-fcf-ar-body">
      <form action="https://formsubmit.co/you@example.com" method="POST">
        <input type="hidden" name="_captcha" value="false" />
        <input type="hidden" name="_subject" value="رسالة جديدة من نموذج الاتصال العائم" />
        <input type="hidden" name="_template" value="table" />

        <div class="k2b-fcf-ar-field">
          <label>الاسم</label>
          <input class="k2b-fcf-ar-input" type="text" name="name" placeholder="اكتب اسمك" required="required" />
        </div>

        <div class="k2b-fcf-ar-field">
          <label>البريد الإلكتروني</label>
          <input class="k2b-fcf-ar-input" type="email" name="email" placeholder="اكتب بريدك الإلكتروني" required="required" />
        </div>

        <div class="k2b-fcf-ar-field">
          <label>الرسالة</label>
          <textarea class="k2b-fcf-ar-textarea" name="message" placeholder="اكتب رسالتك هنا..." required="required"></textarea>
        </div>

        <div class="k2b-fcf-ar-actions">
          <button class="k2b-fcf-ar-submit" type="submit">إرسال الرسالة</button>
        </div>

        <p class="k2b-fcf-ar-note">أرسل استفسارك الآن وسنقوم بالرد عليك في أقرب وقت.</p>
      </form>
    </div>
  </div>
</div>

<script>
(function(){
  var openBtn = document.getElementById('k2bOpenFormAr');
  var closeBtn = document.getElementById('k2bCloseFormAr');
  var popup = document.getElementById('k2bPopupAr');
  var overlay = document.getElementById('k2bOverlayAr');

  function openPopup(){
    popup.classList.add('active');
    overlay.classList.add('active');
  }
  function closePopup(){
    popup.classList.remove('active');
    overlay.classList.remove('active');
  }

  openBtn.addEventListener('click', openPopup);
  closeBtn.addEventListener('click', closePopup);
  overlay.addEventListener('click', closePopup);
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){ closePopup(); }
  });
})();
</script>

طريقة تركيب الكود داخل بلوجر

يمكنك تركيب النموذج داخل بلوجر بأكثر من طريقة، لكن الأسهل والأسرع هو استخدام أداة HTML/JavaScript من قسم التخطيط.

ادخل إلى لوحة تحكم بلوجر.
افتح قسم التخطيط.
أضف أداة HTML/JavaScript.
الصق الكود العربي أو الإنجليزي كاملًا داخل الأداة.
استبدل البريد الافتراضي ببريدك الحقيقي.
احفظ الأداة ثم افتح الموقع وجرب النموذج.

أين يفضل وضع الكود؟

المكان	أفضل استخدام له
داخل أداة HTML/JavaScript	إذا كنت تريد ظهور النموذج في كل صفحات الموقع بسهولة.
داخل القالب قبل </body>	إذا كنت تريد دمج النموذج بشكل ثابت ومباشر داخل الموقع بالكامل.
داخل صفحة أو مقالة محددة	إذا كنت تريد أن يظهر النموذج في صفحة معينة فقط.

كيف تقوم بتعريب النموذج؟

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

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

كيف تعدل الألوان وموضع الزر؟

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

أسطر التعديل الأساسية

background:#2563eb;
left:20px;
bottom:20px;

إذا أردت نقل الزر إلى اليمين بدل اليسار، قم بتغيير left إلى right. وإذا أردت تقريب الزر من أسفل الشاشة أو رفعه للأعلى، عدل قيمة bottom.

كيف تغيّر الرسالة لتكون عربية بالكامل؟

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

نصوص عربية قابلة للتعديل

<h3>تواصل معنا</h3>
<p>أرسل رسالتك الآن وسنقوم بالرد عليك في أقرب وقت ممكن.</p>
<label>الاسم</label>
<label>البريد الإلكتروني</label>
<label>الرسالة</label>
<button class="k2b-fcf-ar-submit" type="submit">إرسال الرسالة</button>

ملاحظات مهمة قبل التشغيل

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

أسئلة شائعة

لماذا لا تصل الرسائل إلى بريدي؟

السبب الأكثر شيوعًا هو أنك لم تؤكد البريد الإلكتروني في أول مرة، أو أنك نسيت استبدال البريد الافتراضي الموجود داخل الكود.

هل الكود يؤثر على تصميم القالب؟

لا، لأن الكود يعتمد على أسماء كلاسات مخصصة له فقط، كما أن تنسيق المقالة هنا لا يتدخل في عناصر القالب العامة ولا في تنسيقات الترقيم أو التنقيط الافتراضية.

هل يمكن تغيير مكان الزر ولونه ونصه؟

نعم، ويمكنك فعل ذلك بسهولة شديدة من خلال تعديل بعض الأسطر البسيطة داخل CSS وHTML.

هل يعمل النموذج على الهاتف؟

نعم، الكود متجاوب، وتم تضمين إعدادات مناسبة للشاشات الصغيرة.

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

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

إحصائيات المقال

جارٍ التحميل...

متواجدون ...

👁️

مشاهدات ...

📝

كلمات 0

⏱️

قراءة 0 دقيقة

📅

نشر 21/03/2026

♻️

تحديث 21/03/2026

تعديل المقال

الصباغ للمعلوميات

طريقة إضافة نموذج اتصال عائم في بلوجر باحترافية | Floating Contact Form Popup