Heroes & Top-of-Page Beta

sa-location-form-hero v2026-06-06

Landscape form-rail hero for /locations/* pages: full-bleed photo-backed hero with a left-to-right navy gradient, a centered H1 (uppercase orange question line plus a smaller white UVP subline) in the wide left copy column, and a compact intake form built into a narrow right rail. As of June 2026 forms are allowed and expected on location pages.

Source skill: sa-location-form-hero · Updated 2026-06-15 14:52:01

Edit

Live preview

Open ↗

When to use

Top-of-page hero on any /locations/* page that needs the intake form built directly into the hero.

Rules & constraints

Landscape proportion: copy column ~1.55fr, form rail ~0.9fr, gap 44px, grid padding 36px 32px.
H1 centered and uppercase on the orange question line; UVP subline smaller white 600-weight text with a line break after "You focus on getting better."
Form container carries a centered uppercase title: TELL US ABOUT YOUR CASE.
Submit button text is exactly GET STARTED (orange fill is the one approved exception, only on form submit buttons).
No card-header CTA line and no "No fee unless we win" sub-note in the form.
Foundry orange #D97706, navy #0B212D. No em dashes, no emoji, full-opacity text.
Live wiring when deployed: form class sa-custom-contact-intake-form, canonical fields full_name/phone/email/case_type/injured_status/consent plus honeypot company, endpoint https://aguiarinjurylawyers.com/wp-json/sal/v1/contact-intake.
Card header CTA must stay statewide-safe (GET STARTED), never a city-attorney claim.
Lexington / Central / Northern KY phone (859) 888-8000.

Live reference

https://aguiarinjurylawyers.com/locations/lexington/

Deployment notes

Replaced on 2026-06-15 with the rendered live hero/location card form from https://aguiarinjurylawyers.com/kentucky-pip-reform-2026/ after full form QA. Keeps the working Litify/email/tracking contract without duplicate unnamed mock fields.

HTML

<!-- sa-form-label-submit-guard-2026-06-15 -->
<style id="sa-form-label-submit-guard-2026-06-15">
.sa-custom-contact-intake-form .sa-field-control{display:flex!important;flex-direction:column;gap:5px;width:100%;min-width:0;margin:0 0 14px;color:inherit;box-sizing:border-box;}
.sa-custom-contact-intake-form .sa-field-control .sa-form-label{display:block!important;font-size:13px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.5px;color:inherit!important;margin:0!important;line-height:1.25!important;}
.sa-custom-contact-intake-form .sa-field-control > input,
.sa-custom-contact-intake-form .sa-field-control > select,
.sa-custom-contact-intake-form .sa-field-control > textarea{width:100%!important;margin:0!important;box-sizing:border-box;}
.sa-custom-contact-intake-form textarea.sa-form-field{height:auto!important;min-height:84px;resize:vertical;}
.sa-custom-contact-intake-form button[type="submit"],
.sa-custom-contact-intake-form .submit,
.sa-custom-contact-intake-form input[type="submit"]{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:46px;color:#fff!important;-webkit-text-fill-color:#fff!important;background:linear-gradient(0deg,#000 0%,#0B212D 100%)!important;border:2px solid #0B212D!important;border-radius:8px;opacity:1!important;visibility:visible!important;text-shadow:none!important;font-weight:700;text-transform:uppercase;cursor:pointer;}
</style>
<form action="/wp-json/sal/v1/contact-intake" class="sa-hero-loc__card sa-custom-contact-intake-form" cr-attached="true" data-rest-endpoint="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" data-sal-attribution-ready="1" data-sal-bridge-rest-attached="1" data-sal-form-configured="20260529" data-sal-submit-ready="1" id="sa-intake-form" method="post">
<h3>Tell Us About Your Case</h3>
<div class="sa-hero-loc__row">
<label class="sa-field-control" for="sa-form-1-full-name"><span class="sa-form-label">Full Name</span><input class="sa-hero-loc__field sa-form-field" id="sa-form-1-full-name" name="full_name" placeholder="Full name" required="" type="text"/></label>
<label class="sa-field-control" for="sa-form-1-phone"><span class="sa-form-label">Phone Number</span><input class="sa-hero-loc__field sa-form-field" id="sa-form-1-phone" name="phone" placeholder="Phone" required="" type="tel"/></label>
</div>
<label class="sa-field-control" for="sa-form-1-email"><span class="sa-form-label">Email</span><input class="sa-hero-loc__field sa-form-field" id="sa-form-1-email" name="email" placeholder="Email" type="email"/></label>
<label class="sa-field-control" for="sa-form-1-case-type"><span class="sa-form-label">Case Type</span><select class="sa-hero-loc__field" id="sa-form-1-case-type" name="case_type" required="">
<option value="">Case type</option>
<option>Car Accident</option>
<option>Truck Accident</option>
<option>Motorcycle Accident</option>
<option>Pedestrian Accident</option>
<option>Other</option>
</select></label>
<label class="sa-field-control" for="sa-form-1-injured-status"><span class="sa-form-label">Were You Injured?</span><select class="sa-hero-loc__field" id="sa-form-1-injured-status" name="injured_status" required="">
<option value="">Were you injured?</option>
<option>Yes</option>
<option>No</option>
</select></label>
<div class="sa-hero-loc__consent"><input id="sa-hero-consent" name="consent" required="" type="checkbox"/><label for="sa-hero-consent">I agree to be contacted by Sam Aguiar Injury Lawyers and understand messaging rates may apply.</label></div>
<input aria-hidden="true" autocomplete="off" class="sa-hero-loc__hp" name="company" tabindex="-1" type="text"/>
<input name="gclid" type="hidden" value=""/>
<input name="utm_source" type="hidden" value=""/>
<input name="utm_medium" type="hidden" value=""/>
<input name="utm_campaign" type="hidden" value=""/>
<input name="referrer" type="hidden" value=""/>
<button class="sa-hero-loc__submit submit" type="submit">GET STARTED</button>
<input name="sal_contact_intake_submit" type="hidden" value="1"/><input name="page_title" type="hidden" value="Kentucky PIP Reform 2026 | Sam Aguiar"/><input name="success_redirect" type="hidden" value="https://aguiarinjurylawyers.com/contact-us/thank-you/"/><input name="error_redirect" type="hidden" value="https://aguiarinjurylawyers.com/contact-us/?intake=error"/><input name="page_url" type="hidden" value="https://aguiarinjurylawyers.com/kentucky-pip-reform-2026/?registry_capture=element75"/><input name="landing_page_url" type="hidden" value="https://aguiarinjurylawyers.com/kentucky-pip-reform-2026/?registry_capture=element75"/><input name="last_page_url" type="hidden" value="https://aguiarinjurylawyers.com/kentucky-pip-reform-2026/?registry_capture=element75"/><input name="gbraid" type="hidden" value=""/><input name="wbraid" type="hidden" value=""/><input name="utm_term" type="hidden" value=""/><input name="utm_content" type="hidden" value=""/><input name="message" type="hidden" value=""/></form>

CSS

.sa-hero-loc{
  --sa-navy:#0B212D;--sa-orange:#D97706;--sa-white:#fff;--sa-soft:#E8EEF2;
  position:relative;width:100%;overflow:hidden;isolation:isolate;background:#0B212D;
}
.sa-hero-loc *{box-sizing:border-box;font-family:Poppins,system-ui,sans-serif;}
.sa-hero-loc__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.5;}
.sa-hero-loc__overlay{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,33,45,.93) 0%,rgba(11,33,45,.6) 55%,rgba(0,0,0,.75) 100%);}
.sa-hero-loc__grid{position:relative;z-index:1;max-width:1280px;margin:0 auto;
  padding:36px 32px;display:grid;grid-template-columns:1.55fr .9fr;gap:44px;align-items:start;}
.sa-hero-loc__copy{color:#fff;text-align:center;padding-top:8px;}
.sa-hero-loc__title{font-weight:700;line-height:1.16;color:#fff;margin:0 auto;max-width:640px;text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.45);font-size:clamp(28px,2.8vw,40px);}
.sa-hero-loc__q{display:block;text-transform:uppercase;color:var(--sa-orange);margin-bottom:.14em;}
.sa-hero-loc__p{display:block;color:#fff;font-size:.62em;font-weight:600;line-height:1.28;}
.sa-hero-loc__card{background:rgba(11,33,45,.86);border:1px solid rgba(217,119,6,.5);border-radius:12px;
  padding:20px 20px;box-shadow:0 18px 48px rgba(0,0,0,.5);color:#fff;max-width:360px;width:100%;margin-left:auto;}
.sa-hero-loc__card h3{font-size:18px;margin:0 0 12px;color:#fff;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.sa-hero-loc__field{display:block;width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;color:#fff;padding:10px 12px;font-size:13.5px;margin-bottom:9px;}
.sa-hero-loc__field::placeholder{color:#9aa1a8;}
.sa-hero-loc__row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.sa-hero-loc__row .sa-hero-loc__field{margin-bottom:9px;}
.sa-hero-loc select.sa-hero-loc__field{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}
.sa-hero-loc__consent{display:flex;align-items:flex-start;gap:7px;margin:3px 0 12px;}
.sa-hero-loc__consent input{margin-top:2px;flex:0 0 auto;accent-color:var(--sa-orange);}
.sa-hero-loc__consent label{font-size:10.5px;line-height:1.45;color:#cfd6dc;}
.sa-hero-loc__submit{width:100%;background:var(--sa-orange);color:#fff;font-weight:700;border:none;border-radius:6px;
  padding:13px;font-size:14.5px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;}
.sa-hero-loc__sub-note{display:block;text-align:center;color:#9aa1a8;font-size:11px;margin-top:8px;}
@media (max-width:900px){
  .sa-hero-loc__grid{grid-template-columns:1fr;gap:28px;padding:40px 22px;}
  .sa-hero-loc__card{max-width:none;margin:0;}
  .sa-hero-loc__title{max-width:none;}
}