كيفية إنشاء دردشة عائمة أو نموذج اتصال على WhatsApp

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

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

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

أحدها هو جهات اتصال دردشة WhatsApp، في هذه المقالة سنناقش برنامجًا تعليميًا لإنشاء أداة جهات اتصال دردشة WhatsApp على موقع blogger.

قبل إنشاء هذا، دعنا نلقي نظرة على المعاينة

كيفية إضافة زر WhatsApp العائم؟

الخطوة 1: افتح Blogger > التخطيط > إضافة الأدوات .

الخطوة 2: حدد أدوات HTML/Javascript .

الخطوة 3: ثم قم بنسخ وإدخال الكود HTML التالي أدناه.

<!--[ Contact Form Floating WhatsApp by FreemiumTech.blogspot.Com ]-->
<div class='nav-whatsapp'>
  <div class='wrapperWA'>
    <div class='wrapperWA-header'>
      <h2>WhatsApp Chat</h2>
      <div class='closeWA'>
        <svg class='h-6 w-6' fill='none' stroke='#f40076' viewbox='0 0 24 24'><path d='M6 18L18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'></path></svg>
      </div>
    </div>
    <div class='form-container' id='waform-IT'>
      <div class='formC'>
        <div class='Fcontrol'>
          <input class='cName' id='cName' name='name' required='required' type='text'>
          <span class='nameC'>Name</span>
          <span class='valid' id='error_name'></span>
        </div>
        <div class='Fcontrol'>
          <input class='cEmail' id='cEmail' name='email' required='required' type='email'>
          <span class='emailC'>Email</span>
          <span class='valid' id='error_email'></span>
        </div>
      </div>
      <div class='formC'>
        <div class='Fcontrol'>
          <select class='cSubject' id='cSubject'>
            <option value='Help'>Help</option>
            <option value='Question'>Question</option>
            <option value='Request'>Request</option>
          </select> <span class='subjectC'>Select Subject</span>
        </div>
        <div class='Fcontrol'>
          <textarea class='cMessage' id='cMessage' name='message' required='required'></textarea>
          <span class='messageC'>Message</span>
          <span class='valid' id='error_message'></span>
        </div>
      </div>
      <div class='formB'>
        <a class='whatsapp-send' onclick='sendToWhatsApp()'><svg viewbox='0 0 32 32'>
        <path d='M16 2a13 13 0 0 0-8 23.23V29a1 1 0 0 0 .51.87A1 1 0 0 0 9 30a1 1 0 0 0 .51-.14l3.65-2.19A12.64 12.64 0 0 0 16 28a13 13 0 0 0 0-26Zm0 24a11.13 11.13 0 0 1-2.76-.36 1 1 0 0 0-.76.11L10 27.23v-2.5a1 1 0 0 0-.42-.81A11 11 0 1 1 16 26Z'></path><path d='M19.86 15.18a1.9 1.9 0 0 0-2.64 0l-.09.09-1.4-1.4.09-.09a1.86 1.86 0 0 0 0-2.64l-1.59-1.59a1.9 1.9 0 0 0-2.64 0l-.8.79a3.56 3.56 0 0 0-.5 3.76 10.64 10.64 0 0 0 2.62 4 8.7 8.7 0 0 0 5.65 2.9 2.92 2.92 0 0 0 2.1-.79l.79-.8a1.86 1.86 0 0 0 0-2.64Zm-.62 3.61c-.57.58-2.78 0-4.92-2.11a8.88 8.88 0 0 1-2.13-3.21c-.26-.79-.25-1.44 0-1.71l.7-.7 1.4 1.4-.7.7a1 1 0 0 0 0 1.41l2.82 2.82a1 1 0 0 0 1.41 0l.7-.7 1.4 1.4Z'></path></svg>Send WhatsApp</a>
      </div>
    </div>
  </div>
  <div class='whatsapp-float'>
    <div class='whatsapp-icon'>
      <svg viewbox='0 0 512 512'><path d='M414.73 97.1A222.14 222.14 0 0 0 256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0 0 29.78 111L32 480l118.25-30.87a223.63 223.63 0 0 0 106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 0 0 414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 0 1-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0 1 71.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 0 1 185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 0 0-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0 0 31.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z'></path></svg>
    </div>
    <span class="whatsapp-text">Talk to us?</span>
  </div>  
</div>

قم بضبط عناصر النص في قسم علامة التحديد وفقًا للموضوع الذي تقدمه لتمييز غرض رسالة اتصال دردشة WhatsApp.

الخطوة 4: ثم انقر فوق زر الحفظ .

المرحلة التالية هي تثبيت CSS والنصوص البرمجية لتفعيل وظيفة نموذج الاتصال العائم في WhatsApp.

الخطوة 5: في لوحة تحكم Blogger ، افتح القائمة قالب > تحرير HTML .

الخطوة 6: ابحث عن ]]></b:skin> أو </style> ، ثم انسخ CSS التالي وضعه مباشرة فوق الكود.

<style>

.nav-whatsapp{position:fixed;bottom:20px;right:20px;z-index:1000;padding:12px 0}
.nav-whatsapp.active .wrapperWA{opacity:1;visibility:visible;width:400px;height:auto;z-index:6;display:block}
.nav-whatsapp.active .whatsapp-float{opacity:0;visibility:hidden}
.wrapperWA{position:fixed;right:20px;bottom:20px;width:60px;padding:25px;border-radius:5px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;z-index:-1;opacity:0;visibility:hidden;transition:opacity .3s ease;height:60px;margin:12px 0;background:#fff;display:none}
.wrapperWA-header{display:flex;align-items:center;margin-bottom:20px;justify-content:center;position:relative}
.wrapperWA-header h2{text-align:center;text-transform:uppercase;letter-spacing:3px;color:#332902;font-size:1rem;flex:1 1 auto;margin:0}
.wrapperWA-header .closeWA svg{width:20px;height:20px;float:right}
.form-container .formC:nth-child(1){display:grid;grid-template-columns:repeat(auto-fit,minmax(45%,1fr));gap:1rem;--gap:1rem}
.form-container .formC:nth-child(2){display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}
.form-container .formC .Fcontrol{position:relative}
.form-container .formC .Fcontrol input:focus,.form-container .formC .Fcontrol textarea:focus{border-color:#4caf50}
.Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol .cSubject,.Fcontrol textarea{width:100%;height:calc(3.5rem + calc(1px * 2));padding:.375rem 2.25rem .375rem .75rem;padding-top:1.625rem;border-radius:5px;margin-bottom:15px;border:1px solid rgba(0,0,0,0.05);background:#fff}
.Fcontrol textarea{height:100px}
.Fcontrol input:focus ~ .nameC,.Fcontrol input:focus ~ .emailC,.Fcontrol textarea:focus ~ .messageC{top:-5px}
.Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol textarea{padding:.75rem;padding-top:1.625rem;}
.Fcontrol .nameC,.Fcontrol .emailC,.Fcontrol .subjectC,.Fcontrol .messageC{position:absolute;top:0;left:0;z-index:2;height:auto;padding:1rem .75rem;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem);transform-origin:0 0;overflow:hidden;text-overflow:ellipsis;pointer-events:none;white-space:nowrap;color:rgba(33,37,41,0.65);transition:0.1s ease}
.formC .Fcontrol .cSubject{display:block;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px;border:1px solid rgba(0,0,0,0.08);-webkit-appearance:none;-moz-appearance:none;appearance:none}
.valid[data-text]:before{position:absolute;bottom:100%;left:12px;content:"";border:8px solid;border-color:transparent transparent #ffd91a transparent;top:calc(100% - 21px)}
.valid[data-text]:after,.valid[data-text]:before{opacity:1;transition:opacity 0.2s ease;pointer-events:none;z-index:3}
.valid[data-text]:after{content:attr(data-text);position:absolute;background:#ffd91a;left:0;top:calc(100% - 5px);font-size:12px;padding:5px;box-shadow:0 5px 10px rgb(0 0 0 / 8%);border-radius:5px}
.show#cName ~ .valid:after,.show#cEmail ~ .valid:after,.show#cMessage ~ .valid:after,.show#cName ~ .valid[data-text]:before,.show#cEmail ~ .valid[data-text]:before,.show#cMessage ~ .valid[data-text]:before{opacity:0}
.none#cName ~ .valid:after,.none#cEmail ~ .valid:after,.none#cMessage ~ .valid:after,.none#cName ~ .valid[data-text]:before,.none#cEmail ~ .valid[data-text]:before,.none#cMessage ~ .valid[data-text]:before{opacity:1}
.whatsapp-send{display:inline-flex;align-items:center;gap:0.3rem;padding:10px 20px;background-color:#4caf50;color:#fff;text-decoration:none;font-weight:bold;font-size:12px;border-radius:4px;transition:background-color 0.3s;cursor:default;height:auto;width:auto}
.whatsapp-send svg{fill:#fff;width:22px;height:22px}
.whatsapp-send:hover{background-color:#45a049}
.whatsapp-float{display:flex;align-items:center;flex-direction:column;gap:.2rem}
.whatsapp-float .whatsapp-icon{width:60px;height:60px;border-radius:50%;background-color:#4CAF50;display:flex;justify-content:center;align-items:center;animation-name:waAnimation;animation-duration:1.5s;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes waAnimation{0%{box-shadow:0 0 0 0 rgba(74,175,80,0.5)}80%{box-shadow:0 0 0 14px rgba(74,175,80,0)}}
.whatsapp-float .whatsapp-icon svg{fill:#fff;width:30px;height:30px}
/* Remove IE arrow */
select:focus{outline:none}
select::-ms-expand{display:none}
@media screen and (max-width:620px){
	.formC:nth-child(1){gap:0}
	.nav-whatsapp.active .wrapperWA{width:auto;height:auto;right:0;left:0;bottom:0;top:auto;margin:0;transition:all .3s ease}
	.form-container .formC:nth-child(1){grid-template-columns:auto;gap:0}
}
.drK .wrapperWA{background:#202426}
.drK .Fcontrol input[type="text"],.drK .Fcontrol input[type="email"],.drK .Fcontrol .cSubject,.drK .Fcontrol textarea{background:#272b2d}
.drK .wrapperWA-header h2,.drK .Fcontrol .nameC,.drK .Fcontrol .emailC,.drK .Fcontrol .subjectC,.drK .Fcontrol .messageC{color:#fff}
</style>

الخطوة 7: وأخيرًا، ضع الجافا سكريبت أسفل الكود </body> أو </body> .

<script>//<![CDATA[

// whatsApp floating form by FreemiumTech
/* Open Close Button */
var menuToggle = document.querySelector(".whatsapp-float"),
	wrapperMenu = document.querySelector(".nav-whatsapp"),
	closeWA = document.querySelector(".closeWA");
var inputs = document.querySelectorAll('.Fcontrol input[type=text], .Fcontrol input[type=email], .Fcontrol textarea');

menuToggle.onclick = function() {
  wrapperMenu.classList.toggle('active');
}
closeWA.onclick = function() {
  wrapperMenu.classList.remove('active');
};

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'show' : 'none';
    this.setAttribute('class', bg);
  });
}

function sendToWhatsApp() {
  /* Input Form */
  var name = document.getElementById("cName").value;
  var email = document.getElementById("cEmail").value;
  var subject = document.getElementById("cSubject").value;
  var massage = document.getElementById("cMessage").value;
  var postLink = window.location.href;
  /* Validation for Required Columns */
  var error_name = document.getElementById("error_name"),
    error_email = document.getElementById("error_email"),
    error_message = document.getElementById("error_message");
  var text;
  if (name == "") {
    text = 'Please enter your name';
    error_name.setAttribute('data-text', text);
    return false;
  }
  if (email.indexOf("@") == -1 || email.length < 6) {
    text = 'Please enter valid email';
    error_email.setAttribute('data-text', text);
    return false;
  }
  if (massage == "") {
    text = 'Please enter your Massage';
    error_message.setAttribute('data-text', text);
    return false;
  }
  /* URL Final Whatsapp */ 
  var message = "New message from " + name + "\n\n"; // Opening Message
  message += "*Name:* " + name + "\n";
  message += "*Email:* " + email + "\n";
  message += "*Subject:* " + subject + "\n";
  message += "*Massage:* " + massage + "\n\n";
  message += "=============================" + "\n";
  message += "*Form:* " + postLink + "\n";
  message += "=============================";
  /* WhatsApp Settings */
  var walink = 'https://api.whatsapp.com/send?',
    phoneNumber = '+8801625498944'; // Your WhatsApp number
  var encodedMessage = encodeURIComponent(message);
  var whatsappUrl = walink + "?phone=" + phoneNumber + "&text=" + encodedMessage;
  window.open(whatsappUrl, '_blank');
  return true;
}
//]]></script>

قم بتغيير رقم WhatsApp برقم WhatsApp الخاص بك.

الخطوة 8: إذا تم الانتهاء من كل شيء، انقر الآن فوق حفظ القالب.

الآن قم بتحديث موقع الويب الخاص بك ثم يمكنك رؤية زر WhatsApp العائم في موقع الويب الخاص بك.

خاتمة

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

الانتقال إلى الرابط المطلوب

معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر