كيفية إنشاء نموذج طلب عن طريق إرساله إلى WhatsApp
اهلان بيكم يا شباب فلى موضوع جديد وهو عن انشاء نموذج طلب عن طريق ارساله الي WhatsApp الكثير من الاشخاص توجهو الي انشاء مواقع لبيع البضائع لانة من اكثر المجالات التى لجنى المال لذالك يحتاج الزائر الي شراء منتج فمذا يفعل يقوم بتوجة التواصل مع صاحب الموقع عن طريق البريد الاكترونى ويوجد بعض الناس لايكترثون الي البريد الاكترونى لذالك كتبت هذا الموضوع لمساعدتكم فى التواصل بين وبين صاحب الموقع عن طريق WhatsApp كما نعلم ان اشهر المواقع او التطبيقات لتواصل الاجتماعى هي WhatsApp لذالك كتبت هذا الموضوع المهم دعون نشرح ماذا يفعل الصفحة او نموذج الطلب,عندما يدخل الزائر ليشتري منتج ما علية هو نسخ رابط المنتج ويتوجة الي نموذج الطلب وفي النموذج سوف يطلب منة (الاسم - البريد الاكترونى - رقم المحمول - العدد الذي يريدة مكون من 10 -رابط المنتج -وصف تغير) ثم يضغط ارسالالنموذج.
عادة ما يمكن العثور على نماذج كهذه على موقع المتجر على الإنترنت على منصة الوورد بريس او المواقع العادية (الاستاتيك) لأنها أسهل وأكثر عملية لطلبها. فائدتها متنوعة تمامًا ويمكن تعديلها بسهولة وفقًا لاحتياجاتك في استخدام نموذج Whatsapp هذا.
شرح بالفيديو
طريقة التركيب
- تتوجة الي الصفحة المراد جعلها صفحة اتصل بنا وتقوم بتحويل من تاليف الي HTML وتقوم بمسح كل ما في الصفحة وتضع الكود
النسخة العربية
<div dir="rtl" style="text-align: right;" trbidi="on">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<style>
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: linear-gradient(to right, #c94b4b, #4b134f); 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; } .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{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:linear-gradient(to right, #c94b4b, #4b134f)}#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:linear-gradient(to right, #c94b4b, #4b134f);transition:.2s ease all}.bar:before{left:50%}.bar:after{right: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{position:absolute;height:50%;width:100px;top:25%;left: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:linear-gradient(to right, #c94b4b, #4b134f)}
</style>
<br />
<br />
<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">اريد 1</option>
<option value="2">اريد 2</option>
<option value="3">اريد 3</option>
<option value="4">اريد 4</option>
<option value="5">اريد 5</option>
<option value="6">اريد 6</option>
<option value="7">اريد 7</option>
<option value="8">اريد 8</option>
<option value="9">اريد 9</option>
<option value="10">اريد 10</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>رابط المنتج</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">ارسال النموذج</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 = '20***************',
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' +
'*الاسم* : ' + input_name1 + '%0A' +
'*البريد الاكترونى* : ' + input_email1 + '%0A' +
'*عدد* : ' + input_select1 + '%0A' +
'*رقم الموبيل* : ' + input_number1 + '%0A' +
'*رابط المنتج* : ' + input_url1 + '%0A' +
'*وصف* : ' + 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>
<br /></div>
Version English
<div dir="rtl" style="text-align: right;" trbidi="on">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<style>
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: linear-gradient(to right, #c94b4b, #4b134f); 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; } .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{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;left: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:linear-gradient(to right, #c94b4b, #4b134f)}#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:linear-gradient(to right, #c94b4b, #4b134f);transition:.2s ease all}.bar:before{left:50%}.bar:after{right: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{position:absolute;height:50%;width:100px;top:25%;left: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:linear-gradient(to right, #c94b4b, #4b134f)}
</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>Your Name</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>Email Address</label>
</div>
<div class="datainput">
<select id="wa_select">
<option hidden='hidden' selected='selected' value='default'>Select Option</option>
<option value="1">List Option 1</option>
<option value="2">List Option 2</option>
<option value="3">List Option 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>Input Number</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/Link</label>
<p>Link blog Anda, gunakan http:// atau 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>Description</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 = '20***********',
walink2 = 'Hello I want ',
text_yes = 'was sent.',
text_no = 'Fill in all the forms then click Send.';
/* 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>
<br /></div>
طريقة التعديل
ما عليك هو تعديل رقم الموبيل الذي سوف تؤسل علية الطلب
شاهد الشرح بالفيديو فوق
ولا تنسي تضع كود دولتك علي سبيل المثال
مصر ***********20
تحذير لا يسمح باخذ المحتوي والا سوف يتم التبليغ عنك وسيتم حذف المقالة من طرف بلوجر بدون اخبارك
تعليقات
إرسال تعليق