كيفية انشاء صفحة الاتصال بك او مراسلتك عبر حسابك على الواتساب مباشرة

كيفية انشاء صفحة الاتصال بك او مراسلتك عبر حسابك على الواتساب مباشرة

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

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

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

طريقة تركيب الأداة

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

<style type="text/css"> 
/* Input Field CSS */
.datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{text-align: right;font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;right:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21a51f;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.indigox{background:#3f51b5}.orangex{background:#ff9800}.pinkx{background:#e91e63}.bluex{background:#2196F3}.purplex{background:#9c27b0}.redx{background:#F44336}.greenx{background:#4CAF50}.highlight{background: none !important;position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f}

/* Default Whatsapp Form CSS by www.idblanter.com */
form.whatsapp-form {
    box-shadow: 0 1px 6px rgba(32,33,36,.28);
    border-radius: .5rem;
    padding: 20px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
 .whatsapp-form a.send_form {
    color: #fff;
    background: #21a51f;
    text-decoration: none;
    display: inline-block;
    padding: 10px 25px;
    border-radius: .3rem;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 15px;
}
#text-info span {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-weight: 700;
    margin: 15px 0;
    border-radius: .5rem;
}
#text-info span.yes {
    background: #c6ffc5;
    color: #0ea904;
}
#text-info span.no {
    background: #ffc5c5;
    color: #ce0404;
}
.whatsapp-form{
  width:100%;
  max-width:700px;
  margin:0 auto;
  box-sizing:border-box;
}</style>
<form class="whatsapp-form">
<div class="datainput">
<input class="validate" id="wa_name" name="name" required="" type="text" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>اسمك</label>
</div>
<div class="datainput">
<input class="validate" id="wa_email" name="email" required="" type="email" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>عنوان البريد الإلكتروني</label>
</div>
<div class="datainput">
<select id="wa_select">
  <option hidden='hidden' selected='selected' value='default'>نوع الطلب</option>
  <option value="1">تبادل اعلاني</option>
  <option value="2">الانضمام للموقع</option>
  <option value="3">تطوير موقع</option>
</select>
</div>
<div class="datainput">
<input class="validate" id="wa_number" name="count" required="" type="number" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>رقم هاتفك</label>
</div>
<div class="datainput">
<input class="validate" id="wa_url" name="url" required="" type="url" value=''/>
<span class="highlight"></span><span class="bar"></span>
<label>URL/عنوان الموقع</label>
<p>يجب استخدام http:// أو https://</p>
</div>
<div class="datainput">
<textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea>
<span class="highlight"></span><span class="bar"></span>
<label>وصف</label>
</div>
<a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a>
<div id="text-info"></div>
</form>
<script type="text/javascript"> 
//<![CDATA[ 
$(document).on('click','.send_form', function(){
var input_blanter = document.getElementById('wa_email');

/* Whatsapp Settings */
var walink = 'https://web.whatsapp.com/send',
    phone = '00201000000000',
    walink2 = 'مرحبا اريد ',
    text_yes = 'تم ارساله.',
    text_no = 'املأ جميع النماذج ثم انقر فوق إرسال.';

/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}

if("" != input_blanter.value){

 /* Call Input Form */
var input_select1 = $("#wa_select :selected").text(),
    input_name1 = $("#wa_name").val(),
    input_email1 = $("#wa_email").val(),
    input_number1 = $("#wa_number").val(),
    input_url1 = $("#wa_url").val(),
    input_textarea1 = $("#wa_textarea").val();

/* Final Whatsapp URL */
var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +
    '*Name* : ' + input_name1 + '%0A' +
    '*Email Address* : ' + input_email1 + '%0A' +
    '*Select Option* : ' + input_select1 + '%0A' +
    '*Input Number* : ' + input_number1 + '%0A' +
    '*URL/Link* : ' + input_url1 + '%0A' +
    '*Description* : ' + input_textarea1 + '%0A';

/* Whatsapp Window Open */
window.open(blanter_whatsapp,'_blank');
document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>';
} else {
document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>';
}
});
//]]> 
</script>

قم بتغير الرقم 00201000000000 برقم هاتفك ومبروك عليك الاضافة

Share This

clear