2025-06-17 18:43:06 +01:00
< ? php
2025-08-09 06:07:27 +00:00
// Start session before any output
ini_set ( 'session.cookie_samesite' , 'Lax' );
ini_set ( 'session.cookie_httponly' , '1' );
ini_set ( 'session.cookie_secure' , '0' ); // Set to '1' if using HTTPS
session_start ();
2025-06-17 18:43:06 +01:00
// Enhanced security headers
header ( 'X-Content-Type-Options: nosniff' );
header ( 'X-Frame-Options: DENY' );
header ( 'X-XSS-Protection: 1; mode=block' );
header ( 'Strict-Transport-Security: max-age=31536000; includeSubDomains' );
header ( 'Referrer-Policy: strict-origin-when-cross-origin' );
$page_title = " Get a Quote | UK Data Services - Professional Data Solutions " ;
$page_description = " Get a free, no-obligation quote for your data project. Tell us your requirements and we'll provide a detailed proposal within 24 hours. " ;
$canonical_url = " https://ukdataservices.co.uk/quote " ;
2025-12-07 11:49:39 +00:00
// Breadcrumb navigation
$breadcrumbs = [
[ 'url' => '/' , 'label' => 'Home' ],
[ 'url' => '' , 'label' => 'Request Quote' ]
];
2025-06-17 18:43:06 +01:00
?>
<! 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 = " data quote, web scraping quote, data extraction pricing, business intelligence cost, UK data services pricing " >
< meta name = " author " content = " UK Data Services " >
< 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 ); ?> " >
<!-- 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 " >
2025-06-17 19:22:58 +01:00
<!-- 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 >
2025-06-17 18:43:06 +01:00
<!-- Quote Page Schema -->
< script type = " application/ld+json " >
{
" @context " : " https://schema.org " ,
" @type " : " WebPage " ,
" @id " : " https://ukdataservices.co.uk/quote#webpage " ,
" url " : " https://ukdataservices.co.uk/quote " ,
" name " : " Get Free Quote - UK Data Services " ,
" description " : " Request a free, no-obligation quote for professional web scraping 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 web scraping and data analytics projects " ,
" provider " : {
" @id " : " https://ukdataservices.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 Data Services - Service Catalog " ,
" description " : " Comprehensive data services available for quote " ,
" numberOfItems " : 6 ,
" itemListElement " : [
{
" @type " : " ListItem " ,
" position " : 1 ,
" item " : {
" @type " : " Service " ,
" name " : " Web Scraping & Data Extraction " ,
" description " : " Professional web scraping 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 : 120 px 0 60 px ;
background : linear - gradient ( 135 deg , #f5f7fa 0%, #c3cfe2 100%);
text - align : center ;
}
. quote - form - section {
padding : 60 px 0 ;
background : white ;
}
. quote - form - container {
max - width : 800 px ;
margin : 0 auto ;
background : white ;
padding : 40 px ;
border - radius : 16 px ;
box - shadow : 0 8 px 40 px rgba ( 0 , 0 , 0 , 0.1 );
}
. form - row {
display : grid ;
grid - template - columns : 1 fr 1 fr ;
gap : 20 px ;
margin - bottom : 24 px ;
}
. form - step {
margin - bottom : 40 px ;
padding - bottom : 40 px ;
border - bottom : 1 px solid #e1e5e9;
}
. form - step : last - child {
border - bottom : none ;
margin - bottom : 0 ;
padding - bottom : 0 ;
}
2025-08-09 06:07:27 +00:00
/* Required field indicators */
. required - indicator {
color : #e74c3c;
font - weight : bold ;
margin - left : 4 px ;
}
/* Error and success messages */
. message - container {
margin - bottom : 30 px ;
padding : 15 px 20 px ;
border - radius : 8 px ;
display : none ;
animation : slideDown 0.3 s ease ;
}
. message - container . error {
background : #fee;
border : 1 px solid #fcc;
color : #c00;
}
. message - container . success {
background : #efe;
border : 1 px solid #cfc;
color : #060;
}
. message - container . show {
display : block ;
}
. message - title {
font - weight : bold ;
margin - bottom : 10 px ;
font - size : 16 px ;
}
. message - list {
list - style : none ;
padding : 0 ;
margin : 0 ;
}
. message - list li {
padding : 5 px 0 ;
padding - left : 20 px ;
position : relative ;
}
. message - list li : before {
content : '\2022' ;
position : absolute ;
left : 0 ;
}
@ keyframes slideDown {
from {
opacity : 0 ;
transform : translateY ( - 10 px );
}
to {
opacity : 1 ;
transform : translateY ( 0 );
}
}
2025-06-17 18:43:06 +01:00
. step - title {
font - size : 1.4 rem ;
font - weight : 600 ;
margin - bottom : 16 px ;
color : #1a1a1a;
display : flex ;
align - items : center ;
gap : 12 px ;
}
. step - number {
2025-12-07 11:49:39 +00:00
background : linear - gradient ( 135 deg , #179e83 0%, #144784 100%);
2025-06-17 18:43:06 +01:00
color : white ;
width : 30 px ;
height : 30 px ;
border - radius : 50 % ;
display : flex ;
align - items : center ;
justify - content : center ;
font - weight : 600 ;
font - size : 0.9 rem ;
}
. checkbox - group {
display : grid ;
grid - template - columns : repeat ( auto - fit , minmax ( 250 px , 1 fr ));
gap : 16 px ;
}
. checkbox - item {
display : flex ;
align - items : center ;
padding : 12 px ;
border : 2 px solid #e1e5e9;
border - radius : 8 px ;
cursor : pointer ;
transition : all 0.3 s ease ;
}
. checkbox - item : hover {
2025-12-07 11:49:39 +00:00
border - color : #179e83;
2025-06-17 18:43:06 +01:00
background : #f8f9ff;
}
. checkbox - item input [ type = " checkbox " ] {
margin - right : 12 px ;
transform : scale ( 1.2 );
}
. checkbox - item . checked {
2025-12-07 11:49:39 +00:00
border - color : #179e83;
2025-06-17 18:43:06 +01:00
background : #f8f9ff;
}
. radio - group {
display : grid ;
grid - template - columns : repeat ( auto - fit , minmax ( 200 px , 1 fr ));
gap : 16 px ;
}
. radio - item {
display : flex ;
align - items : center ;
padding : 16 px ;
border : 2 px solid #e1e5e9;
border - radius : 8 px ;
cursor : pointer ;
transition : all 0.3 s ease ;
}
. radio - item : hover {
2025-12-07 11:49:39 +00:00
border - color : #179e83;
2025-06-17 18:43:06 +01:00
background : #f8f9ff;
}
. radio - item input [ type = " radio " ] {
margin - right : 12 px ;
transform : scale ( 1.2 );
}
. radio - item . checked {
2025-12-07 11:49:39 +00:00
border - color : #179e83;
2025-06-17 18:43:06 +01:00
background : #f8f9ff;
}
. quote - summary {
background : #f8f9fa;
padding : 30 px ;
border - radius : 12 px ;
margin - top : 40 px ;
}
. summary - item {
display : flex ;
justify - content : space - between ;
padding : 12 px 0 ;
border - bottom : 1 px solid #e1e5e9;
}
. summary - item : last - child {
border - bottom : none ;
font - weight : 600 ;
font - size : 1.2 rem ;
2025-12-07 11:49:39 +00:00
color : #179e83;
2025-06-17 18:43:06 +01:00
}
@ media ( max - width : 768 px ) {
. form - row {
grid - template - columns : 1 fr ;
}
. checkbox - group ,
. radio - group {
grid - template - columns : 1 fr ;
}
. quote - form - container {
padding : 30 px 20 px ;
}
}
</ 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 web scraping and data analytics requirements with UK Data Services experts. " ,
" eventStatus " : " https://schema.org/EventScheduled " ,
" eventAttendanceMode " : " https://schema.org/OnlineEventAttendanceMode " ,
" location " : {
" @type " : " VirtualLocation " ,
" url " : " https://ukdataservices.co.uk/consultation "
},
" organizer " : {
" @type " : " Organization " ,
" name " : " UK Data Services " ,
" url " : " https://ukdataservices.co.uk "
},
" offers " : {
" @type " : " Offer " ,
" price " : " 0 " ,
" priceCurrency " : " GBP " ,
" availability " : " https://schema.org/InStock " ,
" url " : " https://ukdataservices.co.uk/quote "
},
" performer " : {
" @type " : " Organization " ,
" name " : " UK Data Services Expert Team "
},
" startDate " : " 2025-01-09T09:00:00+00:00 " ,
" endDate " : " 2025-12-31T17:00:00+00:00 " ,
" duration " : " PT30M " ,
" isAccessibleForFree " : true
}
</ script >
2025-12-07 11:49:39 +00:00
< ? php include ( $_SERVER [ 'DOCUMENT_ROOT' ] . '/includes/breadcrumb-schema.php' ); ?>
2025-06-17 18:43:06 +01:00
</ head >
< body >
<!-- Skip to content link for accessibility -->
< a href = " #main-content " class = " skip-to-content " > Skip to main content </ a >
<!-- Navigation -->
< nav class = " navbar " id = " navbar " >
< div class = " nav-container " >
< div class = " nav-logo " >
< a href = " / " >
< img src = " assets/images/ukds-main-logo.png " alt = " UK Data Services " class = " logo " >
</ a >
</ div >
< div class = " nav-menu " id = " nav-menu " >
< a href = " / " class = " nav-link " > Home </ a >
< a href = " /#services " class = " nav-link " > Capabilities </ a >
< a href = " project-types " class = " nav-link " > Project Types </ a >
< a href = " about " class = " nav-link " > About </ a >
< a href = " blog/ " class = " nav-link " > Blog </ a >
< a href = " /#contact " class = " nav-link " > Contact </ a >
< a href = " quote " class = " nav-link cta-button " > Request Consultation </ a >
</ div >
< div class = " nav-toggle " id = " nav-toggle " >
< span class = " bar " ></ span >
< span class = " bar " ></ span >
< span class = " bar " ></ span >
</ div >
</ div >
</ nav >
<!-- Quote Hero -->
< main id = " main-content " >
< section class = " quote-hero " >
< div class = " container " >
< h1 > Free Web Scraping & Data Analytics Quote - UK Data Services </ h1 >
< p > Tell us about your project and we ' ll provide a detailed proposal within 24 hours </ p >
</ div >
</ section >
<!-- Quote Form -->
< section class = " quote-form-section " >
< div class = " container " >
< div class = " quote-form-container " >
2025-08-09 06:07:27 +00:00
<!-- Message Container -->
< div id = " message-container " class = " message-container " >
< div class = " message-title " ></ div >
< ul class = " message-list " ></ ul >
</ div >
2025-06-17 18:43:06 +01:00
< form id = " quote-form " action = " quote-handler.php " method = " POST " >
< ? php
2025-08-09 06:07:27 +00:00
// Session already started at top of file
2025-06-17 18:43:06 +01:00
if ( ! isset ( $_SESSION [ 'csrf_token' ])) {
$_SESSION [ 'csrf_token' ] = bin2hex ( random_bytes ( 32 ));
}
2025-08-09 06:07:27 +00:00
// Set form start time for bot detection
$_SESSION [ 'form_start_time' ] = time ();
2025-06-17 18:43:06 +01:00
?>
< input type = " hidden " name = " csrf_token " value = " <?php echo htmlspecialchars( $_SESSION['csrf_token'] ); ?> " >
2025-08-09 06:12:52 +00:00
<!-- reCAPTCHA response field -->
< input type = " hidden " name = " recaptcha_response " id = " recaptchaResponseQuote " value = " " >
2025-06-17 18:43:06 +01:00
<!-- Honeypot field for spam protection -->
< input type = " text " name = " website " style = " display: none !important; position: absolute !important; left: -9999px !important; " tabindex = " -1 " autocomplete = " off " >
<!-- Step 1 : Project Type -->
< div class = " form-step " >
< div class = " step-title " >
< span class = " step-number " > 1 </ span >
2025-08-09 06:07:27 +00:00
What type of data services do you need ? < span class = " required-indicator " >*</ span >
2025-06-17 18:43:06 +01:00
</ div >
< div class = " checkbox-group " >
< label class = " checkbox-item " >
< input type = " checkbox " name = " services[] " value = " web-scraping " >
< span > Web Scraping & Data Extraction </ span >
</ label >
< label class = " checkbox-item " >
< input type = " checkbox " name = " services[] " value = " business-intelligence " >
< span > Business Intelligence & Analytics </ span >
</ label >
< label class = " checkbox-item " >
< input type = " checkbox " name = " services[] " value = " data-processing " >
< span > Data Processing & Cleaning </ span >
</ label >
< label class = " checkbox-item " >
< input type = " checkbox " name = " services[] " value = " automation " >
< span > Automation & APIs </ span >
</ label >
< label class = " checkbox-item " >
< input type = " checkbox " name = " services[] " value = " consulting " >
< span > Custom Development </ span >
</ label >
< label class = " checkbox-item " >
< input type = " checkbox " name = " services[] " value = " other " >
< span > Other ( please specify below ) </ span >
</ label >
</ div >
</ div >
<!-- Step 2 : Project Scale -->
< div class = " form-step " >
< div class = " step-title " >
< span class = " step-number " > 2 </ span >
2025-08-09 06:07:27 +00:00
What ' s the scale of your project ? < span class = " required-indicator " >*</ span >
2025-06-17 18:43:06 +01:00
</ div >
< div class = " radio-group " >
< label class = " radio-item " >
< input type = " radio " name = " project_scale " value = " small " >
< div >
< strong > Small Project </ strong >< br >
< small > One - time extraction , < 10 k records </ small >
</ div >
</ label >
< label class = " radio-item " >
< input type = " radio " name = " project_scale " value = " medium " >
< div >
< strong > Medium Project </ strong >< br >
< small > Regular updates , 10 k - 100 k records </ small >
</ div >
</ label >
< label class = " radio-item " >
< input type = " radio " name = " project_scale " value = " large " >
< div >
< strong > Large Project </ strong >< br >
< small > Ongoing service , 100 k + records </ small >
</ div >
</ label >
< label class = " radio-item " >
< input type = " radio " name = " project_scale " value = " enterprise " >
< div >
< strong > Enterprise </ strong >< br >
< small > Complex multi - source solution </ small >
</ div >
</ label >
</ div >
</ div >
<!-- Step 3 : Timeline -->
< div class = " form-step " >
< div class = " step-title " >
< span class = " step-number " > 3 </ span >
2025-08-09 06:07:27 +00:00
When do you need this completed ? < span class = " required-indicator " >*</ span >
2025-06-17 18:43:06 +01:00
</ div >
< div class = " radio-group " >
< label class = " radio-item " >
< input type = " radio " name = " timeline " value = " asap " >
< span > ASAP ( Rush job ) </ span >
</ label >
< label class = " radio-item " >
< input type = " radio " name = " timeline " value = " 1-week " >
< span > Within 1 week </ span >
</ label >
< label class = " radio-item " >
< input type = " radio " name = " timeline " value = " 2-4-weeks " >
< span > 2 - 4 weeks </ span >
</ label >
< label class = " radio-item " >
< input type = " radio " name = " timeline " value = " flexible " >
< span > Flexible timeline </ span >
</ label >
</ div >
</ div >
<!-- Step 4 : Contact Information -->
< div class = " form-step " >
< div class = " step-title " >
< span class = " step-number " > 4 </ span >
Your contact information
</ div >
< div class = " form-row " >
< div class = " form-group " >
< label for = " quote-name " > Full Name *</ label >
< input type = " text " id = " quote-name " name = " name " required >
</ div >
< div class = " form-group " >
< label for = " quote-email " > Email Address *</ label >
< input type = " email " id = " quote-email " name = " email " required >
</ div >
</ div >
< div class = " form-row " >
< div class = " form-group " >
< label for = " quote-company " > Company </ label >
< input type = " text " id = " quote-company " name = " company " >
</ div >
< div class = " form-group " >
< label for = " quote-phone " > Phone Number </ label >
< input type = " tel " id = " quote-phone " name = " phone " >
</ div >
</ div >
</ div >
<!-- Step 5 : Project Details -->
< div class = " form-step " >
< div class = " step-title " >
< span class = " step-number " > 5 </ span >
Project details
</ div >
< div class = " form-group " >
< label for = " quote-sources " > Data Sources ( websites , APIs , databases ) </ label >
< textarea id = " quote-sources " name = " data_sources " rows = " 3 " placeholder = " Please list the websites, APIs, or data sources you need us to work with... " ></ textarea >
</ div >
< div class = " form-group " >
< label for = " quote-requirements " > Detailed Requirements *</ label >
< textarea id = " quote-requirements " name = " requirements " rows = " 5 " required placeholder = " Please describe your project in detail: what data you need, how you plan to use it, any specific format requirements, delivery preferences, etc. " ></ textarea >
</ div >
< div class = " form-group " >
< label for = " quote-budget " > Estimated Budget Range ( Optional ) </ label >
< select id = " quote-budget " name = " budget " >
< option value = " " > Select budget range ...</ option >
< option value = " under-1k " > Under £1 , 000 </ option >
< option value = " 1k-5k " > £1 , 000 - £5 , 000 </ option >
< option value = " 5k-10k " > £5 , 000 - £10 , 000 </ option >
< option value = " 10k-25k " > £10 , 000 - £25 , 000 </ option >
< option value = " 25k-50k " > £25 , 000 - £50 , 000 </ option >
< option value = " 50k-plus " > £50 , 000 +</ option >
< option value = " discuss " > Let ' s discuss </ option >
</ select >
</ div >
</ div >
<!-- Submit -->
< button type = " submit " class = " btn btn-primary btn-full " > Get My Free Quote </ button >
</ form >
</ div >
</ div >
</ 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 Data Services " >
</ div >
< p > Professional data solutions for modern businesses . Transform your operations with accurate , actionable insights .</ p >
</ div >
< div class = " footer-section " >
< h3 > Services </ h3 >
< ul >
< li >< a href = " /#services " > Web Scraping </ a ></ li >
< li >< a href = " /#services " > Business Intelligence </ a ></ li >
< li >< a href = " /#services " > Data Processing </ a ></ li >
< li >< a href = " /#services " > API Development </ a ></ li >
< li >< a href = " /#services " > Custom Development </ a ></ li >
</ ul >
</ div >
< div class = " footer-section " >
< h3 > Company </ h3 >
< ul >
< li >< a href = " / " > Home </ a ></ li >
< li >< a href = " quote " > Get Quote </ a ></ li >
< li >< a href = " /#contact " > Contact </ a ></ li >
</ ul >
</ div >
< div class = " footer-section " >
< h3 > Contact </ h3 >
< ul >
< li > Phone : + 44 1692 689150 </ li >
< li > Email : info @ ukdataservices . co . uk </ li >
< li > Service Area : UK & International </ li >
</ ul >
</ div >
</ div >
< div class = " footer-bottom " >
< p >& copy ; < ? php echo date ( 'Y' ); ?> UK Data Services. All rights reserved.</p>
</ div >
</ div >
</ footer >
<!-- Scripts -->
< script src = " assets/js/main.js " ></ script >
< script >
// Enhanced quote form functionality
document . addEventListener ( 'DOMContentLoaded' , function () {
const checkboxItems = document . querySelectorAll ( '.checkbox-item' );
const radioItems = document . querySelectorAll ( '.radio-item' );
// Handle checkbox styling
checkboxItems . forEach ( item => {
const checkbox = item . querySelector ( 'input[type="checkbox"]' );
checkbox . addEventListener ( 'change' , function () {
if ( this . checked ) {
item . classList . add ( 'checked' );
} else {
item . classList . remove ( 'checked' );
}
});
});
// Handle radio button styling
radioItems . forEach ( item => {
const radio = item . querySelector ( 'input[type="radio"]' );
radio . addEventListener ( 'change' , function () {
// Remove checked class from all items in the same group
const groupName = this . name ;
document . querySelectorAll ( `input[name="${groupName}"]` ) . forEach ( r => {
r . closest ( '.radio-item' ) . classList . remove ( 'checked' );
});
// Add checked class to selected item
if ( this . checked ) {
item . classList . add ( 'checked' );
}
});
});
2025-08-09 06:07:27 +00:00
// 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' );
// Reset classes
container . className = 'message-container' ;
container . classList . add ( type );
// Set content
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 );
}
// Show with animation
container . classList . add ( 'show' );
// Scroll to message
container . scrollIntoView ({ behavior : 'smooth' , block : 'nearest' });
}
function hideMessage () {
const container = document . getElementById ( 'message-container' );
container . classList . remove ( 'show' );
}
2025-06-17 19:22:58 +01:00
// Enhanced form submission with reCAPTCHA
2025-06-17 18:43:06 +01:00
const quoteForm = document . getElementById ( 'quote-form' );
2025-06-17 19:22:58 +01:00
// Track form interactions
let formInteractions = {
mouseMovements : 0 ,
keystrokes : 0 ,
focusEvents : 0 ,
startTime : Date . now (),
fields : {}
};
// Add hidden timestamp field
const timestampField = document . createElement ( 'input' );
timestampField . type = 'hidden' ;
timestampField . name = 'form_timestamp' ;
timestampField . value = Date . now ();
quoteForm . appendChild ( timestampField );
// Add hidden interaction token
const interactionToken = document . createElement ( 'input' );
interactionToken . type = 'hidden' ;
interactionToken . name = 'interaction_token' ;
quoteForm . appendChild ( interactionToken );
// Track mouse movements
document . addEventListener ( 'mousemove' , function () {
if ( formInteractions . mouseMovements < 100 ) {
formInteractions . mouseMovements ++ ;
}
});
// Track form field interactions
quoteForm . querySelectorAll ( 'input, textarea, select' ) . forEach ( field => {
field . addEventListener ( 'keydown' , function () {
formInteractions . keystrokes ++ ;
});
field . addEventListener ( 'focus' , function () {
formInteractions . focusEvents ++ ;
});
});
2025-06-17 18:43:06 +01:00
quoteForm . addEventListener ( 'submit' , function ( e ) {
e . preventDefault ();
2025-06-17 19:22:58 +01:00
// Calculate interaction score
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 )
);
// Set interaction token
interactionToken . value = btoa ( JSON . stringify ({
score : interactionScore ,
time : timeSpent ,
interactions : formInteractions . mouseMovements + formInteractions . keystrokes + formInteractions . focusEvents
}));
2025-06-17 18:43:06 +01:00
// Validate form
const services = document . querySelectorAll ( 'input[name="services[]"]:checked' );
const projectScale = document . querySelector ( 'input[name="project_scale"]:checked' );
const timeline = document . querySelector ( 'input[name="timeline"]:checked' );
const name = document . getElementById ( 'quote-name' ) . value . trim ();
const email = document . getElementById ( 'quote-email' ) . value . trim ();
const requirements = document . getElementById ( 'quote-requirements' ) . value . trim ();
let errors = [];
if ( services . length === 0 ) {
errors . push ( 'Please select at least one service' );
}
if ( ! projectScale ) {
errors . push ( 'Please select a project scale' );
}
if ( ! timeline ) {
errors . push ( 'Please select a timeline' );
}
if ( ! name || name . length < 2 ) {
errors . push ( 'Please enter your full name' );
}
if ( ! email || ! email . includes ( '@' )) {
errors . push ( 'Please enter a valid email address' );
}
if ( ! requirements || requirements . length < 20 ) {
errors . push ( 'Please provide detailed project requirements (minimum 20 characters)' );
}
if ( errors . length > 0 ) {
2025-08-09 06:07:27 +00:00
showMessage ( 'error' , 'Please complete the following required fields:' , errors );
2025-06-17 18:43:06 +01:00
return ;
}
2025-08-09 06:07:27 +00:00
// Hide any existing error messages
hideMessage ();
2025-06-17 19:22:58 +01:00
// Execute reCAPTCHA
const self = this ;
grecaptcha . ready ( function () {
grecaptcha . execute ( '<?php echo RECAPTCHA_SITE_KEY; ?>' , { action : 'quote' }) . then ( function ( token ) {
document . getElementById ( 'recaptchaResponseQuote' ) . value = token ;
// Submit form
const submitButton = self . querySelector ( 'button[type="submit"]' );
const originalText = submitButton . textContent ;
submitButton . textContent = 'Sending Quote Request...' ;
submitButton . disabled = true ;
const formData = new FormData ( self );
fetch ( 'quote-handler.php' , {
method : 'POST' ,
body : formData ,
2025-08-09 06:07:27 +00:00
credentials : 'same-origin' ,
2025-06-17 19:22:58 +01:00
headers : {
'X-Requested-With' : 'XMLHttpRequest'
}
})
. then ( response => response . json ())
. then ( data => {
if ( data . success ) {
2025-08-09 06:07:27 +00:00
showMessage ( 'success' , 'Thank you!' , 'Your quote request has been sent successfully. We will get back to you within 24 hours with a detailed proposal.' );
2025-06-17 19:22:58 +01:00
self . reset ();
// Reset interaction tracking
formInteractions = {
mouseMovements : 0 ,
keystrokes : 0 ,
focusEvents : 0 ,
startTime : Date . now (),
fields : {}
};
2025-08-09 06:07:27 +00:00
// Reset styling
checkboxItems . forEach ( item => item . classList . remove ( 'checked' ));
radioItems . forEach ( item => item . classList . remove ( 'checked' ));
// Scroll to top after success
window . scrollTo ({ top : 0 , behavior : 'smooth' });
} else {
// Parse error message if it contains multiple validation errors
let errorMessages = [];
if ( data . message . includes ( '. ' )) {
errorMessages = data . message . split ( '. ' ) . filter ( msg => msg . trim ());
} else {
errorMessages = [ data . message ];
}
showMessage ( 'error' , 'There was a problem with your submission:' , errorMessages );
}
})
2025-06-17 18:43:06 +01:00
. catch ( error => {
console . error ( 'Error:' , error );
2025-08-09 06:07:27 +00:00
showMessage ( 'error' , 'Connection Error' , 'There was an error sending your quote request. Please check your internet connection and try again, or contact us directly at info@ukdataservices.co.uk' );
2025-06-17 18:43:06 +01:00
})
. finally (() => {
submitButton . textContent = originalText ;
submitButton . disabled = false ;
});
});
});
</ script >
</ body >
2025-06-07 10:53:32 +01:00
</ html >
