Kod:
<html>
<body>
<form>
<label for="phone">Telefon Numaranız:</label><br>
<input type="number" id="phone" name="phone" placeholder="905555555555 Şeklinde"><br>
<label for="message">Mesajınız:</label><br>
<input type="text" id="message" name="message"><br>
<button type="button" onclick="generateLink()">WhatsApp Linkini Oluştur</button>
<button class="linkbutonu" type="button" onclick="copyLink()" id="copy-button" disabled>Linki Kopyala</button>
<p>Oluşturduğunuz Link:</p>
<textarea style="resize: none;" id="link" rows="5" cols="50"></textarea>
</form>
<br>
</body>
<script>
function generateLink() {
var phone = document.getElementById("phone").value;
var message = document.getElementById("message").value;
message = encodeURIComponent(message);
var link = "https://wa.me/" + phone + "?text=" + message;
document.getElementById("link").value = link;
document.getElementById("copy-button").disabled = false;
}
function copyLink() {
var link = document.getElementById("link");
link.select();
link.setSelectionRange(0, 99999);
document.execCommand("copy");
// Bildir
alert("Mesaj Linki Kopyalandı: " + link.value);
}
</script>
<!-- Stil kodları /-->
<style>
body {
font-family: quicksand;
}
form {
width: 400px;
margin: 0 auto;
font-weight: 600;
background-color: #efefef;
padding: 35px;
border-radius: 20px;
}
label {
display: block;
}
input, textarea {
width: 400px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 10px;
}
textarea
{
background-color: white;
}
button {
background-color: #4dc247 ;
font-weight: 500;
letter-spacing: .5px;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: quicksand;
}
button:hover {
background-color: #4783c2;
}
.linkbutonu
{
background-color: #4783c2;
}
.linkbutonu:hover
{
background-color: #4dc247;
}
</style>
</html>
