Spaces:

bribrunner
/

florida-keys-wave-wizards

Running

how do i make this form functional and protected from bots with recaptcha?

a7d1dc6 verified 12 months ago

3.54 kB

// Banner close functionality
const closeBanner = document.getElementById('closeBanner');
const comingSoonBanner = document.getElementById('comingSoonBanner');

if (closeBanner && comingSoonBanner) {
    closeBanner.addEventListener('click', function() {
        comingSoonBanner.classList.add('hidden');
        document.body.classList.add('banner-hidden');
        
        setTimeout(() => {
            comingSoonBanner.style.display = 'none';
        }, 300); // Match this with CSS transition duration
    });
}

// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
    const menu = document.getElementById('mobile-menu');
    menu.classList.toggle('hidden');
});
// Form submission handler
function onSubmit(token) {
    const form = document.getElementById('wakeForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    // Remove bot field from data
    delete data['bot-field'];
    
    // Here you would send the data to your server/Netlify
    fetch('/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(formData).toString()
    })
    .then(() => {
        // Show success message
        alert('Thanks for your inquiry! We\'ll get back to you soon to plan your Florida Keys wakesurfing adventure.');
        form.reset();
    })
    .catch((error) => {
        console.error('Form submission error:', error);
        alert('There was an error submitting your form. Please try again or contact us directly.');
    });
}

// Form submission event
document.getElementById('wakeForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    // Trigger reCAPTCHA
    grecaptcha.execute();
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            const headerOffset = 80; // Height of your header
            const elementPosition = targetElement.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
            
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
            
            // Close mobile menu if open
            const mobileMenu = document.getElementById('mobile-menu');
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
            }
        }
    });
});

// Feather icons replacement (in case they need to be refreshed)
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});

// Add animation to FAQ items when they come into view
const faqItems = document.querySelectorAll('#faq > div > div');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, { threshold: 0.1 });

faqItems.forEach(item => {
    item.style.opacity = '0';
    item.style.transform = 'translateY(20px)';
    item.style.transition = 'all 0.4s ease';
    observer.observe(item);
});


	// Banner close functionality
	const closeBanner = document.getElementById('closeBanner');
	const comingSoonBanner = document.getElementById('comingSoonBanner');

	if (closeBanner && comingSoonBanner) {
	closeBanner.addEventListener('click', function() {
	comingSoonBanner.classList.add('hidden');
	document.body.classList.add('banner-hidden');

	setTimeout(() => {
	comingSoonBanner.style.display = 'none';
	}, 300); // Match this with CSS transition duration
	});
	}

	// Mobile menu toggle
	document.getElementById('menu-toggle').addEventListener('click', function() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('hidden');
	});
	// Form submission handler
	function onSubmit(token) {
	const form = document.getElementById('wakeForm');
	const formData = new FormData(form);
	const data = Object.fromEntries(formData.entries());

	// Remove bot field from data
	delete data['bot-field'];

	// Here you would send the data to your server/Netlify
	fetch('/', {
	method: 'POST',
	headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
	body: new URLSearchParams(formData).toString()
	})
	.then(() => {
	// Show success message
	alert('Thanks for your inquiry! We\'ll get back to you soon to plan your Florida Keys wakesurfing adventure.');
	form.reset();
	})
	.catch((error) => {
	console.error('Form submission error:', error);
	alert('There was an error submitting your form. Please try again or contact us directly.');
	});
	}

	// Form submission event
	document.getElementById('wakeForm')?.addEventListener('submit', function(e) {
	e.preventDefault();
	// Trigger reCAPTCHA
	grecaptcha.execute();
	});
	// Smooth scrolling for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	if (targetId === '#') return;

	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	const headerOffset = 80; // Height of your header
	const elementPosition = targetElement.getBoundingClientRect().top;
	const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

	window.scrollTo({
	top: offsetPosition,
	behavior: 'smooth'
	});

	// Close mobile menu if open
	const mobileMenu = document.getElementById('mobile-menu');
	if (!mobileMenu.classList.contains('hidden')) {
	mobileMenu.classList.add('hidden');
	}
	}
	});
	});

	// Feather icons replacement (in case they need to be refreshed)
	document.addEventListener('DOMContentLoaded', function() {
	feather.replace();
	});

	// Add animation to FAQ items when they come into view
	const faqItems = document.querySelectorAll('#faq > div > div');
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.style.opacity = '1';
	entry.target.style.transform = 'translateY(0)';
	}
	});
	}, { threshold: 0.1 });

	faqItems.forEach(item => {
	item.style.opacity = '0';
	item.style.transform = 'translateY(20px)';
	item.style.transition = 'all 0.4s ease';
	observer.observe(item);
	});