Customer Form
Before we show the customer their valuation on the vehicle, we need to retrieve some details about who they are.
FY71 OLV 
FAQs
Lorem ipsum
Lorem ipsum.
Lorem ipsum.
Average rating of 4.8 by our Sell your Car customers.
Are you a myListers Member? Sign in Enter your details to get an instant valuation.
<section class="o-section o-section--lg" id="form" tabindex="-1">
<div class="o-wrapper">
<div class="o-grid | u-gap-xl">
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<div class="o-focus o-focus--left o-flow-sm">
<span class="c-reg">FY71 OLV</span>
<div class="o-media">
<div class="o-media__thumb | u-w-12 u-nml-md">
<img class="c-img | u-aspect--3x2" src="/assets/img/content/new/toyota/c-hr/2023/grey__front-left.webp" width="192" height="128" alt="">
</div>
<div class="o-media__body | o-flow-sm">
<span class="u-heading u-epsilon u-mt">Toyota C-HR Design HEV CT</span>
<ul class="o-list-inline | u-fs-small u-fw-500 u-mb-xs">
<li class="o-list__item o-delimit-item" data-delimit="•">2021</li>
<li class="o-list__item o-delimit-item" data-delimit="•">12,000 miles</li>
<li class="o-list__item o-delimit-item" data-delimit="•">Grey</li>
<li class="o-list__item o-delimit-item" data-delimit="•">Automatic</li>
<li class="o-list__item o-delimit-item" data-delimit="•">Hybrid</li>
</ul>
<a class="u-fs-sm" href="/web/sell-your-car/">Change your car</a>
</div>
</div>
</div>
<!-- FAQs -->
<h2 class="u-heading u-epsilon u-mb-xs u-mt-lg">FAQs</h2>
<div class="o-accordion | u-w-80%-@bp5" x-data="{ active: false }">
<section class="o-accordion__section" role="region" x-data="{ id: 1, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null }, }">
<button class="o-accordion__title o-split | u-bb u-b-ui" @click="expanded = !expanded" :aria-expanded="expanded">
<span class="o-split__title | u-size-md">How is the valuation formed?</span>
<svg class="c-icon" :class="expanded ? 'is-active' : 'is-inactive'" viewbox="0 0 16 16" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</button>
<div class="o-accordion__panel" x-show="expanded" x-collapse style="display: none;">
<div class="o-accordion__content o-flow" :class="expanded ? '| is-active' : '| is-inactive'">
<p>Lorem ipsum</p>
</div>
</div>
</section>
<section class="o-accordion__section" role="region" x-data="{ id: 2, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null }, }">
<button class="o-accordion__title o-split | u-bb u-b-ui" @click="expanded = !expanded" :aria-expanded="expanded">
<span class="o-split__title | u-size-md">When will you pick up the car?</span>
<svg class="c-icon" :class="expanded ? 'is-active' : 'is-inactive'" viewbox="0 0 16 16" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</button>
<div class="o-accordion__panel" x-show="expanded" x-collapse style="display: none;">
<div class="o-accordion__content o-flow" :class="expanded ? '| is-active' : '| is-inactive'">
<p>Lorem ipsum.</p>
</div>
</div>
</section>
<section class="o-accordion__section" role="region" x-data="{ id: 3, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null }, }">
<button class="o-accordion__title o-split | u-bb u-b-ui" @click="expanded = !expanded" :aria-expanded="expanded">
<span class="o-split__title | u-size-md">Are you competitive on price?</span>
<svg class="c-icon" :class="expanded ? 'is-active' : 'is-inactive'" viewbox="0 0 16 16" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</button>
<div class="o-accordion__panel" x-show="expanded" x-collapse style="display: none;">
<div class="o-accordion__content o-flow" :class="expanded ? '| is-active' : '| is-inactive'">
<p>Lorem ipsum.</p>
</div>
</div>
</section>
</div>
<!-- Ratings -->
<div class="u-mt-lg">
<div class="c-ratings c-ratings--inline | u-mr-sm">
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon c-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon c-icon--half-star" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"></path>
</svg>
</div>
<p>Average rating of <span class="c-badge c-badge c-badge--lg | u-mx-xs u-tc-heading">4.8</span> by our Sell your Car customers.</p>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-5-@bp5">
<span class="u-block u-fs-sm u-radius u-center u-p-sm u-bg-ui-200 u-mb">Are you a myListers Member? <a href="/web/mylisters/sign-in/">Sign in</a></span>
<small class="u-fs-sm u-mb-sm u-block">Enter your details to get an instant valuation.</small>
<div class="c-card c-card--shadow | u-p u-bg-body u-w-100%">
<form class="o-flow">
<!-- Name -->
<label class="c-label | u-w-100%">
<span class="c-label__text">
<span class="o-split">
<span class="o-split__title">Your Full Name</span>
<span> </span>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" type="text" required>
</span>
</label>
<!-- Email -->
<label class="c-label | u-w-100%">
<span class="c-label__text">
<span class="o-split">
<span class="o-split__title">Email Address</span>
<button class="c-btn c-btn--muted c-btn--sm" type="button" x-data="" x-tooltip.content="We take your address so we cant send you an email confirmation of your valuation." aria-expanded="false">
<span class="u-hidden">More Information</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2.004 8a5.996 5.996 0 1 1 11.992 0A5.996 5.996 0 0 1 2.004 8Zm6.581-3.17A.793.793 0 1 1 7 4.83a.793.793 0 0 1 1.585 0Zm-2.17 1.585H8c.292 0 .529.236.529.528v3.7h1.057V11.7H6.415v-1.057h1.057V7.472H6.415V6.415Z"></path>
</svg>
</button>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" type="email" required>
</span>
</label>
<!-- Phone -->
<label class="c-label | u-w-100%">
<span class="c-label__text">
<span class="o-split">
<span class="o-split__title">Phone Number</span>
<button class="c-btn c-btn--muted c-btn--sm" type="button" x-data="" x-tooltip.content="We take your phone number so we can get in touch about your car sale." aria-expanded="false">
<span class="u-hidden">More Information</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2.004 8a5.996 5.996 0 1 1 11.992 0A5.996 5.996 0 0 1 2.004 8Zm6.581-3.17A.793.793 0 1 1 7 4.83a.793.793 0 0 1 1.585 0Zm-2.17 1.585H8c.292 0 .529.236.529.528v3.7h1.057V11.7H6.415v-1.057h1.057V7.472H6.415V6.415Z"></path>
</svg>
</button>
</span>
</span>
<span class="c-label__input">
<input class="c-input c-input--text" type="number" required>
</span>
</label>
<!-- Phone Number -->
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | u-mr" id="terms_checkbox" type="checkbox" name="terms" required>
<span class="c-label__text">I have read the <a href="#">Privacy Policy</a> and accept the <a href="#">Terms</a>. I understand Listers may get in touch about my valuation.</span>
</label>
<div class="u-right">
<a class="c-btn c-btn--positive c-btn--lg" href="/web/sell-your-car/valuation/">
See Valuation
<span class="u-ml-sm" aria-hidden="true">→</span>
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</section>