Files
ukaiautomation/quote.php

982 lines
40 KiB
PHP
Raw Normal View History

<?php
// Start session before any output
ini_set('session.cookie_samesite', 'Lax');
ini_set('session.cookie_httponly', '1');
ini_set('session.cookie_secure', '1'); // Set to '1' if using HTTPS
session_start();
// Enhanced security headers
header('Strict-Transport-Security: max-age=31536000; includeSubDomains');
$page_title = "Get a Free Quote | UK AI Automation - AI Automation";
$page_description = "Get in touch and we'll scope your project. We'll look at one of your manual workflows and show you how it could be automated using AI. No commitment.";
$canonical_url = "https://ukaiautomation.co.uk/quote";
// Breadcrumb navigation
$breadcrumbs = [
['url' => '/', 'label' => 'Home'],
['url' => '', 'label' => 'Get a Quote']
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($page_title); ?></title>
<meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
<meta name="keywords" content="AI automation demo, AI automation consulting UK, book demo, document extraction, research automation">
<meta name="author" content="UK AI Automation">
<meta name="robots" content="index, follow">
<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo htmlspecialchars($canonical_url); ?>">
<meta property="og:title" content="<?php echo htmlspecialchars($page_title); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
<meta property="og:image" content="https://ukaiautomation.co.uk/assets/images/ukaiautomation-logo.svg">
<meta property="og:locale" content="en_GB">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="<?php echo htmlspecialchars($canonical_url); ?>">
<meta name="twitter:title" content="<?php echo htmlspecialchars($page_title); ?>">
<meta name="twitter:description" content="<?php echo htmlspecialchars($page_description); ?>">
<meta name="twitter:image" content="https://ukaiautomation.co.uk/assets/images/ukaiautomation-logo.svg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="assets/css/main.css?v=20260222">
<!-- Google reCAPTCHA v3 -->
<?php require_once '.recaptcha-config.php'; ?>
<script src="https://www.google.com/recaptcha/api.js?render=<?php echo RECAPTCHA_SITE_KEY; ?>"></script>
<!-- Quote Page Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"@id": "https://ukaiautomation.co.uk/quote#webpage",
"url": "https://ukaiautomation.co.uk/quote",
"name": "Get Free Quote - UK AI Automation",
"description": "Request a free, no-obligation quote for professional AI Automation and data extraction services. Get detailed proposal within 24 hours.",
"mainEntity": {
"@type": "Service",
"name": "Data Extraction Quote Service",
"description": "Free consultation and detailed quote for AI Automation and data analytics projects",
"provider": {
"@id": "https://ukaiautomation.co.uk#organization"
},
"offers": {
"@type": "Offer",
"name": "Free Project Consultation",
"description": "Comprehensive project analysis and detailed quote within 24 hours",
"price": "0",
"priceCurrency": "GBP",
"availability": "https://schema.org/InStock",
"validFrom": "2024-01-01",
"priceValidUntil": "2025-12-31",
"areaServed": {
"@type": "Country",
"name": "United Kingdom"
}
}
}
}
</script>
<!-- Service Catalog Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"name": "UK AI Automation - Service Catalog",
"description": "Comprehensive data services available for quote",
"numberOfItems": 6,
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "Service",
"name": "AI Automation & Data Extraction",
"description": "Professional AI Automation and data extraction services",
"offers": {
"@type": "Offer",
"priceRange": "£500-£50000",
"priceCurrency": "GBP"
}
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "Service",
"name": "Business Intelligence & Analytics",
"description": "Data analytics and business intelligence solutions",
"offers": {
"@type": "Offer",
"priceRange": "£1000-£25000",
"priceCurrency": "GBP"
}
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@type": "Service",
"name": "Data Processing & Cleaning",
"description": "Data cleaning, transformation, and quality assurance",
"offers": {
"@type": "Offer",
"priceRange": "£750-£15000",
"priceCurrency": "GBP"
}
}
},
{
"@type": "ListItem",
"position": 4,
"item": {
"@type": "Service",
"name": "Automation & APIs",
"description": "Custom automation solutions and API integrations",
"offers": {
"@type": "Offer",
"priceRange": "£2000-£20000",
"priceCurrency": "GBP"
}
}
},
{
"@type": "ListItem",
"position": 5,
"item": {
"@type": "Service",
"name": "Custom Development",
"description": "Bespoke data solutions and custom development",
"offers": {
"@type": "Offer",
"priceRange": "£5000-£50000",
"priceCurrency": "GBP"
}
}
},
{
"@type": "ListItem",
"position": 6,
"item": {
"@type": "Service",
"name": "Compliance & Security",
"description": "GDPR compliance and data security consulting",
"offers": {
"@type": "Offer",
"priceRange": "£1000-£10000",
"priceCurrency": "GBP"
}
}
}
]
}
</script>
<style>
.quote-hero {
padding: 100px 0 30px; /* padding-top overridden by main.css */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
text-align: center;
}
.quote-form-section {
padding: 30px 0 60px;
background: white;
}
.quote-form-container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.form-step {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #e1e5e9;
}
.form-step:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* Required field indicators */
.required-indicator {
color: #e74c3c;
font-weight: bold;
margin-left: 4px;
}
/* Error and success messages */
.message-container {
margin-bottom: 30px;
padding: 15px 20px;
border-radius: 8px;
display: none;
animation: slideDown 0.3s ease;
}
.message-container.error {
background: #fee;
border: 1px solid #fcc;
color: #c00;
}
.message-container.success {
background: #efe;
border: 1px solid #cfc;
color: #060;
}
.message-container.show {
display: block;
}
.message-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 16px;
}
.message-list {
list-style: none;
padding: 0;
margin: 0;
}
.message-list li {
padding: 5px 0;
padding-left: 20px;
position: relative;
}
.message-list li:before {
content: '\2022';
position: absolute;
left: 0;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.step-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 16px;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 12px;
}
.step-number {
background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.checkbox-item {
display: flex;
align-items: center;
padding: 12px;
border: 2px solid #e1e5e9;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.checkbox-item:hover {
border-color: #6d28d9;
background: #f8f9ff;
}
.checkbox-item input[type="checkbox"] {
margin-right: 12px;
transform: scale(1.2);
}
.checkbox-item.checked {
border-color: #6d28d9;
background: #f8f9ff;
}
.radio-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.radio-item {
display: flex;
align-items: center;
padding: 16px;
border: 2px solid #e1e5e9;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.radio-item:hover {
border-color: #6d28d9;
background: #f8f9ff;
}
.radio-item input[type="radio"] {
margin-right: 12px;
transform: scale(1.2);
}
.radio-item.checked {
border-color: #6d28d9;
background: #f8f9ff;
}
.quote-summary {
background: #f8f9fa;
padding: 30px;
border-radius: 12px;
margin-top: 40px;
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #e1e5e9;
}
.summary-item:last-child {
border-bottom: none;
font-weight: 600;
font-size: 1.2rem;
color: #6d28d9;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.checkbox-group,
.radio-group {
grid-template-columns: 1fr;
}
.quote-form-container {
padding: 30px 20px;
}
}
</style>
<!-- Event Schema for Consultation Booking -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Free Data Solutions Consultation",
"description": "Complimentary consultation session to discuss your AI Automation and data analytics requirements with UK AI Automation experts.",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
"location": {
"@type": "VirtualLocation",
"url": "https://ukaiautomation.co.uk/consultation"
},
"organizer": {
"@type": "Organization",
"name": "UK AI Automation",
"url": "https://ukaiautomation.co.uk"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "GBP",
"availability": "https://schema.org/InStock",
"url": "https://ukaiautomation.co.uk/quote"
},
"performer": {
"@type": "Organization",
"name": "UK AI Automation Expert Team"
},
"startDate": "2025-01-09T09:00:00+00:00",
"endDate": "2025-12-31T17:00:00+00:00",
"duration": "PT30M",
"isAccessibleForFree": true
}
</script>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/breadcrumb-schema.php'); ?>
</head>
<body>
<!-- Skip to content link for accessibility -->
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<!-- Navigation -->
<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
<!-- Quote Hero -->
<main id="main-content">
<section class="quote-hero">
<div class="container">
<h1>Book Your Free Discovery Call</h1>
<p>Tell us about a workflow in your legal or consultancy team we'll tell you honestly whether automation makes sense</p>
</div>
</section>
<!-- Server-rendered content for SEO and no-JS fallback -->
<noscript>
<section class="quote-intro" style="padding: 40px 0; background: #fff;">
<div class="container" style="max-width: 900px; margin: 0 auto; padding: 0 20px;">
<div style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 24px; margin: 24px 0;">
<h3 style="color: #856404; margin: 0 0 12px 0; font-size: 1.2rem;">JavaScript Required for Online Form</h3>
<p style="margin: 0 0 16px 0; color: #856404; line-height: 1.6;">
Our interactive quote form requires JavaScript to function. If you're unable to enable JavaScript, please contact us directly:
</p>
<ul style="margin: 0; padding-left: 20px; color: #856404; line-height: 1.8;">
<li><strong>Email:</strong> <a href="mailto:hello@ukaiautomation.co.uk" style="color: #0056b3;">hello@ukaiautomation.co.uk</a></li>
<li><strong>Phone:</strong> Available on request</li>
</ul>
<p style="margin: 16px 0 0 0; color: #856404; line-height: 1.6;">
Include your name, email, company (if applicable), and a description of your data requirements. We'll respond within 24 hours with a detailed proposal.
</p>
</div>
</div>
</section>
</noscript>
<!-- Quote Form -->
<section class="quote-form-section">
<div class="container">
<!-- Trust Badges Section -->
<div style="background:#f8f9fa;padding:20px;border-radius:8px;margin-bottom:30px;text-align:center;">
<div style="display:flex;justify-content:center;gap:30px;flex-wrap:wrap;align-items:center;">
<div style="text-align:center;">
<div style="font-size:2em;">🔒</div>
<div style="font-size:0.85em;color:#666;">GDPR Compliant</div>
</div>
<div style="text-align:center;">
<div style="font-size:2em;">🇬🇧</div>
<div style="font-size:0.85em;color:#666;">UK-Based</div>
</div>
<div style="text-align:center;">
<div style="font-size:2em;">💷</div>
<div style="font-size:0.85em;color:#666;">Fixed-Price</div>
</div>
<div style="text-align:center;">
<div style="font-size:2em;">🐍</div>
<div style="font-size:0.85em;color:#666;">10+ Years Experience</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="quote-page-layout">
<!-- Main form -->
<div class="quote-form-main">
<div class="quote-form-container">
<!-- Message Container -->
<div id="message-container" class="message-container">
<div class="message-title"></div>
<ul class="message-list"></ul>
</div>
<form id="quote-form" action="quote-handler.php" method="POST">
<?php
// Session already started at top of file
if (!isset($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
// Set form start time for bot detection
$_SESSION['form_start_time'] = time();
?>
<input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
<input type="hidden" name="recaptcha_response" id="recaptchaResponseQuote" value="">
<input type="text" name="website" style="display: none !important; position: absolute !important; left: -9999px !important;" tabindex="-1" autocomplete="off">
<!-- STEP 1: Service & Scale -->
<div class="form-step" id="step-1" data-step="1">
<h2>Step 1: What would you like to automate?</h2>
<div class="form-group">
<label for="service_type">What service are you interested in?</label>
<select name="service_type" id="service_type" required>
<option value="">Select a service...</option>
<option value="document-extraction">Document & Data Extraction (PDFs, contracts, emails)</option>
<option value="research-automation">Research Automation (competitor monitoring, market tracking)</option>
<option value="data-pipeline">Data Pipeline Build-Out (connecting systems, automated reporting)</option>
<option value="ai-agent">Custom AI Agent (multi-step research or data tasks)</option>
<option value="other">Not sure yet happy to discuss</option>
</select>
</div>
<div class="form-group">
<label for="scale">Approximate budget</label>
<select name="scale" id="scale" required>
<option value="">Select budget range...</option>
<option value="under-2k">Under £2,000</option>
<option value="2k-5k">£2,000 £5,000</option>
<option value="5k-10k">£5,000 £10,000</option>
<option value="over-10k">Over £10,000</option>
<option value="unsure">Not sure yet</option>
</select>
</div>
<button type="button" class="btn btn-primary next-step">Next &rarr;</button>
</div>
<!-- STEP 2: Contact & Timeline -->
<div class="form-step" id="step-2" data-step="2" style="display:none;">
<h2>Step 2: Your contact details</h2>
<div class="form-group">
<label for="quote-name">Your name</label>
<input type="text" name="name" id="quote-name" required>
</div>
<div class="form-group">
<label for="quote-email">Email address</label>
<input type="email" name="email" id="quote-email" required>
</div>
<div class="form-group">
<label for="quote-company">Company name</label>
<input type="text" name="company" id="quote-company">
</div>
<div class="form-group">
<label for="timeline">When do you need this?</label>
<select name="timeline" id="timeline" required>
<option value="">Select timeline...</option>
<option value="asap">As soon as possible</option>
<option value="2weeks">Within 2 weeks</option>
<option value="1month">Within a month</option>
<option value="flexible">Flexible / No rush</option>
</select>
</div>
<div class="form-buttons">
<button type="button" class="btn btn-secondary prev-step">&larr; Back</button>
<button type="button" class="btn btn-primary next-step">Next &rarr;</button>
</div>
</div>
<!-- STEP 3: Project Details -->
<div class="form-step" id="step-3" data-step="3" style="display:none;">
<h2>Step 3: Project details</h2>
<div class="form-group">
<label for="website_urls">Target website(s)</label>
<input type="text" name="data_sources" id="website_urls" placeholder="e.g., competitor.com, amazon.co.uk">
</div>
<div class="form-group">
<label for="quote-requirements">Detailed requirements <span class="optional">(optional)</span></label>
<textarea name="requirements" id="quote-requirements" rows="5" placeholder="Tell us more about what data you need, how often, what format..."></textarea>
</div>
<div class="form-buttons">
<button type="button" class="btn btn-secondary prev-step">&larr; Back</button>
<button type="submit" class="btn btn-primary">Get Your Free Proposal</button>
</div>
</div>
</form>
<!-- Testimonial -->
<div style="background:#f8f9fa;border-left:4px solid #7c3aed;padding:1.5rem;border-radius:8px;margin-top:30px;">
<blockquote>
<p style="font-style:italic;margin-bottom:0.5rem;">"We needed competitor pricing data from 50+ websites. UK AI Automation delivered within a week, and the accuracy was incredible."</p>
<cite>&#8212; Sarah Chen, Head of Strategy, City Fintech Ltd</cite>
</blockquote>
</div>
</div>
</div>
<!-- Sidebar -->
<aside class="quote-sidebar">
<div class="testimonial-card">
<blockquote>
<p>"UK AI Automation transformed how we track competitor pricing. The data is accurate, timely, and has directly impacted our revenue."</p>
<cite> Client Testimonial</cite>
</blockquote>
</div>
<div class="what-happens-next">
<h3>What happens next?</h3>
<ol>
<li><strong>We review your request</strong> our team assesses your requirements</li>
<li><strong>You receive a detailed proposal</strong> within 24 hours</li>
<li><strong>Free consultation call</strong> we schedule a call to discuss your project</li>
</ol>
</div>
</aside>
</div>
</div>
<div class="container">
<!-- FAQ Section -->
<div class="quote-faq-section" style="margin-top:40px;margin-bottom:40px;">
<h3 style="margin:0 0 20px 0;color:#1e1b4b;"> Common Questions</h3>
<details style="border:1px solid #e0e0e0;border-radius:8px;margin-bottom:10px;padding:15px;">
<summary style="cursor:pointer;font-weight:600;color:#333;">How much does AI Automation cost?</summary>
<p style="margin:15px 0 0 0;color:#666;line-height:1.6;">Projects typically range from £500 for simple one-time extractions to £5,000+ for complex ongoing data pipelines. We provide fixed-price quotes with no hidden fees. <a href="/tools/cost-calculator">Try our cost calculator</a> for an instant estimate.</p>
</details>
<details style="border:1px solid #e0e0e0;border-radius:8px;margin-bottom:10px;padding:15px;">
<summary style="cursor:pointer;font-weight:600;color:#333;">How long does a typical project take?</summary>
<p style="margin:15px 0 0 0;color:#666;line-height:1.6;">Simple projects: 3-5 days. Complex multi-source projects: 2-4 weeks. We'll give you a specific timeline in your proposal.</p>
</details>
<details style="border:1px solid #e0e0e0;border-radius:8px;margin-bottom:10px;padding:15px;">
<summary style="cursor:pointer;font-weight:600;color:#333;">Is AI Automation legal?</summary>
<p style="margin:15px 0 0 0;color:#666;line-height:1.6;">Yes, when done correctly. We ensure full compliance with GDPR, DPA 2018, and respect robots.txt. Read our <a href="/blog/articles/web-Automation-compliance-uk-guide">complete legal guide</a>.</p>
</details>
<details style="border:1px solid #e0e0e0;border-radius:8px;margin-bottom:10px;padding:15px;">
<summary style="cursor:pointer;font-weight:600;color:#333;">What format will I receive the data in?</summary>
<p style="margin:15px 0 0 0;color:#666;line-height:1.6;">Your choice: CSV, Excel, JSON, or direct API/database delivery. We can also integrate with your existing systems.</p>
</details>
</div>
</div>
<!-- FAQ Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How much does AI Automation cost?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Projects typically range from £500 for simple one-time extractions to £5,000+ for complex ongoing data pipelines. We provide fixed-price quotes with no hidden fees."
}
},
{
"@type": "Question",
"name": "How long does a typical AI Automation project take?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Simple projects take 3-5 days. Complex multi-source projects take 2-4 weeks. We provide specific timelines in each proposal."
}
}
]
}
</script>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<div class="footer-logo">
<img src="assets/images/logo-white.svg" alt="UK AI Automation">
</div>
<p>Professional data solutions for modern businesses. Transform your operations with accurate, actionable insights.</p>
</div>
<div class="footer-section">
<h3>Our Services</h3>
<ul>
<li><a href="/services/competitive-intelligence">Competitive Intelligence</a></li>
<li><a href="/services/price-monitoring">Price Monitoring</a></li>
<li><a href="/services/data-cleaning">Data Cleaning</a></li>
<li><a href="/#services">All Services</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Locations</h3>
<ul>
<li><a href="/locations/london">London</a></li>
<li><a href="/locations/manchester">Manchester</a></li>
<li><a href="/locations/birmingham">Birmingham</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Resources & Insights</h3>
<ul>
<li><a href="/blog/">Data Intelligence Blog</a></li>
<li><a href="/case-studies/">Case Studies</a></li>
<li><a href="/about">About UK AI Automation</a></li>
<li><a href="/project-types">Project Types</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/quote">Request Consultation</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Legal</h3>
<ul>
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/terms-of-service">Terms of Service</a></li>
<li><a href="/cookie-policy">Cookie Policy</a></li>
<li><a href="/gdpr-compliance">GDPR Compliance</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; <?php echo date('Y'); ?> UK AI Automation. All rights reserved.</p>
<div class="social-links">
<a href="https://linkedin.com/company/ukaiautomation" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><img src="assets/images/icon-linkedin.svg" alt="LinkedIn"></a>
<a href="https://twitter.com/ukaiautomation" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><img src="assets/images/icon-twitter.svg" alt="Twitter"></a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const steps = document.querySelectorAll('.form-step');
const nextBtns = document.querySelectorAll('.next-step');
const prevBtns = document.querySelectorAll('.prev-step');
nextBtns.forEach(btn => {
btn.addEventListener('click', function() {
const current = this.closest('.form-step');
const currentStep = parseInt(current.dataset.step);
const requiredFields = current.querySelectorAll('[required]');
let valid = true;
requiredFields.forEach(field => {
if (!field.value) {
field.classList.add('error');
valid = false;
} else {
field.classList.remove('error');
}
});
if (!valid) return;
current.style.display = 'none';
document.querySelector('[data-step="' + (currentStep + 1) + '"]').style.display = 'block';
});
});
prevBtns.forEach(btn => {
btn.addEventListener('click', function() {
const current = this.closest('.form-step');
const currentStep = parseInt(current.dataset.step);
current.style.display = 'none';
document.querySelector('[data-step="' + (currentStep - 1) + '"]').style.display = 'block';
});
});
// Message display functions
function showMessage(type, title, messages) {
const container = document.getElementById('message-container');
const titleEl = container.querySelector('.message-title');
const listEl = container.querySelector('.message-list');
container.className = 'message-container';
container.classList.add(type);
titleEl.textContent = title;
listEl.innerHTML = '';
if (Array.isArray(messages)) {
messages.forEach(msg => {
const li = document.createElement('li');
li.textContent = msg;
listEl.appendChild(li);
});
} else {
const li = document.createElement('li');
li.textContent = messages;
listEl.appendChild(li);
}
container.classList.add('show');
container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function hideMessage() {
const container = document.getElementById('message-container');
container.classList.remove('show');
}
// Form submission with reCAPTCHA
const quoteForm = document.getElementById('quote-form');
// Track form interactions for bot detection
let formInteractions = {
mouseMovements: 0,
keystrokes: 0,
focusEvents: 0,
startTime: Date.now(),
fields: {}
};
const timestampField = document.createElement('input');
timestampField.type = 'hidden';
timestampField.name = 'form_timestamp';
timestampField.value = Date.now();
quoteForm.appendChild(timestampField);
const interactionToken = document.createElement('input');
interactionToken.type = 'hidden';
interactionToken.name = 'interaction_token';
quoteForm.appendChild(interactionToken);
document.addEventListener('mousemove', function() {
if (formInteractions.mouseMovements < 100) {
formInteractions.mouseMovements++;
}
});
quoteForm.querySelectorAll('input, textarea, select').forEach(field => {
field.addEventListener('keydown', function() {
formInteractions.keystrokes++;
});
field.addEventListener('focus', function() {
formInteractions.focusEvents++;
});
});
quoteForm.addEventListener('submit', function(e) {
e.preventDefault();
const timeSpent = Date.now() - formInteractions.startTime;
const interactionScore = Math.min(100,
(timeSpent > 5000 ? 20 : 0) +
(formInteractions.mouseMovements > 10 ? 20 : 0) +
(formInteractions.keystrokes > 20 ? 20 : 0) +
(formInteractions.focusEvents > 3 ? 10 : 0)
);
interactionToken.value = btoa(JSON.stringify({
score: interactionScore,
time: timeSpent,
interactions: formInteractions.mouseMovements + formInteractions.keystrokes + formInteractions.focusEvents
}));
const name = document.getElementById('quote-name').value.trim();
const email = document.getElementById('quote-email').value.trim();
let errors = [];
if (!name || name.length < 2) {
errors.push('Please enter your name');
}
if (!email || !email.includes('@')) {
errors.push('Please enter a valid email address');
}
if (errors.length > 0) {
showMessage('error', 'Please complete the following:', errors);
return;
}
hideMessage();
const self = this;
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo RECAPTCHA_SITE_KEY; ?>', {action: 'quote'}).then(function(token) {
document.getElementById('recaptchaResponseQuote').value = token;
const submitButton = self.querySelector('button[type="submit"]');
const originalText = submitButton.textContent;
submitButton.textContent = 'Sending...';
submitButton.disabled = true;
const formData = new FormData(self);
fetch('quote-handler.php', {
method: 'POST',
body: formData,
credentials: 'same-origin',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
showMessage('success', 'Thank you!', 'Your quote request has been sent successfully. We will get back to you within 24 hours with a detailed proposal.');
self.reset();
document.querySelectorAll('.form-step').forEach(s => s.style.display = 'none');
document.querySelector('[data-step="1"]').style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
let errorMessages = data.message.includes('. ') ? data.message.split('. ').filter(msg => msg.trim()) : [data.message];
showMessage('error', 'There was a problem:', errorMessages);
}
})
.catch(error => {
console.error('Error:', error);
showMessage('error', 'Connection Error', 'There was an error sending your request. Please try again or contact us at info@ukaiautomation.co.uk');
})
.finally(() => {
submitButton.textContent = originalText;
submitButton.disabled = false;
});
});
});
});
});
</script>
</body>
</html>