מדריך להכנת טופס לאתר שלכם לשליחה מהירה ישירות לWhatsapp
אין אחד שלא רצה לעשות לעצמו חיים קלים לשליחת הודעה ללקוח לפני שהוא שמר את המס טלפון שלו .
היום יש כלים רבים ואתרים מיוחדים שמיועדים רק לזה .
אבל איזה מדהים שזה יכול להיות ממש אצלכם באתר ?
באמצעות קוד קצר שניתן פשוט להעתיק ולהטמיע בכל אתר באמצעות וויג'ט HTML נקבל טופס פשוט וקל להכנסת מספר טלפון ובלחיצת כפתור נקבל קישור ישיר לשליחת הודעה לאותו המספר ובנוסף ניתן להכניס גם הודעה מוכנה מראש.
המספר שאליו ישלח ההודעה:
הודעה:(לא חובה)
הקישור שלך נמצא כאן:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>whatsup generator</title>
<style>
/*coded by Ofek Moshe Hadjadj - Brilliant Web https://brilliant-web.co.il/ */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
direction: rtl;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* #answer{
background-color: white;
border: 0.5px solid rgb(110, 110, 110);
border-radius: 3px;
} */
.inner-continar-wtsup {
background-image: url("ball-mobile1.jpg");
background-size: auto;
background-position: bottom;
background-repeat: no-repeat;
max-width: 20%;
margin: 0 auto;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 16px -3px rgba(0, 0, 0, 0.64);
-moz-box-shadow: 0px 0px 16px -3px rgba(0, 0, 0, 0.64);
box-shadow: 0px 0px 16px -3px rgba(0, 0, 0, 0.64);
text-align: right;
padding: 1.5em;
}
input#tel,
input#message,
input#answer {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
padding-top: 4px;
padding-bottom: 4px;
border: none;
border-bottom: 2px solid orange;
margin-bottom: 20px;
}
input#answer {
margin: 0;
}
div.bts {
display: flex;
justify-content: space-between;
}
div.bts button {
width: 48%;
background: linear-gradient(to right, rgba(208, 99, 107, 1) 0%, rgba(255, 175, 88, 1) 100%);
background: -moz-linear-gradient(left, rgba(208, 99, 107, 1) 0%, rgba(255, 175, 88, 1) 100%);
background: -webkit-linear-gradient(left, rgba(208, 99, 107, 1) 0%, rgba(255, 175, 88, 1) 100%);
border-radius: 5px;
border: none;
color: white;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 15px;
transition: 0.5s;
}
div.bts button:hover {
background: orange;
}
@media only screen and (max-width: 1000px) {
.inner-continar-wtsup {
max-width: 30%;
}
}
@media only screen and (max-width: 600px) {
.inner-continar-wtsup {
max-width: 74%;
}
}
</style>
</head>
<body>
<div class="continar-wtsup">
<div class="inner-continar-wtsup">
<h2>מספר:</h2>
<input placeholder="אנא הקלד כאן את המספר אליו תרצה לשלוח הודעה" id="tel" type="tel">
<h2>הודעה:(לא חובה)</h2>
<input placeholder="אנא הקלד כאן את תוכן ההודעה הראשונית" id="message" type="text">
<h2>הקישור שלך נמצא כאן:</h2>
<input placeholder="הלינק שלך יופיע כאן" type="text" value="" id="answer">
<div class="bts">
<button id="trigger">הכן לינק</button>
<button id="copy">העתק לינק</button>
</div>
</div>
</div>
<script>
//Target the elements
const tel = document.getElementById("tel");
const message = document.getElementById("message");
const copy = document.getElementById("copy");
const answer = document.getElementById("answer");
//Link calculation
document.getElementById("trigger").addEventListener("click", function () {
let link = `https://api.whatsapp.com/send?phone=972${tel.value}&text=${message.value}`;
let valeadd = answer.value = link;
});
//Copy from input
document.getElementById("copy").addEventListener("click", function () {
let copyText = document.getElementById("answer");
if (copyText.value === "") { return alert("אנא הזן מספר ולחץ הכן לינק"); };
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert(":הקישור שלך הועתק " + copyText.value);
});
// coded by Ofek Moshe Hadjadj - Brilliant Web https://brilliant-web.co.il/
</script>
</body>
</html>
מעניין אותכם לקבל עוד מדריכים בנושא דיגיטל?
קבוצה חדשה הנועדה לשיתוף קטעי קוד , מדריכים ותוספים שימושים שהומלצו בקבוצות השונות 😎
הקבוצה ללא חפירות – ישלח טיפ אחד ליום או ריכוז של כמה ביחד ויכלול הסבר קצר וקרדיטים כמובן!
נתקלתם בבעיה ? צריכים עזרה ?
השאירו פרטים , ניצור קשר בקרוב ונשמח לעזור