Files
ukaiautomation/quote.php

982 lines
40 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?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 = "Free AI Automation Quote | Legal & Consultancy Firms UK";
$page_description = "Cut hours of manual work every week. We automate document processing & research for UK law firms and consultancies. Free scoping call—we show the ROI.";
$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, #1e1b4b 0%, #7c3aed 100%);
color: white;
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 -->
<!-- Navigation -->
<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/nav.php"); ?>
<!-- Quote Hero -->
<main id="main-content">
<section class="quote-hero">
<div class="container">
<h1>Get a Quote</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:#555;">GDPR Compliant</div>
</div>
<div style="text-align:center;">
<div style="font-size:2em;">🇬🇧</div>
<div style="font-size:0.85em;color:#555;">UK-Based</div>
</div>
<div style="text-align:center;">
<div style="font-size:2em;">💷</div>
<div style="font-size:0.85em;color:#555;">Fixed-Price</div>
</div>
<div style="text-align:center;">
<div style="font-size:2em;">🤖</div>
<div style="font-size:0.85em;color:#555;">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 -->
<div class="quote-sidebar" role="complementary">
<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>
</div>
</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:#555;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:#555;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:#555;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:#555;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>