نموذج الاتصال 2024 - نموذج الطلبات عبر خدمة واتساب لمدونة بلوجر

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

نموذج الطلبات واتساب (Whatsapp Form)

يعد هذا النموذج خطوة مهمة نحو تحسين خدمة العملاء وزيادة مبيعاتك.

مميزات لنموذج التواصل عبر واتساب:

نموذج التواصل عبر واتساب يمكن أن يساهم بشكل كبير في زيادة التفاعل والمبيعات بعدة طرق:

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

خطوات التركيب وإضافته الى مدونة بلوجر:

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

المتغيرات:

• رقم واتساب whatsappNumber: رقم واتساب الذي سيتم إرسال البيانات إليه.
• رسائل الخطا errorMessage: رسائل الخطأ التي ستظهر للمستخدم.

<div class="BoxTool">
  <form id="orderForm">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name" placeholder="اكتب اسمك" required>
    <div class="DataB">
      <div class="labelB">
        <label for="gender">نوع الجنس:</label>
        <select id="gender" name="gender">
          <option value="ذكر Male">ذكر</option>
          <option value="أنثى Female">أنثى</option>
        </select>
      </div>
      <div class="inputB">
        <label for="dob">تاريخ الميلاد:</label>
        <input type="date" id="dob" name="dob">
      </div>
    </div>
    <div class="DataB">
      <div class="labelB">
    <label for="address">اسم المحافظة:</label>
    <input type="text" id="address" name="address" placeholder="ادخل اسم المحافظة / الولاية" required>
    </div>
      <div class="inputB">
    <label for="country">اسم الدولة:</label>
    <input type="text" id="country" name="country" placeholder="مثلا: مصر, الاردن, قطر" required>
    </div>
      </div>
     <div class="DataB">
      <div class="labelB">
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required>
    </div>
      <div class="inputB">
    <label for="phone">رقم الهاتف:</label>
    <input type="number" id="phone" name="phone" placeholder="+020123456789" required>
        </div>
      </div>
    <span id="Msg"></span>
    <div class="btnF">
      <button class="button" type="button" onclick="submitForm()">إرسال</button>
    </div>
    <div class="Copyrights">
      <a id='credit'></a>
    </div>
  </form>
</div>

<style>
.BoxTool{max-width:600px,auto;margin:auto;color:#000;background:#fdfcff;border:1px solid #ddd;font-family:Tajawal,Cairo,sans-serif;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);}
.BoxTool label{display:block;margin-bottom:8px;}
.BoxTool .btnF{text-align:center;}
.BoxTool button{background-color:#4caf50;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;}
.BoxTool button:hover{background-color:#45a049;}
.BoxTool .note{background-color:#41b375;color:#fff;margin-bottom:10px;}
.BoxTool .wr{background-color:#ba0000;}
.DataB{display:flex;}
.inputB,.labelB{width:50%;margin:5px;}
.BoxTool input[type=date],.BoxTool input[type=email],.BoxTool input[type=number],.BoxTool input[type=tel],.BoxTool input[type=text],.BoxTool select{background-color:#f8f8f8;border-radius:5px;padding:10px;margin-bottom:10px;border:1px solid #ddd;width:100%;color:#333;transition:border-color .2s;}
.BoxTool input[type=date]:focus,.BoxTool input[type=date]:hover,.BoxTool input[type=email]:focus,.BoxTool input[type=email]:hover,.BoxTool input[type=number]:focus,.BoxTool input[type=number]:hover,.BoxTool input[type=text]:focus,.BoxTool input[type=text]:hover,.BoxTool select:focus,.BoxTool select:hover{border-color:#4caf50;}
.note{position:relative;padding:16px 50px 16px 20px;background:#e1f5fe;color:#3c4043;font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden;}
.note::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;right:-12px;opacity:.1;}
.note::after{content:'\002A';position:absolute;right:18px;top:16px;font-size:20px;min-width:15px;text-align:center;}
.note.wr{background:#ffdfdf;color:#48525c;}
.note.wr::before{background:#e65151;}
.note.wr::after{content:'\0021';}
</style>

<script>//<![CDATA[
var whatsappNumber = "+0123456789";
var errorMessage = '<p class="note wr">يرجى ملء جميع الحقول</p>';
var successMessage = '<p class="note">جار تحويلك إلى واتساب.</p>';
var cb = function (){
  var js = document.createElement("script");
  js.async = "async"; 
  js.async = true;
  js.src = "https://mr-cdn.github.io/medo-tools/whatsapp-form.js";
  document.head.appendChild(js);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;if (raf) raf(cb);else window.addEventListener("load", cb);
//]]></script>

كيفيه عمل الاسكربت؟

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

الخلاصه:

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

ينتهي هنا موضوعنا عن "نموذج الاتصال 2024 - نموذج الطلبات عبر خدمة واتساب لمدونة بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية