CTA / Footer Beta

sa-photowall-form v2026-06-04

Photo-wall split intake form for aguiarinjurylawyers.com. A two-column conversion block: left is a tilted 3-up photo collage of real happy clients on a warm cream wall; right is a white intake panel with an orange left border, a centered You Focus on Getting Better headline, and the approved contact form wired to sal/v1/contact-intake (name, phone, case type, injured status, message, hidden tracking fields). Submit is the Visible Depth gradient GET STARTED button. Use on the Case Results page, homepage, or any conversion page where a warm client-photo lead-capture moment fits. Triggers on photo wall form, photowall form, sa-photowall-form, client collage form, split intake form with photos, happy clients form, or any photo-collage-plus-form conversion block. Distinct from sa-cva-split-form (single image-left, navy-form-right); this variant uses a tilted multi-photo collage wall. Forms are deprecated on practice-area/location/blog pages; use on homepage, contact, results, and landing pages only.

Source skill: sa-photowall-form · Updated 2026-06-15 14:51:58

Edit

Live preview

Open ↗

When to use

Late-page conversion block on the Case Results page, homepage, contact page, or landing pages — a warm tilted client-photo collage (left) plus the approved white intake form (right).

Rules & constraints

Use only on homepage, contact, results, and landing pages — NOT on practice-area/location/blog pages.
Submit button reads GET STARTED and uses the Visible Depth gradient.
Orange (#D97706) used for the panel's left border only, never background.
Nonce is server-injected via {{NONCE_VALUE}} — never hardcode. No emoji.

Live reference

https://previews.aguiarinjurylawyers.com/our-results-enhanced

Deployment notes

Classes namespaced sa-pwf-; form id sa-pwf-form wired to https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake. Nonce placeholder {{NONCE_VALUE}} is server-injected. Forms are deprecated on practice-area/location/blog pages — use on homepage, contact, results, and landing pages only. Distinct from sa-cva-split-form. Run pre-publish-qa and playwright-visual-qa after deploy.

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 PHOTO-WALL SPLIT INTAKE FORM - START -->
<!-- Split: tilted client photo collage (left) + approved white intake form (right). Wired to sal/v1/contact-intake like the homepage. -->
<section class="sa-pwf-band">
<div class="sa-pwf">
<div aria-label="Sam Aguiar Injury Lawyers clients" class="sa-pwf-wall">
<div class="sa-pwf-pic"><img alt="Sam Aguiar Injury Lawyers client" height="300" loading="lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-12.webp" width="300"/></div>
<div class="sa-pwf-pic"><img alt="Sam Aguiar Injury Lawyers client" height="300" loading="lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-4.webp" width="300"/></div>
<div class="sa-pwf-pic"><img alt="Sam Aguiar Injury Lawyers client" height="300" loading="lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-15.webp" width="300"/></div>
<div class="sa-pwf-pic"><img alt="Sam Aguiar Injury Lawyers client" height="300" loading="lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-2.webp" width="300"/></div>
<div class="sa-pwf-pic"><img alt="Sam Aguiar Injury Lawyers client" height="300" loading="lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-02.webp" width="300"/></div>
<div class="sa-pwf-pic"><img alt="Sam Aguiar Injury Lawyers client" height="300" loading="lazy" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-19.webp" width="300"/></div>
</div>
<div class="sa-pwf-panel">
<div class="sa-pwf-head">You Focus on Getting Better.<br/>We’ll Handle Everything Else.</div>
<form action="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" class="sa-custom-contact-intake-form" data-rest-endpoint="https://aguiarinjurylawyers.com/?rest_route=/sal/v1/contact-intake" id="sa-pwf-form" method="post">
<input name="sal_contact_intake_submit" type="hidden" value="1"/>
<input name="page_url" 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 id="sal_contact_intake_nonce" name="sal_contact_intake_nonce" type="hidden" value=""/>
<div class="sa-pwf-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 value="Car Accident">Car Accident</option>
<option value="Truck Accident">Truck Accident</option>
<option value="Motorcycle Accident">Motorcycle Accident</option>
<option value="Rideshare Accident">Rideshare Accident</option>
<option value="Pedestrian Accident">Pedestrian Accident</option>
<option value="Wrongful Death">Wrongful Death</option>
<option value="Other">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 value="Yes, I was injured">Yes, I was injured</option>
<option value="Not sure yet">Not sure yet</option>
<option value="No injuries">No injuries</option>
</select></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="Additional Details" rows="3"></textarea></label>
<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>
<input name="page_title" 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"/>
<button class="sa-pwf-btn submit" type="submit">GET STARTED</button>
</form>
</div>
</div>
</section>
<script>
/* Intake tracking: fill hidden fields from URL like the homepage (page_url, referrer, gclid, utm_*) */
(function(){
  var f=document.getElementById("sa-pwf-form"); if(!f) return;
  var p=new URLSearchParams(location.search);
  var set=function(n,v){var el=f.querySelector('[name="'+n+'"]'); if(el&&v!=null&&v!=="") el.value=v;};
  set("page_url",location.href);
  set("referrer",document.referrer||"");
  ["utm_source","utm_medium","utm_campaign"].forEach(function(k){set(k,p.get(k));});
  var g=p.get("gclid");
  if(g){set("gclid",g); try{localStorage.setItem("sal_gclid",g);}catch(e){}}
  else{try{var sg=localStorage.getItem("sal_gclid"); if(sg) set("gclid",sg);}catch(e){}}
})();
</script>
<!-- SA PHOTO-WALL SPLIT INTAKE FORM - END -->

CSS

.sa-pwf-band{padding:96px 24px;background:#f7f9fa}
.sa-pwf{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1180px;margin:0 auto;overflow:hidden;border-radius:14px;box-shadow:0 6px 24px rgba(11,33,45,.10);background:#fff;font-family:'Poppins',system-ui,sans-serif}
.sa-pwf .sa-pwf-wall{background:#EFE7D8;padding:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:center}
.sa-pwf .sa-pwf-pic{aspect-ratio:1/1.05;border-radius:8px;overflow:hidden;box-shadow:0 6px 16px rgba(11,33,45,.14);background:#fff;padding:8px 8px 28px;transition:transform .3s ease}
.sa-pwf .sa-pwf-pic:nth-child(odd){transform:rotate(-1.2deg)}
.sa-pwf .sa-pwf-pic:nth-child(even){transform:rotate(1.2deg)}
.sa-pwf .sa-pwf-pic:nth-child(3n){transform:rotate(.6deg)}
.sa-pwf .sa-pwf-pic:hover{transform:rotate(0) translateY(-4px) scale(1.04);z-index:10}
.sa-pwf .sa-pwf-pic img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;border-radius:4px}
.sa-pwf .sa-pwf-panel{background:#fff;border-left:4px solid #D97706;padding:38px 44px;display:flex;flex-direction:column;justify-content:center}
.sa-pwf .sa-pwf-head{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:26px;color:#0B212D;line-height:1.25;margin:0 0 18px;text-align:center}
.sa-pwf form{display:flex;flex-direction:column;gap:10px}
.sa-pwf .sa-pwf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sa-pwf input,.sa-pwf select,.sa-pwf textarea{font-family:'Poppins',system-ui,sans-serif;font-weight:500;font-size:15px;color:#0B212D;background:#fff;border:2px solid #C7D4E3;border-radius:8px;padding:12px 14px;width:100%;outline:none;box-sizing:border-box}
.sa-pwf textarea{min-height:84px;resize:vertical}
.sa-pwf select{appearance:none;-webkit-appearance:none;padding-right:36px;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}
.sa-pwf .sa-pwf-btn{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:16px;background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;border:none;border-radius:8px;padding:14px;cursor:pointer;margin-top:4px;letter-spacing:.5px}
@media(max-width:900px){.sa-pwf{grid-template-columns:1fr}.sa-pwf .sa-pwf-panel{padding:30px 24px}.sa-pwf .sa-pwf-row{grid-template-columns:1fr}}