<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"><![endif]-->
<!--[if (gte IE 10)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>
Ford & FIAT Dealer | Oxfordshire, Lincolnshire, Hertfordshire, Herefordshire & Bedfordshire | Hartwell
</title><meta name="description" content="Hartwell can offer a wide range of new and used vehicles as well as servicing solutions across Oxfordshire, Lincolnshire, Hertfordshire, Herefordshire & Bedfordshire" /><meta name="author" content="Bluesky Interactive" /><meta name="robots" content="index,follow,noodp,noydir" /><meta charset="utf-8" /><link rel="canonical" href="https://www.hartwell.co.uk/" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<!-- Favicons -->
<link rel="apple-touch-icon" href="/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/img/favicons/favicon-32-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/img/favicons/favicon-16-16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/img/favicons/manifest.json">
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#2b6fad">
<link rel="icon" href="/favicon.ico">
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#2b6fad">
<!-- DNS Prefetch -->
<link rel="dns-prefetch" href="https://ajax.googleapis.com/" />
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com/" />
<link rel="dns-prefetch" href="https://stackpath.bootstrapcdn.com/" />
<!--[if lt IE 9]>
<script>
document.createElement('figure');
document.createElement('details');
document.createElement('figcaption');
document.createElement('main');
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
<!-- Core Files (Head) -->
<!-- Vue -->
<!-- production -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<!-- dev -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=77b85bde-c71f-4a78-a878-e9bae119af10"> </script>
<!-- End of Zendesk Widget script -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W7LT7R5');</script>
<!-- End Google Tag Manager -->
<script type="application/ld+json">
{
"@context" : "https://schema.org",
"@type" : "Organization",
"name" : "#sitename#",
"url" : "https://www.hartwell.co.uk",
"sameAs" : [
"https://www.facebook.com/#schemasame#",
"https://www.twitter.com/#schemasame#"
]
}
</script>
<!-- Core Files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="/core/css/assets/plugins.css" rel="stylesheet" media="all">
<link href="/core/css/assets/fonts/mbblueskyicons/style.css" rel="stylesheet" media="all">
<!-- Custom Files -->
<link href="/css/style.css?cb=1596557993975" rel="stylesheet" media="all">
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'dataLayerLoad': true,
'viewPort' : [{
'width' : Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
'height' : Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
}],
'visitorPrimarySegment' : ''
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NLGS6LV');</script>
<!-- End Google Tag Manager -->
<!-- facebook pixel -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '455778171622107');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=455778171622107&ev=PageView
&noscript=1"/>
</noscript>
<script>
window.dataLayer.push({
'pageType': 'Home'
});
</script>
</head>
<body class="page page_home">
<form method="post" action="/" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VSTATE" id="__VSTATE" value="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" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=GA95QzEP6x8JzzcE3ssUsysf3vy9-FzQLdmVD4U_Ky1WfoclmQj3cPaN_1bYl1uIEa_BwB4kMGvTTQ77zxKMCbLzjF-T_8WjBLEI3gfxcYI1&t=636765463264470882" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=q4zSonzo6kqYMOMNH1AUEtA6kNxeXC8hEEAs0MJ4LxOLe4fxGKXaTyXKWeXeus_FiJZXRmOKcquUfUU_uy66VmfU2qPLfCM37QXrIvYDGVFr03iGnEO5bLQFWT8SAjVs0&t=7a2ecbb7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=kcc0zU0xpqA3fV17efag3aS6Wx1pPZvx1xy36JjdtZx2NZIM51ZPluZzvIzYM3oS96r-gnd8nyoTFWShqutyTlK8zDqccCe0GrED6YThjPnuTsDfR9bwU0Y7cuvkFAD-BIpgi_cDoixvF_tnJGQLWw2&t=7a2ecbb7" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', ['tDealerHeader1$upCOGDealerRepeater','','tctl26$MakeField$DDUpdate','','tctl26$ModelField$DDUpdate','','tctl26$MinPrice$DDUpdate','','tctl26$MaxPrice$DDUpdate','','tctl26$FinanceMinRegularPayment$DDUpdate','','tctl26$FinanceMaxRegularPayment$DDUpdate','','tctl26$Transmission$DDUpdate','','tctl26$Van_MakeField$DDUpdate','','tctl26$Van_ModelField$DDUpdate','','tctl26$Van_MinPrice$DDUpdate','','tctl26$Van_MaxPrice$DDUpdate','','tctl26$Van_FinanceMinRegularPayment$DDUpdate','','tctl26$Van_FinanceMaxRegularPayment$DDUpdate','','tctl26$Van_Transmission$DDUpdate',''], [], [], 90, '');
//]]>
</script>
<a class="skippy sr-only sr-only-focusable" href="#main">
<span class="skippy__text">Skip to main content</span></a>
<!-- Start Force24 tracking -->
<script>
!function(f,o,r,c,e,_2,_4){f.Force24Object=e,f[e]=f[e]||function(){
(f[e].q=f[e].q||[]).push(arguments)},f[e].l=1*new Date,
_2=o.createElement(r),_4=o.getElementsByTagName(r)[0],_2.async=1,
_2.src=c,_4.parentNode.insertBefore(_2,_4)}(window,document,
"script","//tracking1.force24.co.uk/tracking/V2/main.min.js","f24");
/* Set clientId */
f24("create", "c4c73098-db25-4f37-8422-6ef62d719f77");
/* Place custom commands here */
f24("send", "pageview");
f24("cookieAnonymous", true);
</script>
<!-- End Force24 tracking -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NLGS6LV"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --><section class="cookie-notice" id="cookie-popin">
<div class="container container__large">
<div class="row">
<div class="col">
<h2><span class="icon icon-cookie-bite1"></span> We use cookies</h2>
<p>We use cookies to give you the best online experience.</p>
<ul class="cookie-notice__options">
<div class="row">
<div class="col-auto">
<li><a href="#" class="btn btn_primary btn_cookie cookie-notice__close">Agree</a></li>
</div>
<div class="col-auto">
<li><a href="/pages/privacy-policy/" class="btn btn_primary">View Cookie Policy</a></li>
</div>
</div>
</ul>
</div>
</div>
</div>
</section><div id="topnav" ref="topnavContainer" class="container-fluid p-0">
<div class="container container__large top-nav">
<div class="row">
<div class="col-3 d-none d-xl-block">
<div class="col-12">
<div class="row">
<div @click="brandOpen = !brandOpen; callOpen = false" class="col-auto topnav__button text-left py-2" :class="{active: brandOpen}">
<span class="icon icon-angle-down1"></span> Choose a brand
</div>
</div>
</div>
</div>
<div class="col col-lg-9">
<div class="row">
<div class="col-3 topnav__button py-2 d-none d-xl-block">
<a href="https://mygarage.hartwell.co.uk/Account/Login?ReturnUrl=%2FmyGarage" target="_blank" noreferrer noopener>
<span class="icon icon-car-garage"></span> MyGarage Login
</a>
</div>
<div class="col-3 topnav__button py-2 d-none d-xl-block">
<a href="/shortlist/" class="brand__link shortlist__counter">
My Shortlist
</a>
</div>
<div @click="callOpen = !callOpen; brandOpen = false" class="col col-lg-3 topnav__button py-2 " :class="{active: callOpen}">
<span class="icon icon-phone1"></span> Call Us
</div>
<div class="col col-lg-3 topnav__button py-2">
<a class="brand__link" href="/find-us/">
<span class="icon icon-map-marker-alt2">
</span> Dealer Locator
</a>
</div>
</div>
</div>
</div>
</div>
<transition-group name="slidedown" mode="out-in">
<div key="brand" v-if="brandOpen" ref="brandPanel" class="brand__open">
<div class="container-fluid p-0">
<div class="container container__large py-5 text-center home-franchises">
<div class="row">
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/ford/">
<img src="/img/brands/ford.png" alt="">
</a>
</div>
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/fiat/">
<img src="/img/brands/fiat.png" alt="">
</a>
</div>
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/hartwell-vans/">
<img src="/img/brands/hartwell-vans.png" alt="">
</a>
</div>
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/pages/hartwell-vans/ms-rt/">
<img src="/img/brands/ms-rt.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div key="call" v-if="callOpen" ref="callPanel" class="brand__open gray__bg">
<div class="container-fluid p-0">
<div class="container container__large py-3">
<div id="DealerHeader1_upCOGDealerRepeater">
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7095) -->
<h3>Hartwell Used Car & Van Centre</h3>
<a href="tel:01865840100" class="gtm-track--tel gtm-track--tel_7095"> <span class="icon icon-phone1"></span> 01865 840100</a>
<!-- end: DealershipPhone (7095) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7100) -->
<h3>Abingdon</h3>
<a href="tel:01235522822" class="gtm-track--tel gtm-track--tel_7100"> <span class="icon icon-phone1"></span> 01235 522822</a>
<!-- end: DealershipPhone (7100) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7101) -->
<h3>Banbury</h3>
<a href="tel:01295267711" class="gtm-track--tel gtm-track--tel_7101"> <span class="icon icon-phone1"></span> 01295 267711</a>
<!-- end: DealershipPhone (7101) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7102) -->
<h3>Dunstable</h3>
<a href="tel:01582443500" class="gtm-track--tel gtm-track--tel_7102"> <span class="icon icon-phone1"></span> 01582 443500</a>
<!-- end: DealershipPhone (7102) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7103) -->
<h3>Abingdon Transit Centre</h3>
<a href="tel:01235522822" class="gtm-track--tel gtm-track--tel_7103"> <span class="icon icon-phone1"></span> 01235 522822</a>
<!-- end: DealershipPhone (7103) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7104) -->
<h3>Dunstable Transit Centre</h3>
<a href="tel:01582443500" class="gtm-track--tel gtm-track--tel_7104"> <span class="icon icon-phone1"></span> 01582 443500</a>
<!-- end: DealershipPhone (7104) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7105) -->
<h3>Grimsby</h3>
<a href="tel:01472307100" class="gtm-track--tel gtm-track--tel_7105"> <span class="icon icon-phone1"></span> 01472 307100</a>
<!-- end: DealershipPhone (7105) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7106) -->
<h3>Hemel Hempstead</h3>
<a href="tel:01442220200" class="gtm-track--tel gtm-track--tel_7106"> <span class="icon icon-phone1"></span> 01442 220200</a>
<!-- end: DealershipPhone (7106) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7107) -->
<h3>Hereford</h3>
<a href="tel:01432297000" class="gtm-track--tel gtm-track--tel_7107"> <span class="icon icon-phone1"></span> 01432 297000</a>
<!-- end: DealershipPhone (7107) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7108) -->
<h3>Kidlington FordStore</h3>
<a href="tel:01865290300" class="gtm-track--tel gtm-track--tel_7108"> <span class="icon icon-phone1"></span> 01865 290300</a>
<!-- end: DealershipPhone (7108) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7109) -->
<h3>Kidlington Transit Centre</h3>
<a href="tel:01865840100" class="gtm-track--tel gtm-track--tel_7109"> <span class="icon icon-phone1"></span> 01865 840100</a>
<!-- end: DealershipPhone (7109) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7110) -->
<h3>Scunthorpe</h3>
<a href="tel:01724387000" class="gtm-track--tel gtm-track--tel_7110"> <span class="icon icon-phone1"></span> 01724 387000</a>
<!-- end: DealershipPhone (7110) -->
</div>
</div>
<div class="col col-lg-3">
<div class="header-phone__numbers bg-white rounded border m-3 p-3">
<!-- start: DealershipPhone (7111) -->
<h3>Watford</h3>
<a href="tel:01923220550" class="gtm-track--tel gtm-track--tel_7111"> <span class="icon icon-phone1"></span> 01923 220550</a>
<!-- end: DealershipPhone (7111) -->
</div>
</div>
</div>
</div>
</div>
</div>
</transition-group>
<div v-if="callOpen || brandOpen" class="overlay__layer" @click="closeAll">
</div>
</div>
<script>
"use strict";
var topNav = new Vue({
el: '#topnav',
data: {
brandOpen: false,
callOpen: false
},
methods: {
closeAll: function closeAll() {
if (this.brandOpen) {
this.brandOpen = !this.brandOpen;
} else if (this.callOpen) {
this.callOpen = !this.callOpen;
}
}
}
});
</script>
<div class="container-fluid header-container">
<div class="container container__large header__container">
<div class="row justify-content-around">
<div class="col-3 col-lg-2 mr-auto align-self-center header-logos">
<a class="header__logo " href="/" title="Hartwell">
<img src="/img/header/logo.png" width="130" height="57" alt="Hartwell">
</a>
</div>
<nav class="col-7 col-lg-8 align-self-center">
<div class="row no-gutters navigation">
<div class="col-9 d-none d-lg-block align-self-center ml-auto">
<ul>
<li><a class="brand__link" href="/"><span class="icon icon-home-alt2"></span></a></li>
<li><a class="brand__link" href="/cars/">Cars</a></li>
<li><a class="brand__link" href="/vans/">Vans</a></li>
<li><a class="brand__link" href="/service-booking/step-1/">Service</a></li>
<!-- <li class="nav-item dropdown brand__link">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Offers
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/offers/">Offers</a>
<a class="dropdown-item" href="/offers/new/">New Cars</a>
<a class="dropdown-item" href="/offers/new/">Servicing</a>
<a class="dropdown-item" href="/hartwell-vans/offers/vans/">New Vans</a>
</div>
</li> -->
<li><a class="brand__link" href="/offers/">Offers</a></li>
<li><a class="brand__link" href="/electric/">Electric</a></li>
<li><a class="brand__link" href="/contact-us/">Contact Us</a></li>
</ul>
</div>
<div class="col-auto ml-auto align-self-center">
<div id="navigation">
<div class="menu-toggle" @click="menuOpen = !menuOpen">
<span class="icon icon-bars">
</span>
</div>
<span class="open-text" @click="menuOpen = !menuOpen">Menu</span>
<transition name="menuslide" mode="out-in">
<div key="openmenu" v-if="menuOpen" class="menu-open">
<div class="container container__large">
<div class="row py-5">
<div class="col-auto ml-auto align-self-center" @click="menuOpen = !menuOpen">
<span class="close-text">Close</span>
<div class="menu-toggle">
<span class="icon icon-times1">
</span>
</div>
</div>
</div>
<div class="row my-2 py-4 nav-brand__select">
<div class="col-6 d-none d-lg-block col-lg-2 text-center">
Jump to a brand
</div>
<div class="col-6 col-lg-auto py-3 py-lg-0 px-4">
<a href="/ford/" class="ford-link">Ford</a>
</div>
<div class="col-6 col-lg-auto py-3 py-lg-0 px-4">
<a href="/fiat/" class="fiat-link">Fiat</a>
</div>
<div class="col-6 col-lg-auto py-3 py-lg-0 px-4">
<a href="/hartwell-vans/" class="vans-link">Hartwell Vans</a>
</div>
<div class="col-6 col-lg-auto py-3 py-lg-0 px-4">
<a href="/renault/" class="renault-link">Renault <span>Servicing</span></a>
</div>
<div class="col-6 col-lg-auto py-3 py-lg-0 px-4">
<a href="/dacia/" class="dacia-link">Dacia <span>Servicing</span></a>
</div>
</div>
<div class="row py-4 nav-content">
<div class="col-12 col-md-6 col-lg-3">
<h4>New Cars</h4>
<ul>
<li><a href="/ford/new-cars/">Ford</a></li>
<li><a href="/fiat/new-cars/">Fiat</a></li>
<li><a href="/offers/new/">New car offers</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>Used Cars</h4>
<ul>
<li><a href="/used-car-results.aspx">All stock</a></li>
<li><a href="/used-car-results.aspx?COGDealerID=7091">Premier Used</a></li>
<li><a href="/used-car-results.aspx/?COGIsExDemoCar=True">Ex demo</a></li>
<li><a href="/used-car-results.aspx/?COGIsNewCar=True">New in stock</a></li>
<li><a href="/valuation/">Value my vehicle</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>
Electric Cars
</h4>
<ul>
<li><a href="/electric">New electric cars</a></li>
<li>
<a href="/used-car-results.aspx?COGFuelType=Electric"
>Used electric cars</a
>
</li>
<li><a href="/pages/why-electric/">Why choose electric?</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>Servicing and MOTS</h4>
<ul>
<li><a href="/service-booking/step-1/">Service & MOT</a></li>
<!-- <li><a href="/pages/hartwell-tyre-service/">Hartwell tyre service</a></li> -->
<li><a href="/pages/servicing/">Servicing And Parts</a></li>
<li><a href="/pages/parts-and-accessories/">Parts & Accessories</a></li>
<li><a href="/pages/ford/formula-ford-parts/">Formula Ford parts</a></li>
<li><a href="/pages/service-plan/">Service Plans</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>Motability</h4>
<ul>
<li><a href="/pages/ford/motability/">Ford Motability</a></li>
<li><a href="/pages/fiat/motability/">Fiat Motability</a></li>
<li><a href="/pages/motability/">What is Motability?</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>
About Us
</h4>
<ul>
<li><a href="/pages/about-us/covid-19/">Covid 19</a></li>
<li><a href="/news/">News</a></li>
<li><a href="/careers/">Careers</a></li>
<li><a href="/about/testimonials/">Testimonials</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>
Finance
</h4>
<ul>
<li><a href="/pages/finance/">Finance Explained</a></li>
<li><a href="/pages/finance/finance-pre-approval">Automotive Finance</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h4>Contact Us</h4>
<ul>
<li>
<a href="/pages/contact-us/customer-complaints/">Customer Complaints</a>
</li>
<li><a href="/find-us/">Dealer Locator</a></li>
<li><a href="/call-us/">Call us</a></li>
</ul>
</div>
<div class="col-12 menu__banner">
<div class="row py-4">
<div class="col-12 col-lg-6">
<a href="https://mygarage.hartwell.co.uk/Account/Login?ReturnUrl=%2FmyGarage">
<figure>
<span class="btn btn_tertiary">Sign In</span>
<img src="https://cogcms-images.azureedge.net/media/32787/garagesignin.jpg" alt="" />
</figure>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
<script>
var navigation = new Vue({
el: '#navigation',
data: {
menuOpen: false
},
updated: function() {
if(this.menuOpen) {
document.body.classList.add('navigation-open')
} else {
document.body.classList.remove('navigation-open')
}
}
})
</script>
</div>
</nav>
</div>
</div>
</div>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7LT7R5"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<main class="main page__main" id="main">
<div id="home-hero">
<div class="container-fluid p-0">
<div class="row no-gutters">
<transition name="loadingfade">
<div v-if="loading" class="loading__panel">
</div>
</transition>
<!-- home main panel-->
<div ref="heroMain" class="col-12 col-lg-5 hero-main__panel py-5 text-center text-lg-left align-self-stretch">
<h1>
Welcome to <br> Hartwell,
</h1>
<h3>how can we help?</h3>
<div class="home-ctas py-4">
<ul>
<li @click="openCarPanel()" class="list__element car__panel" :class="{list__active:carOpen}">Cars</li>
<li @click="openVanPanel()" class="list__element van__panel" :class="{list__active:vanOpen}">Vans</li>
<li @click="openServicingPanel()" class="list__element servicing__panel" :class="{list__active:servicingOpen}">Servicing</li>
</ul>
</div>
<hr class="d-none d-lg-block">
<transition-group name="fade" mode="out-in">
<div key="openService" v-if="servicingOpen">
<div class="servicing__container why-hartwell d-none d-lg-block">
<div class="umb-grid">
<div class="grid-section">
<div >
<div class="row c">
<div class="col-md-12 column">
<div >
<div class="advanced__textarea">
<h4><span class="icon icon-cogs1"></span> Why Hartwell Servicing</h4>
</div>
<div class="advanced__textarea">
<ul>
<li>Over 100 years of experience</li>
<li>10 locations</li>
<li>Friendly team of experts</li>
<li>Officially authorised centre of various manufacturers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div key="openVan" v-else-if="vanOpen">
<div class="supersearch__container d-none d-lg-block">
<h4><span class="icon icon-shuttle-van1"></span> Used van quick search</h4>
<p>Use the box below to search for the make, model or colour of the vehicle you want.</p>
<div class="form-group supersearch__form py-3">
<input type="text" v-model="superSearchLinkVans" v-on:keyup.enter="submitVan">
<a :href="superSearchLinkVans ? 'https://vans.hartwell.co.uk/#/' + '?s=' + superSearchLinkVans : 'https://vans.hartwell.co.uk/#/'"
class="submit__supersearch" ref="submitButtonVan">
<span class="icon icon-search1"></span>
</a>
</div>
<div class="text-center py-3">
<a href="/used-van-results.aspx">Show me all vans</a>
</div>
</div>
</div>
<div key="everythingElse" v-else>
<div class="supersearch__container d-none d-lg-block">
<h4><span class="icon icon-car-alt2"></span> Used vehicle quick search</h4>
<p>Use the box below to search for the make, model or colour of the vehicle you want.</p>
<div class="form-group supersearch__form py-3">
<input type="text" v-model="superSearchLink" v-on:keyup.enter="submitCar">
<a :href="superSearchLink ? 'https://search.hartwell.co.uk/#/' + '?s=' + superSearchLink : 'https://search.hartwell.co.uk/#/'"
class="submit__supersearch" ref="submitButtonCar">
<span class="icon icon-search1"></span>
</a>
</div>
<div class="text-center py-3">
<a v-if="carOpen" class="brand__link" href="/used-car-results.aspx">Used Car Search</a>
<a v-else class="brand__link" href="/used-vehicle-results.aspx">Show me all stock</a>
</div>
</div>
</div>
</transition-group>
</div>
<!-- home interactive panels -->
<div class="col-12 col-lg-7 home-interactive__panels">
<!-- car panel-->
<div
class="interactive__panel car-panel"
v-bind:class="{'d-none': vanOpen || servicingOpen, 'h-100': carOpen}"
@click="!carOpen ? openCarPanel() : null">
<!-- heading if closed-->
<transition-group mode="out-in" name="slide">
<div key="carclosed" v-if="!carOpen" class="p-4">
<h4>Cars</h4>
</div>
<div key="caropen" v-else class="h-100">
<div class="panel__content p-4 h-100">
<div class="panel__heading py-3">
<h4>Used and New Cars in Stock</h4>
</div>
<div class="row py-4">
<div class="col-12 col-lg-6 py-2">
<div class="form-group">
<label for="MakeField_DD">Make</label>
<span id="ctl26_MakeField_DDUpdate">
<select name="ctl26$MakeField$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$MakeField$DD\',\'\')', 0)" id="ctl26_MakeField_DD" class="form-control">
<option selected="selected" value="-1">All Makes</option>
<option value="AUDI">AUDI (5)</option>
<option value="BMW">BMW (1)</option>
<option value="CITROEN">CITROEN (20)</option>
<option value="DACIA">DACIA (1)</option>
<option value="FIAT">FIAT (6)</option>
<option value="FORD">FORD (585)</option>
<option value="FORD (LCV)">FORD (LCV) (13)</option>
<option value="HONDA">HONDA (5)</option>
<option value="HYUNDAI">HYUNDAI (5)</option>
<option value="ISUZU">ISUZU (1)</option>
<option value="JAGUAR">JAGUAR (1)</option>
<option value="KIA">KIA (8)</option>
<option value="MAZDA">MAZDA (2)</option>
<option value="MERCEDES-BENZ">MERCEDES-BENZ (7)</option>
<option value="MINI">MINI (1)</option>
<option value="MITSUBISHI">MITSUBISHI (1)</option>
<option value="NISSAN">NISSAN (14)</option>
<option value="PEUGEOT">PEUGEOT (8)</option>
<option value="RENAULT">RENAULT (8)</option>
<option value="SEAT">SEAT (6)</option>
<option value="SKODA">Å KODA (2)</option>
<option value="SSANGYONG">SSANGYONG (2)</option>
<option value="SUZUKI">SUZUKI (1)</option>
<option value="TOYOTA">TOYOTA (8)</option>
<option value="VAUXHALL">VAUXHALL (8)</option>
<option value="VOLKSWAGEN">VOLKSWAGEN (9)</option>
<option value="VOLVO">VOLVO (1)</option>
</select>
</span>
</div>
</div>
<div class="col-12 col-lg-6 py-2">
<div class="form-group">
<label for="ModelField_DD">Model</label>
<span id="ctl26_ModelField_DDUpdate">
<select name="ctl26$ModelField$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$ModelField$DD\',\'\')', 0)" id="ctl26_ModelField_DD" class="form-control">
<option selected="selected" value="-1">All Models</option>
<option value="107">107 (2)</option>
<option value="108">108 (1)</option>
<option value="2">2 (1)</option>
<option value="2008">2008 (2)</option>
<option value="207">207 (1)</option>
<option value="208">208 (2)</option>
<option value="218D">218D (1)</option>
<option value="500">500 (2)</option>
<option value="500L">500L (1)</option>
<option value="500X">500X (1)</option>
<option value="500X HATCHBACK">500X HATCHBACK (1)</option>
<option value="6">6 (1)</option>
<option value="A CLASS">A CLASS (2)</option>
<option value="A1">A1 (2)</option>
<option value="A4">A4 (1)</option>
<option value="AMAROK">AMAROK (1)</option>
<option value="ARONA">ARONA (1)</option>
<option value="ARTEON">ARTEON (1)</option>
<option value="ASTRA">ASTRA (1)</option>
<option value="AYGO">AYGO (3)</option>
<option value="BERLINGO">BERLINGO (12)</option>
<option value="B-MAX">B-MAX (11)</option>
<option value="B-MAX HATCHBACK">B-MAX HATCHBACK (1)</option>
<option value="C1">C1 (1)</option>
<option value="C220">C220 (1)</option>
<option value="C250">C250 (1)</option>
<option value="C3">C3 (2)</option>
<option value="C4">C4 (5)</option>
<option value="CAPTUR">CAPTUR (5)</option>
<option value="CC">CC (1)</option>
<option value="CDU02 KA+ 2018 (001)">CDU02 KA+ 2018 (001) (2)</option>
<option value="CEED">CEED (1)</option>
<option value="C-HR">C-HR (1)</option>
<option value="CITIGO">CITIGO (1)</option>
<option value="CLA250">CLA250 (1)</option>
<option value="CLIO">CLIO (1)</option>
<option value="C-MAX">C-MAX (14)</option>
<option value="CONNECT">CONNECT (2)</option>
<option value="CORSA">CORSA (3)</option>
<option value="COURIER">COURIER (2)</option>
<option value="CR-V">CR-V (2)</option>
<option value="CUSTOM">CUSTOM (9)</option>
<option value="CUSTOM 320 L1">CUSTOM 320 L1 (3)</option>
<option value="D-MAX">D-MAX (1)</option>
<option value="E">E (1)</option>
<option value="ECOSPORT">ECOSPORT (35)</option>
<option value="ECOSPORT (008)">ECOSPORT (008) (1)</option>
<option value="EDGE">EDGE (7)</option>
<option value="FIESTA">FIESTA (177)</option>
<option value="FIESTA VIGNALE">FIESTA VIGNALE (2)</option>
<option value="FOCUS">FOCUS (118)</option>
<option value="FOCUS RS">FOCUS RS (2)</option>
<option value="GALAXY">GALAXY (4)</option>
<option value="GOLF">GOLF (1)</option>
<option value="GRAND C-MAX">GRAND C-MAX (3)</option>
<option value="HATCH">HATCH (1)</option>
<option value="HILUX">HILUX (1)</option>
<option value="I10">I10 (1)</option>
<option value="I20">I20 (1)</option>
<option value="IBIZA">IBIZA (1)</option>
<option value="IGNIS">IGNIS (1)</option>
<option value="INSIGNIA">INSIGNIA (1)</option>
<option value="JAZZ">JAZZ (3)</option>
<option value="JUKE">JUKE (4)</option>
<option value="KA">KA (2)</option>
<option value="KA+">KA+ (20)</option>
<option value="KA+ ZETEC">KA+ ZETEC (1)</option>
<option value="KADJAR">KADJAR (1)</option>
<option value="KORANDO">KORANDO (2)</option>
<option value="KUGA">KUGA (74)</option>
<option value="KUGA VIGNALE">KUGA VIGNALE (1)</option>
<option value="LEAF">LEAF (1)</option>
<option value="LEON">LEON (3)</option>
<option value="LEON CUPRA">LEON CUPRA (1)</option>
<option value="LOGAN">LOGAN (1)</option>
<option value="MOKKA">MOKKA (1)</option>
<option value="MONDEO">MONDEO (17)</option>
<option value="MONDEO VIGNALE">MONDEO VIGNALE (1)</option>
<option value="MS-RT CONNECT">MS-RT CONNECT (2)</option>
<option value="MS-RT CUSTOM">MS-RT CUSTOM (2)</option>
<option value="MUSTANG">MUSTANG (2)</option>
<option value="NEW FIESTA (00M)">NEW FIESTA (00M) (1)</option>
<option value="NIRO">NIRO (1)</option>
<option value="NOTE">NOTE (2)</option>
<option value="NV200">NV200 (1)</option>
<option value="OUTLANDER">OUTLANDER (1)</option>
<option value="PANDA HATCHBACK">PANDA HATCHBACK (1)</option>
<option value="PASSAT">PASSAT (1)</option>
<option value="PICANTO">PICANTO (2)</option>
<option value="PUMA">PUMA (16)</option>
<option value="Q2">Q2 (1)</option>
<option value="QASHQAI">QASHQAI (5)</option>
<option value="RANGER">RANGER (5)</option>
<option value="RAPID">RAPID (1)</option>
<option value="RAV4">RAV4 (1)</option>
<option value="SCIROCCO">SCIROCCO (2)</option>
<option value="SLK250">SLK250 (1)</option>
<option value="S-MAX">S-MAX (8)</option>
<option value="S-MAX VIGNALE DIESEL ESTATE">S-MAX VIGNALE DIESEL ESTATE (1)</option>
<option value="SPORTAGE">SPORTAGE (4)</option>
<option value="SQ5">SQ5 (1)</option>
<option value="TOURNEO">TOURNEO (8)</option>
<option value="TOURNEO CUSTOM">TOURNEO CUSTOM (3)</option>
<option value="TRANSIT">TRANSIT (9)</option>
<option value="TRANSIT 350 L3 DIESEL FWD">TRANSIT 350 L3 DIESEL FWD (3)</option>
<option value="TRANSIT CONNECT">TRANSIT CONNECT (2)</option>
<option value="TRANSIT CUSTOM">TRANSIT CUSTOM (11)</option>
<option value="TRANSIT CUSTOM 280 L1 DIESEL FWD">TRANSIT CUSTOM 280 L1 DIESEL FWD (1)</option>
<option value="TRANSIT CUSTOM 300 L1 DIESEL FWD">TRANSIT CUSTOM 300 L1 DIESEL FWD (2)</option>
<option value="TRANSIT CUSTOM 300 L2 DIESEL FWD">TRANSIT CUSTOM 300 L2 DIESEL FWD (3)</option>
<option value="TRANSIT CUSTOM 320 L1 DIESEL FWD">TRANSIT CUSTOM 320 L1 DIESEL FWD (2)</option>
<option value="TRANSIT CUSTOM MS-RT">TRANSIT CUSTOM MS-RT (3)</option>
<option value="TRANSIT CUSTOM TOURNEO">TRANSIT CUSTOM TOURNEO (3)</option>
<option value="TRANSIT CUSTOM TOURNEO L1 DIESEL FWD">TRANSIT CUSTOM TOURNEO L1 DIESEL FWD (2)</option>
<option value="T-ROC">T-ROC (1)</option>
<option value="TUCSON">TUCSON (3)</option>
<option value="UP">UP (1)</option>
<option value="V60">V60 (1)</option>
<option value="VERSO">VERSO (1)</option>
<option value="VIVARO">VIVARO (1)</option>
<option value="XE">XE (1)</option>
<option value="X-TRAIL">X-TRAIL (1)</option>
<option value="YARIS">YARIS (1)</option>
<option value="ZAFIRA">ZAFIRA (1)</option>
<option value="ZOE">ZOE (1)</option>
</select>
</span>
</div>
</div>
<!-- budget-->
<div class="col-12 col-lg-6 py-2 budget">
<label for="MaxPrice_DD">Budget</label>
<div class="budget__input form-control budget-control" @click="cashPanel = !cashPanel">Budget</div>
<div :class="{'budget-open': cashPanel}" class="budget__container">
<div class="container-fluid p-3">
<div class="row no-gutters">
<div class="col-12">
<div class="row justify-content-center">
<div @click="cashPanel = !cashPanel" class="col-auto close__button ml-auto">
<span class="icon icon-times"></span></div>
<div class="col-12 text-center">
<ul class="nav nav-tabs" id="cash-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="cash-tab" data-toggle="tab" href="#cash" role="tab"
aria-controls="cash" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monthly-tab" data-toggle="tab" href="#monthly" role="tab"
aria-controls="monthly" aria-selected="false">Monthly</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="cash" role="tabpanel" aria-labelledby="cash-tab">
<div class="row">
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_MinPrice_DDUpdate">
<select name="ctl26$MinPrice$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$MinPrice$DD\',\'\')', 0)" id="ctl26_MinPrice_DD" class="form-control">
<option selected="selected" value="-1">Min Price</option>
<option value="0">£0</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option value="11000">£11,000</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="20000">£20,000</option>
<option value="22500">£22,500</option>
<option value="25000">£25,000</option>
<option value="27500">£27,500</option>
<option value="30000">£30,000</option>
<option value="32500">£32,500</option>
<option value="35000">£35,000</option>
<option value="37500">£37,500</option>
</select>
</span>
</div>
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_MaxPrice_DDUpdate">
<select name="ctl26$MaxPrice$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$MaxPrice$DD\',\'\')', 0)" id="ctl26_MaxPrice_DD" class="form-control">
<option selected="selected" value="-1">Max Price</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option value="11000">£11,000</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="20000">£20,000</option>
<option value="22500">£22,500</option>
<option value="25000">£25,000</option>
<option value="27500">£27,500</option>
<option value="30000">£30,000</option>
<option value="32500">£32,500</option>
<option value="35000">£35,000</option>
<option value="37500">£37,500</option>
<option value="40000">£40,000</option>
</select>
</span>
</div>
</div>
</div>
<div class="tab-pane" id="monthly" role="tabpanel" aria-labelledby="monthly-tab">
<div class="row">
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_FinanceMinRegularPayment_DDUpdate">
<select name="ctl26$FinanceMinRegularPayment$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$FinanceMinRegularPayment$DD\',\'\')', 0)" id="ctl26_FinanceMinRegularPayment_DD" class="form-control">
<option selected="selected" value="-1">Min Payment</option>
<option value="0">£0</option>
<option value="50">£50</option>
<option value="100">£100</option>
<option value="150">£150</option>
<option value="200">£200</option>
<option value="250">£250</option>
<option value="300">£300</option>
<option value="350">£350</option>
<option value="400">£400</option>
<option value="450">£450</option>
<option value="500">£500</option>
</select>
</span>
</div>
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_FinanceMaxRegularPayment_DDUpdate">
<select name="ctl26$FinanceMaxRegularPayment$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$FinanceMaxRegularPayment$DD\',\'\')', 0)" id="ctl26_FinanceMaxRegularPayment_DD" class="form-control">
<option selected="selected" value="-1">Max Payment</option>
<option value="50">£50</option>
<option value="100">£100</option>
<option value="150">£150</option>
<option value="200">£200</option>
<option value="250">£250</option>
<option value="300">£300</option>
<option value="350">£350</option>
<option value="400">£400</option>
<option value="450">£450</option>
<option value="500">£500</option>
<option value="550">£550</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end budget -->
<div class="col-12 col-lg-6 py-2">
<label for="MaxPrice_DD">Transmission</label>
<span id="ctl26_Transmission_DDUpdate">
<select name="ctl26$Transmission$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Transmission$DD\',\'\')', 0)" id="ctl26_Transmission_DD" class="form-control">
<option selected="selected" value="-1">Transmission</option>
<option value="5 Speed">5 SPEED</option>
<option value="6 Speed">6 SPEED</option>
<option value="Automatic">AUTOMATIC</option>
<option value="Manual">MANUAL</option>
</select>
</span>
</div>
</div>
<div class="row justify-content-end my-3 text-center text-lg-right">
<div class="col-12 col-lg-auto align-self-center order-1 order-lg-2">
<input type="submit" name="ctl26$SearchButton__new$COGCustomSearchButton" value="Search" id="ctl26_SearchButton__new_COGCustomSearchButton" class="py-2 px-5 btn btn_primary gtm-track--submit_search" formnovalidate="formnovalidate" />
</div>
</div>
<hr class="my-3">
<div class="panel__heading py-3">
<h4>New Cars</h4>
<p>
Choose a manufacturer and/or model to see our new car offers
</p>
<div class="row py-4">
<div class="col-6">
<!-- start: cms manufacturer dropdown -->
<div class="form-group">
<label for="new-car-search__make" class="control-label sr-only">Make</label>
<select id="new-car-search__make" @change="setNewCarLink($event)" v-model="carmake" v-bind="selectedMake" ref="makeSelect" class="form-control" id="new-car-search__make">
<option value="">Select make</option>
<option value="ford">Ford</option>
<option value="fiat">Fiat</option>
</select>
</div>
<!-- end: cms manufacturer dropdown -->
</div>
<div class="col-6">
<!-- start: cms model dropdown -->
<div class="form-group">
<label for="new-car-search__model" class="control-label sr-only">Model</label>
<select id="new-car-search__model" @change="setNewCarLink($event)" v-model="carurl" v-bind="selectedModel" ref="modelSelect" class="form-control" id="new-car-search__model">
<option value="" data-brand="">Select model</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/fiesta/" data-brand="Ford">Ford Fiesta</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/new-ford-fiesta-ecoboost-mild-hybrid/" data-brand="Ford">New Ford Fiesta EcoBoost Mild Hybrid</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/tourneo-courier/" data-brand="Ford">Ford Tourneo Courier</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/ecosport/" data-brand="Ford">Ford EcoSport</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/new-puma/" data-brand="Ford">New Ford Puma</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/new-puma-mild-hybrid/" data-brand="Ford">New Ford Puma Mild Hybrid</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/focus/" data-brand="Ford">Ford Focus</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/new-ford-focus-ecoboost-mild-hybrid/" data-brand="Ford">New Ford Focus EcoBoost Mild Hybrid</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/tourneo-connect/" data-brand="Ford">Ford Tourneo Connect</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/all-new-ford-kuga/" data-brand="Ford">All-New Ford Kuga</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/all-electric-ford-mustang-mach-e/" data-brand="Ford">All-Electric Ford Mustang Mach-E</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/mondeo/" data-brand="Ford">Ford Mondeo</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/mondeo-hybrid/" data-brand="Ford">Ford Mondeo Hybrid</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/ford-mustang/" data-brand="Ford">Ford Mustang</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/s-max/" data-brand="Ford">Ford S-Max</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/galaxy/" data-brand="Ford">Ford Galaxy</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/tourneo-custom/" data-brand="Ford">Ford Tourneo Custom</option>
<option v-if="carmake === 'ford'" value="/ford/new-cars/new-tourneo-custom-plug-in-hybrid/" data-brand="Ford">New Ford Tourneo Custom Plug-In Hybrid</option>
<option v-if="carmake === 'fiat'" value="/fiat/new-cars/500/" data-brand="Fiat">500</option>
<option v-if="carmake === 'fiat'" value="/fiat/new-cars/500c/" data-brand="Fiat">500C</option>
<option v-if="carmake === 'fiat'" value="/fiat/new-cars/500l/" data-brand="Fiat">500L</option>
<option v-if="carmake === 'fiat'" value="/fiat/new-cars/500x/" data-brand="Fiat">500X</option>
<option v-if="carmake === 'fiat'" value="/fiat/new-cars/panda/" data-brand="Fiat">Panda</option>
<option v-if="carmake === 'fiat'" value="/fiat/new-cars/tipo/" data-brand="Fiat">Tipo</option>
</select>
</div>
<!-- end: cms model dropdown -->
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<a :href="carmake !== '' && carurl === '' ? carmake + '/new-cars/' : carurl" ref="newSubmit" class="btn btn_primary new-search__button">Search</a>
</div>
</div>
</div>
</div>
</div>
</transition-group>
</div>
<!-- end car panel--> <!-- van panel-->
<div class="interactive__panel van-panel"
v-bind:class="{'d-none': carOpen || servicingOpen, 'h-100': vanOpen}"
@click="!vanOpen ? openVanPanel() : null">
<transition mode="out-in" name="slide">
<div key="vanclosed" v-if="!vanOpen" class="p-4">
<h4>Vans</h4>
</div>
<div key="vanopen" v-else class="h-100">
<div class="panel__content p-4 h-100">
<div class="panel__heading py-3">
<h4>Used and New Vans in Stock</h4>
</div>
<div class="row py-4">
<div class="col-12 col-lg-6 py-2">
<div class="form-group">
<label for="Van_MakeField_DD">Make</label>
<span id="ctl26_Van_MakeField_DDUpdate">
<select name="ctl26$Van_MakeField$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_MakeField$DD\',\'\')', 0)" id="ctl26_Van_MakeField_DD" class="form-control">
<option selected="selected" value="-1">All Makes</option>
<option value="CITROEN">CITROEN (11)</option>
<option value="FORD">FORD (59)</option>
<option value="FORD (LCV)">FORD (LCV) (13)</option>
<option value="ISUZU">ISUZU (1)</option>
<option value="NISSAN">NISSAN (1)</option>
<option value="TOYOTA">TOYOTA (1)</option>
<option value="VAUXHALL">VAUXHALL (1)</option>
<option value="VOLKSWAGEN">VOLKSWAGEN (1)</option>
</select>
</span>
</div>
</div>
<div class="col-12 col-lg-6 py-2">
<div class="form-group">
<label for="Van_ModelField_DD">Model</label>
<span id="ctl26_Van_ModelField_DDUpdate">
<select name="ctl26$Van_ModelField$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_ModelField$DD\',\'\')', 0)" id="ctl26_Van_ModelField_DD" class="form-control">
<option selected="selected" value="-1">All Models</option>
<option value="AMAROK">AMAROK (1)</option>
<option value="BERLINGO">BERLINGO (11)</option>
<option value="CONNECT">CONNECT (2)</option>
<option value="COURIER">COURIER (2)</option>
<option value="CUSTOM">CUSTOM (9)</option>
<option value="CUSTOM 320 L1">CUSTOM 320 L1 (3)</option>
<option value="D-MAX">D-MAX (1)</option>
<option value="FIESTA">FIESTA (1)</option>
<option value="HILUX">HILUX (1)</option>
<option value="MS-RT CONNECT">MS-RT CONNECT (2)</option>
<option value="MS-RT CUSTOM">MS-RT CUSTOM (2)</option>
<option value="NV200">NV200 (1)</option>
<option value="RANGER">RANGER (4)</option>
<option value="TOURNEO">TOURNEO (3)</option>
<option value="TOURNEO CUSTOM">TOURNEO CUSTOM (3)</option>
<option value="TRANSIT">TRANSIT (9)</option>
<option value="TRANSIT 350 L3 DIESEL FWD">TRANSIT 350 L3 DIESEL FWD (3)</option>
<option value="TRANSIT CONNECT">TRANSIT CONNECT (2)</option>
<option value="TRANSIT CUSTOM">TRANSIT CUSTOM (11)</option>
<option value="TRANSIT CUSTOM 280 L1 DIESEL FWD">TRANSIT CUSTOM 280 L1 DIESEL FWD (1)</option>
<option value="TRANSIT CUSTOM 300 L1 DIESEL FWD">TRANSIT CUSTOM 300 L1 DIESEL FWD (2)</option>
<option value="TRANSIT CUSTOM 300 L2 DIESEL FWD">TRANSIT CUSTOM 300 L2 DIESEL FWD (3)</option>
<option value="TRANSIT CUSTOM 320 L1 DIESEL FWD">TRANSIT CUSTOM 320 L1 DIESEL FWD (2)</option>
<option value="TRANSIT CUSTOM MS-RT">TRANSIT CUSTOM MS-RT (3)</option>
<option value="TRANSIT CUSTOM TOURNEO">TRANSIT CUSTOM TOURNEO (3)</option>
<option value="TRANSIT CUSTOM TOURNEO L1 DIESEL FWD">TRANSIT CUSTOM TOURNEO L1 DIESEL FWD (2)</option>
<option value="VIVARO">VIVARO (1)</option>
</select>
</span>
</div>
</div>
<!-- budget-->
<div class="col-12 col-lg-6 py-2 budget">
<label for="MaxPrice_DD">Budget</label>
<div class="budget__input form-control budget-control" @click="cashPanelVan = !cashPanelVan">Budget</div>
<div :class="{'budget-open': cashPanelVan}" class="budget__container">
<div class="container-fluid p-3">
<div class="row no-gutters">
<div class="col-12">
<div class="row justify-content-center">
<div @click="cashPanelVan = !cashPanelVan" class="col-auto close__button ml-auto">
<span class="icon icon-times"></span></div>
<div class="col-12 text-center">
<ul class="nav nav-tabs" id="cash-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="cash-tab" data-toggle="tab" href="#cash" role="tab"
aria-controls="cash" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monthly-tab" data-toggle="tab" href="#monthly" role="tab"
aria-controls="monthly" aria-selected="false">Monthly</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="cash" role="tabpanel" aria-labelledby="cash-tab">
<div class="row">
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_Van_MinPrice_DDUpdate">
<select name="ctl26$Van_MinPrice$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_MinPrice$DD\',\'\')', 0)" id="ctl26_Van_MinPrice_DD" class="form-control">
<option selected="selected" value="-1">Min Price</option>
<option value="0">£0</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option value="11000">£11,000</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="20000">£20,000</option>
<option value="22500">£22,500</option>
<option value="25000">£25,000</option>
<option value="27500">£27,500</option>
<option value="30000">£30,000</option>
<option value="32500">£32,500</option>
<option value="35000">£35,000</option>
<option value="37500">£37,500</option>
</select>
</span>
</div>
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_Van_MaxPrice_DDUpdate">
<select name="ctl26$Van_MaxPrice$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_MaxPrice$DD\',\'\')', 0)" id="ctl26_Van_MaxPrice_DD" class="form-control">
<option selected="selected" value="-1">Max Price</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option value="11000">£11,000</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="20000">£20,000</option>
<option value="22500">£22,500</option>
<option value="25000">£25,000</option>
<option value="27500">£27,500</option>
<option value="30000">£30,000</option>
<option value="32500">£32,500</option>
<option value="35000">£35,000</option>
<option value="37500">£37,500</option>
<option value="40000">£40,000</option>
</select>
</span>
</div>
</div>
</div>
<div class="tab-pane" id="monthly" role="tabpanel" aria-labelledby="monthly-tab">
<div class="row">
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_Van_FinanceMinRegularPayment_DDUpdate">
<select name="ctl26$Van_FinanceMinRegularPayment$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_FinanceMinRegularPayment$DD\',\'\')', 0)" id="ctl26_Van_FinanceMinRegularPayment_DD" class="form-control">
<option selected="selected" value="-1">Min Payment</option>
<option value="0">£0</option>
<option value="50">£50</option>
<option value="100">£100</option>
<option value="150">£150</option>
<option value="200">£200</option>
<option value="250">£250</option>
<option value="300">£300</option>
<option value="350">£350</option>
<option value="400">£400</option>
<option value="450">£450</option>
<option value="500">£500</option>
</select>
</span>
</div>
<div class="col-12 col-lg my-2 my-lg-0">
<span id="ctl26_Van_FinanceMaxRegularPayment_DDUpdate">
<select name="ctl26$Van_FinanceMaxRegularPayment$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_FinanceMaxRegularPayment$DD\',\'\')', 0)" id="ctl26_Van_FinanceMaxRegularPayment_DD" class="form-control">
<option selected="selected" value="-1">Max Payment</option>
<option value="50">£50</option>
<option value="100">£100</option>
<option value="150">£150</option>
<option value="200">£200</option>
<option value="250">£250</option>
<option value="300">£300</option>
<option value="350">£350</option>
<option value="400">£400</option>
<option value="450">£450</option>
<option value="500">£500</option>
<option value="550">£550</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end budget -->
<div class="col-12 col-lg-6 py-2">
<label for="Van_MaxPrice_DD">Transmission</label>
<span id="ctl26_Van_Transmission_DDUpdate">
<select name="ctl26$Van_Transmission$DD" onchange="javascript:setTimeout('__doPostBack(\'ctl26$Van_Transmission$DD\',\'\')', 0)" id="ctl26_Van_Transmission_DD" class="form-control">
<option selected="selected" value="-1">Transmission</option>
<option value="Automatic">AUTOMATIC</option>
<option value="Manual">MANUAL</option>
</select>
</span>
</div>
</div>
<div class="row justify-content-end my-3 text-center text-lg-right">
<div class="col-12 col-lg-auto align-self-center order-1 order-lg-2">
<input type="submit" name="ctl26$Van_SearchButton$COGCustomSearchButton" value="Search" id="ctl26_Van_SearchButton_COGCustomSearchButton" class="py-2 px-5 btn btn_primary gtm-track--submit_search" formnovalidate="formnovalidate" />
</div>
</div>
<hr class="my-3">
<div class="panel__heading py-3">
<h4>New Vans</h4>
<p>
Choose a manufacturer and/or model to see our new van offers
</p>
<div class="row py-4">
<div class="col-6">
<!-- start: cms manufacturer dropdown -->
<div class="form-group">
<label for="new-car-search__make" class="control-label sr-only">Make</label>
<select id="new-car-search__make" @change="setNewCarLink($event)" v-model="carmake" v-bind="selectedMake" ref="makeSelect" class="form-control" id="new-car-search__make">
<option value="">Select make</option>
<option value="ford">Ford</option>
<option value="ms-rt">MS-RT</option>
</select>
</div>
<!-- end: cms manufacturer dropdown -->
</div>
<div class="col-6">
<!-- start: cms model dropdown -->
<div class="form-group">
<label for="new-car-search__model" class="control-label sr-only">Model</label>
<select id="new-car-search__model" @change="setNewCarLink($event)" v-model="carurl" v-bind="selectedModel" ref="modelSelect" class="form-control" id="new-car-search__model">
<option value="" data-brand="">Select model</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/fiesta-sport-van/" data-brand="Ford">Fiesta Sport Van</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/transit-courier/" data-brand="Ford">Transit Courier</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/transit-connect/" data-brand="Ford">Transit Connect</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/transit-custom/" data-brand="Ford">Transit Custom</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/transit/" data-brand="Ford">Transit</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/ranger/" data-brand="Ford">Ford Ranger</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/ranger-raptor/" data-brand="Ford">Ford Ranger Raptor</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/transit-chassis-cab/" data-brand="Ford">Ford Transit Chassis Cab</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/transit-minibus/" data-brand="Ford">Transit Minibus</option>
<option v-if="carmake === 'ford'" value="/ford/new-vans/new-transit-custom-plug-in-hybrid/" data-brand="Ford">New Transit Custom Plug-In Hybrid</option>
<option v-if="carmake === 'ms-rt'" value="/ms-rt/new-vans/transit-custom/" data-brand="MS-RT">Transit Custom</option>
<option v-if="carmake === 'ms-rt'" value="/ms-rt/new-vans/transit-connect/" data-brand="MS-RT">Transit Connect</option>
<option v-if="carmake === 'ms-rt'" value="/ms-rt/new-vans/transit-dciv-svo-edition/" data-brand="MS-RT">Transit Custom DCIV SVO Edition</option>
</select>
</div>
<!-- end: cms model dropdown -->
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<a :href="carmake !== '' && carurl === '' ? carmake + '/new-vans/' : carurl" ref="newSubmit" class="btn btn_primary new-search__button">Search</a>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
<!-- end van panel--><!-- servicing panel-->
<div class="interactive__panel servicing-panel"
v-bind:class="{'d-none': carOpen || vanOpen, 'h-100': servicingOpen}"
@click="!servicingOpen ? openServicingPanel() : null">
<transition-group mode="out-in" name="slide">
<div v-if="!servicingOpen" key="servicingclosed" class="p-4">
<h4>Service & MOT</h4>
</div>
<div key="servicingopen" v-else class="h-100">
<div class="panel__content p-4 h-100">
<div class="manufacturer__content">
<h4>
Manufacturer Service
</h4>
<p class="py-3">If your Ford is less than 3 years old or under manufacturer warranty, click below</p>
<div class="row">
<div class="col-12 col-lg-6">
<a href="https://www.ford.co.uk/owner/my-vehicle/book-a-service#!/vehicle-step?gdc=1032&parsed=%5Bobject%20Object%5D" noopener noreferrer target="_blank">
<div class="option my-3">
<h5>Ford Service</h5>
</div>
</a>
</div>
</div>
</div>
<br>
<hr class="my-3">
<div class="other__servicing py-4">
<h4>
Hartwell Service & MOT
</h4>
<p class="py-3">If your vehicle is more than 3 years old, fill out your registration on the form below to start the online service booking process</p>
<div class="service-booking__panel py-3">
<div class="form-group">
<div class="row">
<div class="col-6">
<input ref="serviceInput" id="serviceReg" v-on:input="setServicingLink()" placeholder="Registration Number" type="text" class="w-100"/>
</div>
<div class="col-6" >
<a ref="serviceSubmit" href="/service-booking/step-1/" id="submit" class="btn btn_primary w-100">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition-group>
</div>
</div>
<!-- end servicing panel-->
</div>
</div>
</div>
</div>
</transition>
<script>
"use strict";
var homeApp = new Vue({
el: '#home-hero',
data: {
superSearchLink: '',
superSearchLinkVans: '',
containBy: '',
carOpen: false,
vanOpen: false,
servicingOpen: false,
loading: true,
carmake: '',
carurl: '',
cashPanel: false,
cashPanelVan: false,
selectedMake: '',
selectedModel: ''
},
methods: {
// handlers for submitting on keypress ENTER for cars and vans
submitCar: function submitCar() {
this.$refs.submitButtonCar.click();
},
submitVan: function submitVan() {
this.$refs.submitButtonVan.click();
},
getHeaderPadding: function getHeaderPadding() {
// get distance from the container to the left of the window
var header = document.querySelector('.header__container').offsetLeft;
this.containBy = header + 'px';
},
setContainerPadding: function setContainerPadding() {
// set horizontal paddings to simulate being inside the container
this.$refs.heroMain.style.paddingLeft = this.containBy;
this.$refs.heroMain.style.paddingRight = this.containBy;
},
openCarPanel: function openCarPanel() {
this.carOpen = !this.carOpen;
this.vanOpen = false;
this.servicingOpen = false;
},
openVanPanel: function openVanPanel() {
this.vanOpen = !this.vanOpen;
this.carOpen = false;
this.servicingOpen = false;
},
openServicingPanel: function openServicingPanel() {
this.servicingOpen = !this.servicingOpen;
this.carOpen = false;
this.vanOpen = false;
},
setLoading: function setLoading() {
this.loading = false;
},
openCarPanelOnMobileDefault: function openCarPanelOnMobileDefault() {
if (window.innerWidth < 992) {
this.carOpen = true;
} else {
null;
}
},
// set servicing link to carry on regnumber
setServicingLink: function setServicingLink() {
var _this = this;
if (this.servicingOpen) {
if (this.$refs.serviceInput.value.length === 0) {
this.$refs.serviceSubmit.setAttribute('href', '/service-booking/step-1/');
} else {
this.$refs.serviceSubmit.setAttribute('href', "/service-booking/step-1/?regNo=".concat(this.$refs.serviceInput.value));
} // conditional for enter key
this.$refs.serviceInput.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
event.preventDefault();
_this.$refs.serviceSubmit.click();
}
});
}
},
setNewCarLink: function setNewCarLink(event) {
var _this, makeSelect, modelSelect,_this = this;
makeSelect = this.$refs.makeSelect;
modelSelect = this.$refs.modelSelect;
if(makeSelect) {
if(makeSelect.selectedIndex === 0) {
modelSelect.selectedIndex = 0;
modelSelect.disabled = true;
} else {
modelSelect.disabled = false;
}}
},
},
created: function created() {
window.addEventListener('resize', this.getHeaderPadding);
window.addEventListener('resize', this.setContainerPadding);
},
mounted: function mounted() {
this.setNewCarLink();
this.setLoading();
// autoedge behaviourals
this.getHeaderPadding();
this.setContainerPadding();
this.openCarPanelOnMobileDefault();
},
updated: function updated() {
this.setNewCarLink();
}
});
</script><div class="container container__large py-5 text-center home-franchises">
<div class="row">
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/ford/">
<img src="/img/brands/ford.png" alt="">
</a>
</div>
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/fiat/">
<img src="/img/brands/fiat.png" alt="">
</a>
</div>
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/hartwell-vans/">
<img src="/img/brands/hartwell-vans.png" alt="">
</a>
</div>
<div class="col-6 col-lg-3 align-self-center brand__item">
<a href="/pages/hartwell-vans/ms-rt/">
<img src="/img/brands/ms-rt.png" alt="">
</a>
</div>
</div>
</div>
<!-- START: slider -->
<div class="container-fluid p-0 home-slider d-none d-lg-block home-banners">
<div class="row no-gutters">
<div class="col-12">
<div class="slider p-0 m-0">
<div class="slider-item slider__slider-item">
<!-- start: banner -->
<div class="banner">
<!-- start: url -->
<a href="https://www.hartwell.co.uk/pages/used-apr" class="banner w-100">
<!-- end: url -->
<!-- start: image -->
<figure class="lazyload_fade w-100">
<img
src="https://cogcms-images.azureedge.net/media/49995/pds008304-hartwell-used-car-web-1920x350.jpg" data-src="https://cogcms-images.azureedge.net/media/49995/pds008304-hartwell-used-car-web-1920x350.jpg?quality=1" alt="" class="banner__image w-100">
</figure>
<!-- end: image -->
<!-- start: headline -->
<!-- start: url -->
</a>
<!-- end: url -->
</div>
<!-- end: banner -->
</div>
<div class="slider-item slider__slider-item">
<!-- start: banner -->
<div class="banner">
<!-- start: url -->
<a href="/pages/ford/upgrade-and-save" class="banner w-100">
<!-- end: url -->
<!-- start: image -->
<figure class="lazyload_fade w-100">
<img
src="https://cogcms-images.azureedge.net/media/42357/pds008040-hartwell-ford-q3-banners-1800x350-a.jpg" data-src="https://cogcms-images.azureedge.net/media/42357/pds008040-hartwell-ford-q3-banners-1800x350-a.jpg?quality=1" alt="" class="banner__image w-100">
</figure>
<!-- end: image -->
<!-- start: headline -->
<!-- start: url -->
</a>
<!-- end: url -->
</div>
<!-- end: banner -->
</div>
<div class="slider-item slider__slider-item">
<!-- start: banner -->
<div class="banner">
<!-- start: url -->
<a href="https://www.hartwell.co.uk/pages/about-us/covid-19/" class="banner w-100">
<!-- end: url -->
<!-- start: image -->
<figure class="lazyload_fade w-100">
<img
src="https://cogcms-images.azureedge.net/media/44934/pds008189-hartwell-covid-19-homepage-banner.jpg" data-src="https://cogcms-images.azureedge.net/media/44934/pds008189-hartwell-covid-19-homepage-banner.jpg?quality=1" alt="" class="banner__image w-100">
</figure>
<!-- end: image -->
<!-- start: headline -->
<!-- start: url -->
</a>
<!-- end: url -->
</div>
<!-- end: banner -->
</div>
<div class="slider-item slider__slider-item">
<!-- start: banner -->
<div class="banner">
<!-- start: url -->
<a href="/ms-rt/new-vans/transit-dciv-svo-edition/" class="banner w-100">
<!-- end: url -->
<!-- start: image -->
<figure class="lazyload_fade w-100">
<img
src="https://cogcms-images.azureedge.net/media/42896/pds008120-hartwell-ms-rt-svo-web-1800x350.jpg" data-src="https://cogcms-images.azureedge.net/media/42896/pds008120-hartwell-ms-rt-svo-web-1800x350.jpg?quality=1" alt="" class="banner__image w-100">
</figure>
<!-- end: image -->
<!-- start: headline -->
<!-- start: url -->
</a>
<!-- end: url -->
</div>
<!-- end: banner -->
</div>
</div>
</div>
</div>
</div>
<!-- END: slider -->
<!-- end slider-->
<div class="container-fluid p-0 gray__bg">
<div class="container container__large about__home ">
<div class="row py-5">
<div class="col-12 col-lg-auto align-self-center">
<div class="row">
<div class="col-auto mx-auto mx-lg-0 align-self-center py-3 hartwell__logo">
<img src="/img/brands/hartwell_alt.png" width="70" alt="">
</div>
<div class="col-12 col-lg-6 px-5 align-self-center about__desc">
<h2>Hartwell</h2>
<p>Driving value since 1919</p>
</div>
</div>
</div>
<div class="col-12 col-lg align-self-center">
<div class="umb-grid">
<div class="grid-section">
<div >
<div class="row c">
<div class="col-md-12 column">
<div >
<div class="advanced__textarea">
<p>Established in 1919 in Oxfordshire, Hartwell PLC is a leading automotive group representing Ford car and commercial vehicles. With ten locations based across the UK, we’re delighted to assist customers with their motoring needs, and have built a reputation for providing exceptional customer service and the highest quality vehicles. It’s this reputation, and the loyalty of our valued customers, that has seen us reach our centenary in 2019.</p>
<p>In addition to the wide variety of new cars that we offer, we have a comprehensive stock of used vehicles for sale across our network. These include models from a range of franchises, and which can suit a variety of needs. Whether you’re looking for your very first car at an affordable price, or need to upgrade your existing vehicle to accommodate your growing family, we can help.</p>
<p><a href="/pages/about-us/" class="btn btn_primary">About Us</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container__large py-5 why-hartwell">
<div class="row">
<div class="col-12 col-md-6 align-self-center">
<div class="umb-grid">
<div class="grid-section">
<div >
<div class="row c">
<div class="col-md-12 column">
<div >
<h3>Why Choose Hartwell?</h3>
<div class="advanced__textarea">
<ul>
<li>Over 100 years of experience</li>
<li>10 locations</li>
<li>Friendly team of experts</li>
<li>Officially authorised centre of 5 manufacturers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 align-self-center">
<div class="video__container neum-shadow">
<div class="banner__video yplayer" id="yplayer" data-youtube-id="WgXI22weDbY" data-is-hero="true"></div>
</div>
</div>
</div>
</div>
</main>
<footer ref="footer" class="footer page__footer py-5">
<div class="container container__large">
<div class="row py-4">
<div class="col-12 col-lg-6 popular__links">
<h4 class="mb-3">Popular Links</h4>
<div class="umb-grid">
<div class="grid-section">
<div >
<div class="row c">
<div class="col-md-4 column">
<div >
<div class="advanced__textarea">
<ul>
<li><a href="/cars/">New Vehicles</a></li>
<li><a href="https://www.hartwell.co.uk/service-booking/step-1/">Book a Service</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 column">
<div >
<div class="advanced__textarea">
<ul>
<li><a href="https://search.hartwell.co.uk/#/" data-anchor="#/">Used Vehicles</a></li>
<li><a href="/pages/motability/">Motability</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 column">
<div >
<div class="advanced__textarea">
<ul>
<li><a href="/careers/">Careers</a></li>
<li><a href="/about/testimonials/">Testimonials</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<h4 class="mb-3 mt-4 mt-lg-0">Our Locations</h4>
<div class="row">
<div class="col-12 col-lg-6">
<li><a href="/locations/7100/abingdon-used/">Abingdon</a></li>
<li><a href="/locations/7101/banbury-used/">Banbury</a></li>
<li><a href="/locations/7102/dunstable-used/">Dunstable</a></li>
<li><a href="/locations/7105/grimsby-used/">Grimsby</a></li>
<li><a href="/locations/7106/hemel-hempstead-used/">Hemel Hempstead</a></li>
</div>
<div class="col-12 col-lg-6">
<li><a href="/locations/7107/hereford-used/">Hereford</a></li>
<li><a href="/locations/7108/kidlington-fordstore-used/">Kidlington</a></li>
<li><a href="/locations/7110/scunthorpe-used/">Scunthorpe</a></li>
<li><a href="/locations/7111/watford-used/">Watford</a></li>
<li><a href="/locations/7095/hartwell-used-car-van-centre/">Oxford</a></li>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 pt-5 pb-3">
<div class="row">
<div class="col-sm-12 col-lg-auto align-self-center">
<h3>
Get in touch with us
</h3>
</div>
<div class="col-sm-12 col-lg-auto align-self-center">
<div class="row">
<div class="col-12 col-lg-auto">
<a href="/contact-us/" class="my-3 my-lg-0 btn btn_secondary w-100 brand__link">Contact Us</a>
</div>
<div class="col-12 col-lg-auto">
<div onclick="openLiveChat()" class="my-3 my-lg-0 btn btn_primary w-100">Live Chat</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 py-3 py-lg-0">
<ul class="social__links">
<a href="https://www.facebook.com/hartwellplc" target="_blank" noopener noreferrer>
<li><span class="icon icon-facebook"></span></li>
</a>
<a href="https://twitter.com/Hartwell_co_uk/?lang=en" target="_blank" noopener noreferrer>
<li><span class="icon icon-twitter-square"></span></li>
</a>
<a href="https://www.youtube.com/user/hartwellplc" target="_blank" noopener noreferrer>
<li><span class="icon icon-youtube"></span></li>
</a>
<a href="https://instagram.com/hartwellplc" target="_blank" noopener noreferrer>
<li><span class="icon icon-instagram"></span></li>
</a>
</ul>
</div>
<div class="col py-3">
<div class="row">
<div class="col-12 inline-list footer__list">
<li><a href="/pages/modern-slavery-statement/">Modern Slavery Act Statement</a></li>
<li><a href="/pages/terms-and-conditions/">Terms & Conditions</a></li>
<li><a href="/sitemap.aspx">Site Map</a></li>
<li><a href="/careers/">Recruitment</a></li>
<li><a href="/pages/privacy-policy/">Privacy Policy</a></li>
<li><a href="/data-preferences/">Data Preferences</a></li>
<li><a href="/pages/tax-strategy/">Tax Strategy</a></li>
<li><a href="/pages/pension-plan-statement-of-investment-principles/">Pension Plan Statement of Investment Principles</a></li>
<li><a href="/pages/code-of-ethics/">Code of Ethics</a></li>
</div>
</div>
</div>
</div><!-- Col End -->
<!-- Row End -->
</div><!-- Container End -->
</footer>
<div class="container-fluid p-0 bg-white py-3 sub-footer">
<div class="container container__large py-3">
<div class="umb-grid">
<div class="grid-section">
<div >
<div class="row c">
<div class="col-md-12 column">
<div >
<div class="advanced__textarea">
<p><span>Hartwell Automotive Group Ltd is an Appointed Representative of Hartwell Finance Limited, a vehicle finance broker which is authorised and regulated by the Financial Conduct Authority. We can introduce you to a limited number of lenders, who may pay us for introducing you to them.</span></p>
<p>Head Office - Wootton Business Park, Wootton, United Kingdom, OX13 6FD</p>
<p>Registered in England - 158447</p>
<p>VAT Reg. No. - 194365535</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="copyright">© 2020 Automotive website by: <a href="https://www.blueskyinteractive.co.uk" target="_blank" rel="noopener">Bluesky Interactive Ltd</a></p>
</div>
</div>
</div>
</div>
</form>
<!--cms-disable-->
<!-- Core Files -->
<!-- Modernizr -->
<script src="/core/js/assets/modernizr.js"></script>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="/core/js/assets/jquery-3.3.1.min.js"><\/script>')</script>
<!-- jQuery Migrate - for plugins using older versions of jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap local fallback -->
<script>window.Popper || document.write('<script src="/core/js/assets/popper.min.js"><\/script>')</script>
<script>window.bootstrap || document.write('<script src="/core/js/assets/bootstrap.min.js"><\/script>')</script>
<!-- Core Plugins -->
<script src="/core/js/assets/plugins.js"></script>
<!-- Site JavaScript -->
<script src="/js/global.js?cb=1596557993975"></script>
<!--/cms-disable-->
<a href="/shortlist/">
<div class="d-none d-lg-block global__shortlist shortlist__counter">
</div></a>
<script src="/js/search-counter.js"></script>
</body>
</html>