139 lines
5.4 KiB
HTML
139 lines
5.4 KiB
HTML
<!DOCTYPE html><html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Connect</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- =======================================================
|
|
NAV
|
|
======================================================= -->
|
|
<header class="nav">
|
|
<a href="index.html" class="logo">BIOHAZARD VFX</a>
|
|
<nav>
|
|
<a href="index.html#about">About</a>
|
|
<!-- <a href="index.html#case-studies">Case Studies</a> -->
|
|
<a href="index.html#projects">Work</a>
|
|
<a href="contact.html">Connect</a>
|
|
<a href="faq.html">FAQ</a>
|
|
<a href="index.html#team">Crew</a>
|
|
</nav>
|
|
</header>
|
|
<script>
|
|
(function(){
|
|
const overlay=document.createElement('div');
|
|
overlay.id='loader-overlay';
|
|
overlay.innerHTML='<div class="spinner"></div>';
|
|
document.body.appendChild(overlay);
|
|
window.addEventListener('load',()=>{overlay.classList.add('hide');setTimeout(()=>overlay.remove(),700);});
|
|
})();
|
|
</script>
|
|
<!-- Inline styles moved to css/styles.css -->
|
|
|
|
<!-- CONTACT SECTION -->
|
|
<section id="contact" class="section">
|
|
<h2>CONNECT</h2>
|
|
<form id="contactForm" action="https://api.web3forms.com/submit" method="POST" autocomplete="on">
|
|
<input type="hidden" name="access_key" value="cf89ee88-fb13-4091-ac7c-96249aa34eb0">
|
|
<input type="hidden" name="subject" value="New Contact Form Submission from Biohazard VFX">
|
|
<input type="hidden" name="from_name" id="from_name">
|
|
<input type="hidden" name="formatted_message" id="formatted_message">
|
|
<!-- Honeypot field for spam protection -->
|
|
<input type="text" name="website" class="honeypot" tabindex="-1" autocomplete="off">
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<label for="first_name">First Name</label>
|
|
<input type="text" id="first_name" name="first_name" placeholder="First Name" required aria-required="true">
|
|
</div>
|
|
<div class="form-col">
|
|
<label for="last_name">Last Name</label>
|
|
<input type="text" id="last_name" name="last_name" placeholder="Last Name" required aria-required="true">
|
|
</div>
|
|
</div>
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" name="email" placeholder="Your Email" required aria-required="true">
|
|
<label for="user_subject">Subject</label>
|
|
<input type="text" id="user_subject" name="user_subject" placeholder="Subject" required aria-required="true">
|
|
<label for="message">Message</label>
|
|
<textarea id="message" name="message" rows="6" placeholder="Yap yap yap... spit your truth, we're all ears." required aria-required="true"></textarea>
|
|
<button type="submit">Send Message</button>
|
|
<div id="formMessage" class="form-message"></div>
|
|
<div class="contact-info">
|
|
<p>We usually reply within 24 hours.<br>Email: <a href="mailto:contact@biohazardvfx.com">contact@biohazardvfx.com</a></p>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<div id="socials-placeholder"></div>
|
|
<script>
|
|
// Inject nav fragment
|
|
fetch('fragments/nav.html')
|
|
.then(r => r.text())
|
|
.then(html => {
|
|
document.getElementById('nav-placeholder').outerHTML = html;
|
|
});
|
|
// Inject socials fragment
|
|
fetch('fragments/socials.html')
|
|
.then(r => r.text())
|
|
.then(html => {
|
|
document.getElementById('socials-placeholder').outerHTML = html;
|
|
});
|
|
// Custom feedback for form submission
|
|
const form = document.getElementById('contactForm');
|
|
const msg = document.getElementById('formMessage');
|
|
form.addEventListener('submit', function(e) {
|
|
msg.style.display = 'none';
|
|
msg.className = 'form-message';
|
|
});
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// Compose clean message for Web3Forms
|
|
const first = form.first_name.value.trim();
|
|
const last = form.last_name.value.trim();
|
|
const email = form.email.value.trim();
|
|
const subject = form.user_subject.value.trim();
|
|
const message = form.message.value.trim();
|
|
form.from_name.value = `${first} ${last}`;
|
|
form.formatted_message.value =
|
|
`Name: ${first} ${last}\nEmail: ${email}\nSubject: ${subject}\nMessage:\n${message}`;
|
|
const formData = new FormData(form);
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
msg.textContent = 'Thank you! Your message has been sent.';
|
|
msg.classList.add('success');
|
|
msg.style.display = 'block';
|
|
form.reset();
|
|
} else {
|
|
msg.textContent = 'There was an error sending your message. Please try again.';
|
|
msg.classList.add('error');
|
|
msg.style.display = 'block';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
msg.textContent = 'There was an error sending your message. Please try again.';
|
|
msg.classList.add('error');
|
|
msg.style.display = 'block';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<!-- =======================================================
|
|
COPYRIGHT
|
|
(static content, copyright notice)
|
|
======================================================= -->
|
|
|
|
<footer>
|
|
<p>© 2025 Biohazard VFX. All Rights Reserved.</p>
|
|
</footer>
|
|
<script src="js/ui.js" defer></script>
|
|
|
|
</body>
|
|
</html>
|