PK
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>STUDIO DWS | Contact</title>
<style type="text/css">
.error { color: red; }
</style>
</head>
<body>
<!-- header -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary fixed-top">
<div class="container pd-lr">
<a class="navbar-brand" href="index.html">STUDIO DWS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="vita.html">Vita</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="btn btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i
>
</a>
<a class="btn btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook"></i
>
</a>
<a class="btn btn-floating m-1" href="#!" role="button">
<i class="fab fa-pinterest"></i
>
</a>
</form>
</div>
</div>
</nav>
<!-- end header -->
<div class="maindiv">
<section class="section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 p-0 border-black">
<img src="assets/images/home/3.jpg" class="img-fluid">
</div>
<div class="col-lg-6 p-0">
<div class="contact-frm-box">
<h4 class="heading-lg">GET IN TOUCH </h4>
<form class="feedbackform" method="POST" action="" id="formnew">
<div class="form-group">
<input type="text" class="form-control input-btn" id="username" placeholder="Name*" name="username">
</div>
<div class="form-group">
<input type="email" class="form-control input-btn" name="email" id="email" aria-describedby="emailHelp" placeholder="Email Address*">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message*" name="message" id="message"></textarea>
</div>
<div id="feedbackmessage"></div>
<button type="submit" class="theme-btn">SUBMIT REQUEST</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- footer -->
<!-- Remove the container if you want to extend the Footer to full width. -->
<div class="container-fluid mt-5 p-0">
<!-- Footer -->
<footer class="text-center text-lg-start text-white" style="background-color: #dfd6ce;">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- Section: Links -->
<section class="">
<!--Grid row-->
<div class="row justify-content-md-center">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">INTERIOR DESIGN</a>
</li>
<li>
<a href="#!" class="text-white">ART DIRECTION</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">JOURNAL</a>
</li>
<li>
<a href="#!" class="text-white">CAREERS</a>
</li>
<li>
<a href="#!" class="text-white">EVENTS</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!-- Section: Links -->
<hr class="mb-4" />
<!-- Section: Social media -->
<section class="mb-4 text-center">
<!-- Facebook -->
<a
class="btn btn-outline-light btn-floating m-1"
href="#!"
role="button"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a
class="btn btn-outline-light btn-floating m-1"
href="#!"
role="button"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a
class="btn btn-outline-light btn-floating m-1"
href="#!"
role="button"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a
class="btn btn-outline-light btn-floating m-1"
href="#!"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-outline-light btn-floating m-1"
href="#!"
role="button"
><i class="fab fa-linkedin-in"></i
></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
© 2023 Copyright:
<a class="text-white" href="#"
>STUDIO DWS</a
>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<!-- End of .container -->
<!-- end footer -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script type='text/javascript' src="//jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script type='text/javascript' src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function () {
$('#formnew').on('submit', function (e) {
e.preventDefault(); // Prevent default form submission
// Clear previous error messages
$('.error').remove();
// Validation
let username = $('#username').val().trim();
let email = $('#email').val().trim();
let message = $('#message').val().trim();
let isValid = true;
if (!username) {
$('#username').after('<span class="error" style="color:red; font-size:18px;">Please enter your username</span>');
isValid = false;
}
if (!validateEmail(email)) {
$('#email').after('<span class="error" style="color:red; font-size:18px;">Please enter a valid email address</span>');
isValid = false;
}
if (!message) {
$('#message').after('<span class="error" style="color:red; font-size:18px;">Please enter your message</span>');
isValid = false;
}
if (isValid) {
// Prepare form data
var formData = { username, email, message };
// Show processing message
$('#feedbackmessage').html('<span style="color:blue;">Processing your request, please wait...</span>');
// AJAX request
$.ajax({
url: "post.php",
type: "POST",
data: formData,
success: function (response) {
const res = JSON.parse(response);
if (res.success) {
$('#formnew')[0].reset();
$('#feedbackmessage').html('<span style="color:green; font-size:18px;">Your request was successfully submitted!</span>');
setTimeout(() => $('#feedbackmessage').html(''), 10000);
} else {
$('#feedbackmessage').html('<span style="color:red; font-size:18px;">Failed to submit the form. Please try again later.</span>');
}
},
error: function () {
$('#feedbackmessage').html('<span style="color:red; font-size:18px;">An error occurred while submitting the form.</span>');
},
});
}
});
// Email validation function
function validateEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
});
</script>
</body>
</html>
PK 99