Add project files.
This commit is contained in:
@@ -0,0 +1,172 @@
|
||||
@model CreateContactUsDto
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||
|
||||
<section class="section novi-background bg-cover bg-white section-inset-1 parallax-scene-js" id="contacts">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6 d-none d-lg-block wow fadeInLeft">
|
||||
<img src="~/SeedData/ContactForm_Image-1.png" alt="" width="538" height="694" />
|
||||
</div>
|
||||
<div class="col-md-8 col-lg-6">
|
||||
<div class="inset-xl-left-35 section-sm">
|
||||
<h3 class="wow fadeInRight">Bize<br>Ulaşın</h3>
|
||||
<h6 class="title-style-1 wow fadeInRight" data-wow-delay=".05s"
|
||||
style="background-color: #ffffff; display: inline-block; padding: 5px 10px; border-radius: 6px;">
|
||||
Gelin Birlikte Çalışalım!
|
||||
</h6>
|
||||
|
||||
<div class="form-style-1 context-dark wow blurIn">
|
||||
<!-- RD Mailform-->
|
||||
<form method="post" class="rd-mailform text-left" id="contactForm">
|
||||
<div class="form-wrap">
|
||||
<input class="form-input" placeholder="Adınız Soyadınız" asp-for="NameSurname" id="nameInput" required />
|
||||
<span asp-validation-for="NameSurname" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input class="form-input" placeholder="e-posta Adresiniz" asp-for="Mail" id="emailInput" required />
|
||||
<span asp-validation-for="Mail" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input class="form-input" placeholder="Telefonunuz" asp-for="Phone" id="phoneInput" required />
|
||||
<span asp-validation-for="Phone" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<textarea class="form-input" placeholder="Mesajınız" asp-for="MessageContent" id="messageInput" required></textarea>
|
||||
<span asp-validation-for="MessageContent" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="g-recaptcha" data-sitekey="6LeH2M8qAAAAAHbDq0txKL7O48Wo9vgHvkXP7_-X"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-button">
|
||||
<button class="button button-jerry button-primary" type="button" id="sendMessageButton">
|
||||
Gönder<span class="button-jerry-line"></span><span class="button-jerry-line"></span><span class="button-jerry-line"></span><span class="button-jerry-line"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer-wrap layer-3">
|
||||
<div class="layer" data-depth="0.4">
|
||||
<img src="~/SeedData/ContactForm_bg.png" alt="" width="1047" height="531" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var contacts = document.getElementById('contacts');
|
||||
var parallaxInstance = new Parallax(contacts);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).on("click", "#sendMessageButton", function () {
|
||||
var isValid = true;
|
||||
|
||||
// Form elemanlarını al
|
||||
var name = $("#nameInput").val().trim();
|
||||
var email = $("#emailInput").val().trim();
|
||||
var phone = $("#phoneInput").val().trim();
|
||||
var message = $("#messageInput").val().trim();
|
||||
|
||||
// Önce tüm hata stillerini temizle
|
||||
$(".form-input").removeClass("input-error");
|
||||
|
||||
// Boş alan kontrolü
|
||||
if (!name) {
|
||||
$("#nameInput").addClass("input-error");
|
||||
isValid = false;
|
||||
}
|
||||
if (!email) {
|
||||
$("#emailInput").addClass("input-error");
|
||||
isValid = false;
|
||||
}
|
||||
if (!phone) {
|
||||
$("#phoneInput").addClass("input-error");
|
||||
isValid = false;
|
||||
}
|
||||
if (!message) {
|
||||
$("#messageInput").addClass("input-error");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
alert("Lütfen tüm alanları doldurunuz.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Email doğrulaması
|
||||
if (isValid && !validateEmail(email)) {
|
||||
isValid = false;
|
||||
errorMessage = "Geçerli bir email adresi giriniz.";
|
||||
}
|
||||
|
||||
|
||||
// Telefon formatı kontrolü
|
||||
if (!/^\d{3} \d{3} \d{2} \d{2}$/.test(phone)) {
|
||||
$("#phoneInput").addClass("input-error");
|
||||
alert("Telefon numarası sadece şu formatta olmalıdır: 555 111 22 33");
|
||||
return;
|
||||
}
|
||||
|
||||
// reCAPTCHA doğrulaması
|
||||
var recaptchaResponse = grecaptcha.getResponse();
|
||||
if (isValid && recaptchaResponse.length == 0) {
|
||||
isValid = false;
|
||||
errorMessage = "Lütfen reCAPTCHA doğrulamasını yapın.";
|
||||
}
|
||||
|
||||
// Hata mesajını gösterme
|
||||
if (!isValid) {
|
||||
alert(errorMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
// Form verisi
|
||||
var contactData = {
|
||||
NameSurname: name,
|
||||
Mail: email,
|
||||
Phone: phone,
|
||||
MessageContent: message,
|
||||
RecaptchaResponse: recaptchaResponse
|
||||
};
|
||||
|
||||
// AJAX ile gönderim
|
||||
$.ajax({
|
||||
url: '@ViewBag.ApiBaseUrl/api/ContactUs',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(contactData),
|
||||
success: function () {
|
||||
alert("Mesajınız başarıyla gönderildi. En kısa sürede sizinle iletişime geçeceğiz!");
|
||||
$("#contactForm")[0].reset();
|
||||
grecaptcha.reset(); // reCAPTCHA sıfırlanır
|
||||
},
|
||||
error: function () {
|
||||
alert("Mesaj gönderilirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Email doğrulama fonksiyonu
|
||||
function validateEmail(email) {
|
||||
var regex = /^[a-zA-Z0-9._-]+@@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
|
||||
return regex.test(email);
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.input-error {
|
||||
border: 2px solid #c4956a !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user