HTML;
<!-- Modal -->
<div class="modal fade slide-up" id="talepFormuModal" tabindex="-1" aria-labelledby="talepFormuModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content mdl0"><div class="modal-header modal-header-custom">
<div class="d-flex align-items-center gap-2">
<i class="bi bi-journal-text header-icon"></i>
<h5 class="modal-title mb-0" id="talepFormuModalLabel">Talep Formu</h5>
</div>
<button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Kapat">
<i class="bi bi-x-lg"></i>
</button>
</div><div class="modal-body">
<form id="talepFormu" novalidate>
<input type="hidden" id="daireID" name="daireID" value="@ViewData["vDaireID"]">
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="adSoyad" class="form-label">Daire Bilgileri</label>
<input type="text" class="form-control" id="tDaireBilgileri" name="tDaireBilgileri" value="@ViewData["vDaireBilgileri"]" readonly>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label for="adSoyad" class="form-label">Ad Soyad *</label>
<input type="text" class="form-control" id="adSoyad" name="adSoyad" placeholder="Adınızı ve soyadınızı yazınız">
<div class="invalid-feedback">Ad Soyad alanı gereklidir.</div>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label for="telefon" class="form-label">Telefon *</label>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon numaranızı yazınız">
<div class="invalid-feedback">Telefon alanı gereklidir.</div>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-posta adresiniz (opsiyonel)">
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label for="mesaj" class="form-label">Mesaj *</label>
<textarea class="form-control" id="mesaj" name="mesaj" rows="3" placeholder="Taleplerinizi buraya yazınız"></textarea>
<div class="invalid-feedback">Mesaj alanı gereklidir.</div>
</div>
</div>
<div class="col-12">
<div class="d-flex justify-content-between align-items-center">
<!-- Gönder Butonu -->
<button type="submit" id="formGonderBtn" class="btn btn-gradient-primary d-flex align-items-center">
<span class="button-text">
<i class="bi bi-send me-2"></i> Gönder
</span>
<span class="button-loading d-none d-flex align-items-center">
<span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
Gönderiliyor...
</span>
</button>
<!-- Kapat Butonu -->
<button type="button" class="btn btn-light d-flex align-items-center" data-bs-dismiss="modal">
<i class="bi bi-x-circle me-2"></i> Kapat
</button>
</div>
</div>
</div>
</form>
</div></div>
</div>
</div>
Javascript;
<script>
$(document).ready(function () {$('#talepFormuModal').on('hidden.bs.modal', function () {
// Formu temizle
$("#talepFormu")[0].reset();// Validation hatalarını temizle
$("#talepFormu input, #talepFormu textarea").removeClass('is-invalid');// Gönder butonunu da resetle
$("#formGonderBtn").prop('disabled', false);
$("#formGonderBtn .button-text").removeClass('d-none');
$("#formGonderBtn .button-loading").addClass('d-none');
});function validateField(field) {
if ($(field).val().trim() === "") {
$(field).addClass('is-invalid');
} else {
$(field).removeClass('is-invalid');
}
}$("#talepFormu").submit(function (e) {
e.preventDefault();var isValid = true;
$("#talepFormu input, #talepFormu textarea").removeClass('is-invalid');validateField("#adSoyad");
validateField("#telefon");
validateField("#mesaj");if ($("#adSoyad").val().trim() === "") isValid = false;
if ($("#telefon").val().trim() === "") isValid = false;
if ($("#mesaj").val().trim() === "") isValid = false;if (isValid) {
$("#formGonderBtn").prop('disabled', true);
$("#formGonderBtn .button-text").addClass('d-none');
$("#formGonderBtn .button-loading").removeClass('d-none');var formData = {
adSoyad: $("#adSoyad").val(),
telefon: $("#telefon").val(),
email: $("#email").val(),
mesaj: $("#mesaj").val(),
daireID: $("#daireID").val()
};$.ajax({
type: "POST",
url: "/Form/DaireTalepFormu",
data: formData,
success: function (response) {
if (response.trim() === "OK") {
alert("Form başarıyla gönderildi!");
$('#talepFormuModal').modal('hide');
$("#talepFormu")[0].reset();
} else {
alert(response); // Sunucudan gelen hata mesajını göster
}// Butonu her durumda aç
$("#formGonderBtn").prop('disabled', false);
$("#formGonderBtn .button-text").removeClass('d-none');
$("#formGonderBtn .button-loading").addClass('d-none');
},
error: function () {
alert("Gönderim sırasında bir hata oluştu."); // AJAX (HTTP) bazlı hata (500/404 vs.)
$("#formGonderBtn").prop('disabled', false);
$("#formGonderBtn .button-text").removeClass('d-none');
$("#formGonderBtn .button-loading").addClass('d-none');
}
});
}
});// Real-time validation
$("#adSoyad, #telefon, #mesaj").on('input', function () {
validateField(this);
});
});
</script>
Css;
<style>
/* Modal Stil */
.mdl0 {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}/* Input ve Textarea */
.form-control {
border-radius: 12px;
border: 1px solid #ced4da;
background-color: #f9f9f9;
transition: all 0.3s ease;
font-size: 16px;
padding: 12px 20px;
}.form-control:focus {
background-color: #ffffff;
border-color: #4CAF50;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
transform: scale(1.02);
}/* Input Focus Underline Animation */
.form-control:focus {
border-bottom: 2px solid #4CAF50;
}/* Placeholder */
.form-control::placeholder {
color: #adb5bd;
opacity: 1;
}/* Gönder Butonu (Gradient, Glow ve Pulse) */
.btn-gradient-primary {
background: linear-gradient(45deg, #4CAF50, #81C784);
border: none;
color: #fff;
font-weight: 600;
padding: 12px 28px;
border-radius: 50px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 0 5px #4CAF50;
animation: pulse 2s infinite;
}.btn-gradient-primary:hover {
background: linear-gradient(45deg, #43A047, #66BB6A);
box-shadow: 0 0 15px rgba(67, 160, 71, 0.8);
}/* Icon Movement on Hover */
.btn-gradient-primary:hover i {
transform: translateX(5px) rotate(10deg);
}.btn-gradient-primary i {
transition: all 0.4s ease;
}/* Kapat Butonu */
.btn-light {
border-radius: 50px;
padding: 12px 28px;
font-weight: 500;
color: #6c757d;
background-color: #f8f9fa;
border: 1px solid #ced4da;
transition: all 0.3s ease-in-out;
}.btn-light:hover {
background-color: #e2e6ea;
color: #495057;
}/* Pulse Animation for Submit Button */
@@keyframes pulse {
0% {
box-shadow: 0 0 5px #4CAF50;
}50% {
box-shadow: 0 0 20px #4CAF50;
}100% {
box-shadow: 0 0 5px #4CAF50;
}
}/* Modal Slide Up Animation */
@@keyframes slideUp {
0% {
transform: translateY(100px);
opacity: 0;
}100% {
transform: translateY(0);
opacity: 1;
}
}.slide-up .modal-dialog {
animation: slideUp 0.5s ease-out;
}/* Form Hataları (Invalid-feedback) */
.invalid-feedback {
font-size: 14px;
color: #d9534f;
margin-top: 5px;
}/* Spinner Align */
.spinner-grow {
vertical-align: middle;
}
.modal-body {
padding: 20px;
}
/* Modal Header Custom */
.modal-header-custom {
background: linear-gradient(90deg, #4CAF50, #81C784);
padding: 11px 15px 15px 15px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}/* Header Icon */
.header-icon {
font-size: 24px;
color: #ffffff;
}/* Custom Close Button */
.btn-close-custom {
background: none;
border: none;
color: #ffffff;
font-size: 20px;
transition: all 0.3s ease;
}.btn-close-custom:hover {
color: #d4d4d4;
transform: rotate(90deg);
}/* Title */
.modal-title {
font-size: 22px;
font-weight: 600;
}/* Kapatma X İkon */
.bi-x-lg {
font-size: 20px;
}
/* Gönder Butonu */
.btn-gradient-primary {
background: linear-gradient(45deg, #4CAF50, #81C784);
border: none;
color: #fff;
font-weight: 600;
padding: 12px 28px;
border-radius: 50px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 0 5px #4CAF50;
animation: pulse2 2s infinite;
}/* Pulse Efekt */
@@keyframes pulse2 {
0% {
box-shadow: 0 0 5px #4CAF50;
}
50% {
box-shadow: 0 0 20px #4CAF50;
}
100% {
box-shadow: 0 0 5px #4CAF50;
}
}/* Yazı ve İkon Animasyonu */
@@keyframes slideRightLoop2 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}/* Sadece hover'da animasyon başlasın */
.btn-gradient-primary:hover .button-text {
animation: slideRightLoop2 1.5s ease-in-out infinite;
}.button-text {
display: flex;
align-items: center;
transition: all 0.3s ease;
}.btn-gradient-primary:hover {
color: #fff;
background: linear-gradient(45deg, #55c659, #068b0b);
}
</style>
Controller;
[HttpPost]
public ActionResult DaireTalepFormu(string adSoyad, string telefon, string email, string mesaj, int daireID)
{
using (dbfirmaSitesi = new dbfirmaSitesi())
{
try
{
string ip = Request.UserHostAddress;// Son 3 kaydı tarih sırasına göre getiriyoruz (en yeni 3 kayıt)
var sonUcKayit = db.formlar_
.OrderByDescending(t => t.zaman)
.Take(3)
.Select(t => t.ip)
.ToList();// Eğer son 3 kaydın hepsi bu IP'den ise kaydı reddet
if (sonUcKayit.Count == 3 && sonUcKayit.All(x => x == ip))
{
return Content("HATA: Çok fazla istek yapıldı. Lütfen daha sonra tekrar deneyin.");
}// Yeni kayıt işlemi
var yeniTalep = new formlar_
{
adsoyad = adSoyad,
telefon = telefon,
email = email,
mesaj = mesaj,
ip = ip,
zaman = DateTime.Now,
durum = 1,
tur = 5,
daireID = daireID
};db.formlar_.Add(yeniTalep);
db.SaveChanges();return Content("OK");
}
catch (Exception ex)
{
return Content("HATA: " + ex.Message);
}
}
}
C#,MVC,MSSQL,Windows Forms