CTA / Footer Beta

sa-cta-banner-split-form v2026-06-07

Full-bleed split CTA banner with a built-in intake form: shared image-left / form-panel-right shell (.sa-cta-banner-split) with three approved right-panel variants — A 'You Focus on Getting Better' (white + orange accent, navy submit), B 'Get Back to Living Your Best Life' (navy Visible Depth, white button), and C Bigger Share Guarantee (white + navy accent, BSG eyebrow). Drops the email field; Name + Phone + Case Type + Were You Injured only.

Source skill: sa-cta-image-banner (sibling); component lives in sa-design-elements catalog. Mockup: CTA-Banner-UVP-Variants-Mockup.html · Updated 2026-06-15 14:51:57

Edit

Live preview

Open ↗

When to use

Conversion pages that need a CTA banner that captures a lead inline (homepage, contact, results, landing pages). Pick one variant per page.

Rules & constraints

1. Strict palette only: Navy #0B212D, Orange #F89C22, White #FFFFFF. NO orange backgrounds (firm-briefing §14) — orange is accent text / hover only.
2. Three approved right-panel variants share one shell (.sa-cta-banner-split): A = white + orange left accent (navy submit, orange on hover); B = navy Visible Depth gradient panel (white inputs, white button -> orange-outline on hover); C = white + navy left accent with BSG eyebrow + orange highlight. Pick ONE variant per page.
3. Button copy is 'Get Started' (homepage/contact-page exception in firm-briefing §10). Do NOT use the orange-filled 'Call Now' button — that older live banner violates §14 and should be retired in the same pass.
4. Email field is intentionally dropped to fit the panel. Field set is locked: Full Name + Phone + Case Type + Were You Injured? Follow homepage .sa-custom-contact-intake-form field order, labels, and select-option pattern.
5. Canonical field names: full_name, phone, case_type, injured_status (+ honeypot 'company'). Endpoint /wp-json/sal/v1/contact-intake when wired live.
6. Bigger Share Guarantee(R) (Variant C eyebrow) always carries the registered mark.
7. Headlines centered, Poppins 700 (26px desktop / 22px mobile). Left image is the shared welcome-to-kentucky.webp; swap per-page as needed.
8. Mobile (<900px): stacks image-top, form-below; field rows go single-column.

Live reference

https://aguiarinjurylawyers.com/ (homepage intake-form pattern); not yet on a live page as of 2026-06-07.

Deployment notes

Bottom-of-page / mid-page CTA with built-in intake form. Distinct from sa-cta-image-banner (click-to-call image banner, no form) and sa-rural-cta-form-banner (rural location-page form banner). Single shared shell .sa-cta-banner-split + .var-a / .var-b / .var-c modifier. Form auto-wires to the sitewide bridge (class sa-custom-contact-intake-form -> /wp-json/sal/v1/contact-intake) exactly like the homepage form, including the honeypot 'company' field. Use on homepage, contact, results, and landing pages (forms deprecated on practice-area/location/blog pages, except location form-rail heroes). Pairs with pre-publish-qa + wp-deploy on the ship lane and playwright-visual-qa post-deploy. Mockup source: CTA-Banner-UVP-Variants-Mockup (June 2026 mockup session).

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>
<!-- ====== SA CTA Banner — Split Form (Variant A: You Focus on Getting Better) ====== -->
<section class="sa-cta-banner-split var-a">
<div aria-label="Kentucky pasture with horses" class="left-img" role="img"></div>
<div class="right-panel">
<div class="headline">You Focus on Getting Better.<br/>We'll Handle Everything Else.</div>
<form action="/wp-json/sal/v1/contact-intake" class="sa-custom-contact-intake-form" data-rest-endpoint="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" method="post">
<div class="sa-field-row">
<label class="sa-field-control" for="sa-form-1-full-name"><span class="sa-form-label">Full Name</span><input class="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-form-field" id="sa-form-1-phone" name="phone" placeholder="Phone Number" required="" type="tel"/></label>
</div>
<label class="sa-field-control" for="sa-form-1-case-type"><span class="sa-form-label">Case Type</span><select 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>Rideshare Accident</option>
<option>Pedestrian Accident</option><option>Wrongful Death</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 id="sa-form-1-injured-status" name="injured_status" required="">
<option value="">Were You Injured?</option>
<option>Yes, I was injured</option><option>Not sure yet</option><option>No injuries</option>
</select></label>
<input aria-hidden="true" autocomplete="off" name="company" style="position:absolute;left:-9999px;" tabindex="-1" type="text"/>
<label class="sa-field-control" for="sa-form-1-email"><span class="sa-form-label">Email</span><input class="sa-form-field" id="sa-form-1-email" name="email" placeholder="Email" type="email"/></label>
<label class="sa-field-control" for="sa-form-1-message"><span class="sa-form-label">Tell Us What Happened</span><textarea class="sa-form-field" id="sa-form-1-message" name="message" placeholder="Tell us what happened." rows="3"></textarea></label>
<input name="page_url" type="hidden" value=""/>
<input name="page_title" type="hidden" value=""/>
<input name="referrer" type="hidden" value=""/>
<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="success_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=success"/>
<input name="error_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=error"/>
<input name="sal_contact_intake_submit" type="hidden" value="1"/>
<button class="submit" type="submit">Get Started</button>
</form>
</div>
</section>
<!-- ====== Variant B: Get Back to Living Your Best Life (Navy Visible Depth) ====== -->
<section class="sa-cta-banner-split var-b">
<div aria-label="Kentucky pasture with horses" class="left-img" role="img"></div>
<div class="right-panel">
<div class="headline">Get Back to Living<br/>Your <span class="accent">Best Life.</span></div>
<form action="/wp-json/sal/v1/contact-intake" class="sa-custom-contact-intake-form" data-rest-endpoint="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" method="post">
<div class="sa-field-row">
<label class="sa-field-control" for="sa-form-2-full-name"><span class="sa-form-label">Full Name</span><input class="sa-form-field" id="sa-form-2-full-name" name="full_name" placeholder="Full Name" required="" type="text"/></label>
<label class="sa-field-control" for="sa-form-2-phone"><span class="sa-form-label">Phone Number</span><input class="sa-form-field" id="sa-form-2-phone" name="phone" placeholder="Phone Number" required="" type="tel"/></label>
</div>
<label class="sa-field-control" for="sa-form-2-case-type"><span class="sa-form-label">Case Type</span><select id="sa-form-2-case-type" name="case_type" required="">
<option value="">Case Type</option>
<option>Car Accident</option><option>Truck Accident</option>
<option>Motorcycle Accident</option><option>Rideshare Accident</option>
<option>Pedestrian Accident</option><option>Wrongful Death</option><option>Other</option>
</select></label>
<label class="sa-field-control" for="sa-form-2-injured-status"><span class="sa-form-label">Were You Injured?</span><select id="sa-form-2-injured-status" name="injured_status" required="">
<option value="">Were You Injured?</option>
<option>Yes, I was injured</option><option>Not sure yet</option><option>No injuries</option>
</select></label>
<input aria-hidden="true" autocomplete="off" name="company" style="position:absolute;left:-9999px;" tabindex="-1" type="text"/>
<label class="sa-field-control" for="sa-form-2-email"><span class="sa-form-label">Email</span><input class="sa-form-field" id="sa-form-2-email" name="email" placeholder="Email" type="email"/></label>
<label class="sa-field-control" for="sa-form-2-message"><span class="sa-form-label">Tell Us What Happened</span><textarea class="sa-form-field" id="sa-form-2-message" name="message" placeholder="Tell us what happened." rows="3"></textarea></label>
<input name="page_url" type="hidden" value=""/>
<input name="page_title" type="hidden" value=""/>
<input name="referrer" type="hidden" value=""/>
<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="success_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=success"/>
<input name="error_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=error"/>
<input name="sal_contact_intake_submit" type="hidden" value="1"/>
<button class="submit" type="submit">Get Started</button>
</form>
</div>
</section>
<!-- ====== Variant C: Bigger Share Guarantee (White / Navy accent) ====== -->
<section class="sa-cta-banner-split var-c">
<div aria-label="Kentucky pasture with horses" class="left-img" role="img"></div>
<div class="right-panel">
<div class="eyebrow">Bigger Share Guarantee®</div>
<div class="headline">You Always <span class="accent">Get More.</span></div>
<form action="/wp-json/sal/v1/contact-intake" class="sa-custom-contact-intake-form" data-rest-endpoint="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" method="post">
<div class="sa-field-row">
<label class="sa-field-control" for="sa-form-3-full-name"><span class="sa-form-label">Full Name</span><input class="sa-form-field" id="sa-form-3-full-name" name="full_name" placeholder="Full Name" required="" type="text"/></label>
<label class="sa-field-control" for="sa-form-3-phone"><span class="sa-form-label">Phone Number</span><input class="sa-form-field" id="sa-form-3-phone" name="phone" placeholder="Phone Number" required="" type="tel"/></label>
</div>
<label class="sa-field-control" for="sa-form-3-case-type"><span class="sa-form-label">Case Type</span><select id="sa-form-3-case-type" name="case_type" required="">
<option value="">Case Type</option>
<option>Car Accident</option><option>Truck Accident</option>
<option>Motorcycle Accident</option><option>Rideshare Accident</option>
<option>Pedestrian Accident</option><option>Wrongful Death</option><option>Other</option>
</select></label>
<label class="sa-field-control" for="sa-form-3-injured-status"><span class="sa-form-label">Were You Injured?</span><select id="sa-form-3-injured-status" name="injured_status" required="">
<option value="">Were You Injured?</option>
<option>Yes, I was injured</option><option>Not sure yet</option><option>No injuries</option>
</select></label>
<input aria-hidden="true" autocomplete="off" name="company" style="position:absolute;left:-9999px;" tabindex="-1" type="text"/>
<label class="sa-field-control" for="sa-form-3-email"><span class="sa-form-label">Email</span><input class="sa-form-field" id="sa-form-3-email" name="email" placeholder="Email" type="email"/></label>
<label class="sa-field-control" for="sa-form-3-message"><span class="sa-form-label">Tell Us What Happened</span><textarea class="sa-form-field" id="sa-form-3-message" name="message" placeholder="Tell us what happened." rows="3"></textarea></label>
<input name="page_url" type="hidden" value=""/>
<input name="page_title" type="hidden" value=""/>
<input name="referrer" type="hidden" value=""/>
<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="success_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=success"/>
<input name="error_redirect" type="hidden" value="https://aguiarinjurylawyers.com/?sa_intake=error"/>
<input name="sal_contact_intake_submit" type="hidden" value="1"/>
<button class="submit" type="submit">Get Started</button>
</form>
</div>
</section>

CSS

/* ── Shared split shell ── */
.sa-cta-banner-split{width:100%;max-width:1200px;margin:16px auto 0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:360px;border-radius:4px;box-shadow:0 6px 24px rgba(11,33,45,.08);}
.sa-cta-banner-split .left-img{background-image:url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/welcome-to-kentucky.webp');background-size:cover;background-position:center;min-height:360px;}
.sa-cta-banner-split .right-panel{padding:38px 44px;display:flex;flex-direction:column;justify-content:center;}
.sa-cta-banner-split .headline{font-family:'Poppins',sans-serif;font-weight:700;font-size:26px;line-height:1.25;margin:0 0 18px;text-align:center;}
.sa-cta-banner-split form{display:flex;flex-direction:column;gap:10px;}
.sa-cta-banner-split .sa-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sa-cta-banner-split input,.sa-cta-banner-split select{font-family:'Poppins',sans-serif;font-weight:500;font-size:15px;color:#0B212D;background:#FFFFFF;border-radius:8px;padding:12px 14px;width:100%;outline:none;}
.sa-cta-banner-split select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230B212D' d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.sa-cta-banner-split button{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;border-radius:8px;padding:14px;cursor:pointer;margin-top:4px;letter-spacing:.4px;transition:background .2s,color .2s;}

/* ── Variant A — White / orange left accent ── */
.var-a .right-panel{background:#FFFFFF;border-left:4px solid #F89C22;}
.var-a .headline{color:#0B212D;}
.var-a input,.var-a select{border:2px solid #C7D4E3;}
.var-a input:focus,.var-a select:focus{border-color:#0B212D;}
.var-a button{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;border:none;}
.var-a button:hover{background:#F89C22;color:#0B212D;}

/* ── Variant B — Navy Visible Depth panel ── */
.var-b .right-panel{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;}
.var-b .headline{color:#fff;}
.var-b .headline .accent{color:#F89C22;}
.var-b input,.var-b select{border:2px solid #FFFFFF;}
.var-b input:focus,.var-b select:focus{border-color:#F89C22;}
.var-b button{background:#FFFFFF;color:#0B212D;border:2px solid #FFFFFF;}
.var-b button:hover{background:transparent;color:#F89C22;border-color:#F89C22;}

/* ── Variant C — White / navy left accent / BSG eyebrow ── */
.var-c .right-panel{background:#FFFFFF;border-left:4px solid #0B212D;}
.var-c .eyebrow{text-align:center;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#F89C22;margin-bottom:8px;}
.var-c .headline{color:#0B212D;}
.var-c .headline .accent{color:#F89C22;}
.var-c input,.var-c select{border:2px solid #C7D4E3;}
.var-c input:focus,.var-c select:focus{border-color:#0B212D;}
.var-c button{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;border:none;}
.var-c button:hover{background:#F89C22;color:#0B212D;}

/* ── Responsive ── */
@media (max-width:900px){
  .sa-cta-banner-split{grid-template-columns:1fr;}
  .sa-cta-banner-split .left-img{min-height:200px;}
  .sa-cta-banner-split .right-panel{padding:30px 24px;}
  .sa-cta-banner-split .sa-field-row{grid-template-columns:1fr;}
  .sa-cta-banner-split .headline{font-size:22px;}
}