Antrium A35D

Bir sonraki için en iyisini yap...

Bootstrap 5 Talep Formu (Form + Doğrulama + Javascript + CSS ) (TAM KOD)

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);
         }
     }
 }

30 Okunma | 30.05.2025 15:54

YORUMLAR

Yorum Yaz
Hüseyin ÖZKAN Yazılım Uzmanı

C#,MVC,MSSQL,Windows Forms