📣 Missed the webinar? Watch the on-demand recording — Zero-Click Search & AI: How Senior Living Gets Found in 2026 · Watch free →
HTML Reference Sheet — ProForms & Landing Pages
Combined Reference

HTML Snippets & Best Practices

ProForms · Landing Pages · Success Pages
How to use this sheet. Every snippet has a copy button. Use the search box to filter by name. The Headers, Buttons, and Disclaimers sections are the most commonly reused blocks — start there. Note on titles: for Schedule a Tour and other forms, don't put the title with the header code; instead, use the Title block in the first step of the Advanced Editor.

Headers & Images

Header — Updated Code with Margin Recommended

Less space under the image. 200px wide; margin-bottom: -1.875rem tightens spacing to the next element.

Header — Standard 300px

Default header image at 300px. No bottom margin override.

Header Image — 2025 Code from Hareer

Mixes px and % with media queries for responsive scaling. Verify in Inspect Element across desktop, tablet, and mobile widths — responsiveness depends on actual rendering, not the unit choice. hspace="0" / vspace="0" remove spacing; raise vspace if the image looks too close to the heading.





Request Pricing & Brochure

Header Code Old

Responsive version that scales the logo and title text down on mobile.
Request A Community Visit

Image — Rounded Corners (Stellar fix)

Two ways: a class (preferred when styling varies by screen size) or inline CSS (preferred for static styling). Two common bugs to avoid: missing closing brace for

Image — with Border & Border-Radius

Right-aligned image with a 1px gold border and 15px rounded corners.

Image — Lazyload (centered, 50% width)

Image — Add Spacing (hspace/vspace)

Buttons

Landing Page Buttons Heron Club

Default button set used on landing pages. Color: #4A5A59. Includes hover lift, focus outline, and three example links (Virtual Tour, Care Levels, FAQs).




  View a Virtual Tour
  About Care Levels
  View Senior Living FAQ's

New Success Page Buttons Updated 3.25.26

Color: #716858 (warm taupe). Includes hover, active, and focus states.




  

    
      Thank you for your interest in our community. A community team member will get back to you soon.
    
  






  Amenities & Services
  Schedule a Visit

Success Page Buttons — Drop Shadow

Teal buttons (#3B8FAA) with subtle shadow and lift on hover. Includes pressed/focus state styling.

Buttons — Subtle

Navy (#00294E) with maroon border. Light shadow.

Buttons — Bold & Dramatic

Near-black (#251F1F) for maximum contrast.

Prospect Survey Buttons Bristal

Color: #768794. Pairs with a Bristal-themed thank-you message.

  
    Thank you for sharing some information about yourself. At Bristal communities, we believe in a personalized experience. We look forward to meeting you!
  







  Schedule a Tour
  Learn about the Bristal Experience

Schedule a Tour Buttons Bristal

Color: #051741 (deep navy).

  
    Thank you for requesting a visit to our beautiful community. An associate will call you to confirm your visit. We look forward to meeting you!
  







  Resources
  Learn about the Bristal Experience

Download Guide Buttons Bristal

Color: #325FA4 (medium blue).

  
    Thank you for requesting information about our beautiful community. An associate will call you to answer any questions you may have. We look forward to speaking with you!
  







  Downloadable Guides
  Learn about the Bristal Experience

Pricing Buttons Bristal

Same navy as Schedule a Tour buttons. Pairs About Us with Schedule a Visit.

  
    A community team member will reach out to you to answer any pricing questions you have. We look forward to speaking with you!
  







  About Us
  Schedule a Visit

Landing Page Button Colors Brightmore

Brown buttons (rgba(62, 42, 34, 1.0)) with stone-grey border. Includes :active and :focus overrides.




  Request Our Brochure
  View Our Floor Plans
  Learn About Life at Liberty Senior Living

Different Color Properties for Specific Buttons

Pattern from Khadijia: define base styles in .button-wrapper, then redefine with :active and :focus. To match the button styles in custom CSS, append !important to the relevant property.
.button-wrapper { /* base styles */ }

.button-wrapper:active,
.button-wrapper:focus { /* redefine here */ }

.button-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: 6.25rem;
  justify-content: center;
}
.button-wrapper .btn {
  background-color: rgba(62, 42, 34, 1.0) !important;
  color: #FFFFFF !important;
  margin-top: 30px;
  border: 3px solid #9C7B57 !important;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  border-radius: 5px;
  fill: #E9B11E;
}
.button-wrapper:active .btn,
.button-wrapper:focus .btn {
  background-color: rgba(62, 42, 34, 1.0) !important;
  color: #FFFFFF !important;
  border: 3px solid #9C7B57 !important;
}

Button Code (Demo Confirmation)

Single-button success block for demo confirmation. Color: rgba(30, 56, 105) (deep navy) with rounded 15px corners.

  
Submitted!

  
Thank you for your interest in Waypoint Converts! A team member will reach out to you shortly to confirm your demo.








  Check out our on-demand webinars

Calendly Button

Green button (rgba(31, 95, 86, 1.0)) for Calendly scheduling.




  Click here to schedule a visit to our sales center

Text & Typography

Paragraph — Size and Color

Two ready-to-use paragraph blocks in different colors and sizes.

  
    We are so glad you would like to schedule a visit. Please select a date and time that works best for you. If you do not see a date/time that is convenient for you, please call our community, and we will be happy to set up an appointment with you.
  





  
    Thank you for requesting a tour of our community. A community team member will reach out to you to confirm the date and time. If your preferred time slot conflicts with a previously scheduled appointment, we will help you choose an alternative option. We look forward to seeing you!

Text Color — Common Presets

A grab-bag of text/heading blocks with the colors most often used: #8A2529 (dark red), #1C375D (deep blue), #2C3E50 (slate), and rgb(113, 45, 63) (burgundy).

  

    
      If you do not see a date/time that is convenient for you, please call our community, and we will be happy to set up an appointment.
    
  






  

    I currently live
  






  
    We are so glad you would like to schedule a visit. Please pick a date and time that works best for you. Someone will call you to confirm your appointment.
  





  
Thank you for downloading our pricing guides. 
Please let us know if you have any questions.






  

    
      If you do not see a date/time that is convenient for you, please call our community to schedule.

Copy — Speak to an Advisor


  
    Thank you for requesting to speak with an advisor. A community team member will reach out to you to answer your questions. We look forward to speaking with you!

Copy — Schedule a Visit


  
    Thank you for requesting a visit to our beautiful community. An associate will call you to confirm your visit. We look forward to meeting you!

Center HTML — Submitted Block


  
Submitted!

  
Thank you for your interest in New Perspective Oakdale!

  
A team member will reach out to you shortly to discuss your request and answer any questions you may have.

  
We look forward to speaking with you!

Center Text — Simple

Thank you.




  
Your request has been submitted!

  
Thank you for your interest in Stone Lodge Memory Care and for scheduling an appointment to tour our beautiful community!

  
A team member will contact you shortly to confirm the date and time of your requested visit. If your preferred time slot conflicts with a previously scheduled appointment, we will help you choose an alternative option.

  
We look forward to seeing you!

  
Thank you!

Color & Size — Inline

Thank you for your interest in our community. A member of our sales team will get back to you soon.



Thank you for your interest in our community. A member of our sales team will get back to you soon.



Thank you for your interest in our community. A member of our sales team will get back to you soon.

Right-Justified Italic Text


  By submitting your question, you consent to receive text messages from [Company Name] at the number provided. Message and data rates may apply. Reply STOP to opt out at any time.

Top Margin — Heading

Need some help right away?


You've come to the right place. We would love to help you find the senior housing solution that is right for you. 



To learn more about our community, complete the form below or call us at 850-660-0415. We would love to hear from you and answer any questions you might have.

Backgrounds

Background Image with Opacity Best

Full-screen background with adjustable opacity using a CSS variable. Set --bg-opacity to: 1 for normal, 0.6 for lightly faded, 0.3 for more faded.



  
  
  Full-Screen Background Image

Background — White Transparent Overlay

Layers a 70% white gradient over the image to lighten it.

Background Image — Basic

Background Image — Full Document

Full HTML document with cover background and welcome heading.



  
  
  Full-Screen Background Image
  


  
Welcome to Your Senior Living Community

Background — Maplewood




  
  
  Full-Screen Background Image

Background with !important

Use when another stylesheet keeps overriding the background.

Background — No Repeat / Cover

Background — Fullscreen via Class

body, html {
  height: 100%;
}

.bg {
  background-image: url("img_girl.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Disclaimers

Disclaimer — Full Width, Right-Justified





  

    By submitting this form, I consent to receive emails and/or calls from Arbor Place.
    Privacy Policy

Disclaimer — Right-Justified (col-10 offset-1)





  

    
      By submitting this form, I consent to receive emails and/or calls from Arbor Place.
      Privacy Policy

Charter Disclaimer





  

    
      By submitting this form, I understand and agree that Charter Senior Living may contact me via telephone, text/sms, and email regarding my inquiry and that calls and messages may be generated using automated technology.
      Privacy Policy

Disclaimer — Bootstrap (Right-Aligned in Last Column)

Uses Bootstrap utilities. col-lg-4 col-md-6 sets column size; offset-lg-8 offset-md-6 pushes it to the right; text-end right-aligns; text-muted fst-italic applies muted italic styling.

  

    

      

        By submitting your question, you consent to receive text messages from [Company Name] at the number provided. Message and data rates may apply. Reply STOP to opt out at any time.

Disclaimer — Charter Short Form


  

    
      By submitting this form, I understand and agree that Charter Senior Living may contact me via telephone, text/sms, and email regarding my inquiry and that calls and messages may be generated using automated technology.
      Privacy Policy

Footers

Forms & Schedulers

Hide Time Slots in Schedule Picker

Hides time-of-day options on the schedule picker, stacks the calendar full-width and centered, hides the picker's own label, and stacks time-of-day buttons on mobile. Use when you want users to pick a date but not a specific time.

Scheduler Padding (Mobile)

In the Advanced Editor where the schedule picker is selected, set the Classes field to mx-auto col-auto (not just mx-auto). This restores correct padding on mobile screens.
mx-auto col-auto

col-lg-3 col-md-4 col-sm-6 col-12

row d-flex justify-content-center

Change Submit Button Text

In the Advanced Editor, on submit, choose Execute JS and paste this code.
setTimeout(function () {
  document.querySelector(".wizard-v2.tour-view .submit").innerHTML = "Download Now";
});

Redirect on Submit

On the submit/complete step, add a logic action and choose Execute JavaScript. Replace the URL.
// Open in same tab:
window.open('https://example.com', '_self');

// Open in a new tab:
window.open('https://example.com', '_blank');

Agent Variables JS

Map ProForm variables to Primary/Secondary Source in WH (Warehouse).
let v1 = window.PROFORM_V1 || ''; // Map to Primary Source in WH
let v2 = '59561' || '';            // Map to Secondary Source in WH
return {v1, v2}

// OR — single variable:
let v1 = window.PROFORM_V1 || '';
return {v1}

// OR — all four:
let v1 = window.PROFORM_V1 || '';
let v2 = '59561' || '';
let v3 = '';
let v4 = '';
return {v1, v2, v3, v4}

Force Popup on Load

onReady: [function () {
  setTimeout(function () {
    window.ACNavigator.open();
  }, 2000);
}]

Change Submit Text + Click-to-Call

// Change submit button text:
setTimeout(function () {
  document.querySelector(".wizard-v2.tour-view .submit").innerHTML = "Download Now";
});

// Click to call:
window.open('tel:8556273110');

Iframes

Launch Form from Button (Anchor or Button)

Two variants — anchor link and button. Replace proFormId with your form ID. The showClose=1&fsIsOuter=1 parameters add a close button and open the form in a popup iframe.

Open Form





window.ACNavigator.showIframe('https://app.waypointconverts.com/pro-form?proFormId=f711d6db-826f-4385-85be-6a70f5dbd203' + '&showClose=1&fsIsOuter=1')

Iframe Responsive Sizing

Sets iframe max-width based on viewport: 50vw on large desktop, 70vw on desktop, 90vw on tablet/mobile. Optional 8px rounded corners.
const iframe = window.parent.document.querySelector("iframe.tour-iframe-7010");

function setIframeWidth() {
  const screenWidth = window.parent.innerWidth;
  // Large Desktop
  if (screenWidth > 1200) {
    iframe.style.maxWidth = "50vw";
    // Desktop
  } else if (screenWidth > 768) {
    iframe.style.maxWidth = "70vw";
    // Tablet
  } else if (screenWidth > 480) {
    iframe.style.maxWidth = "90vw";
    // Mobile
  } else {
    iframe.style.width = "90vw";
  }
}

// Rounded edges (set to 0px to disable):
iframe.style.borderRadius = "8px";

setIframeWidth();
window.parent.addEventListener("resize", setIframeWidth);

Iframe with v1 Value

Liberty Iframe (Khadijia)

Iframe in a ProForm

Iframe Only

Iframe — Full Width (No Border)

In Classes, use .container-fluid. Borderless iframe.

Iframe — PDF Link Version

Iframe — Centered

Videos

Loom Video — Responsive 16:9

YouTube Embed

Vimeo Embed

Success Page with Video

A member of our team will get back to you soon.






  Learn More
  Schedule a Center Visit

Video + Buttons (Brad)

Three Loom video variants and an MP4 variant.

Success Page — Background + Centered Video

Centered video wrapper at 80% width, with buttons styled in deep navy and burgundy border.
Good luck with the raffle!


Want to learn more about Waypoint Converts? Watch this short video.




  







  Download a Brochure
  Schedule a Tour
  Contact Us

Threshold 360 Viewer

JavaScript

Open URL — Same Tab

window.location.href = "https://g.co/kgs/EBe6heh";

Open URL — New Tab

window.open("https://g.co/kgs/EBe6heh", "_blank");

One-Click Download

window.open('https://www.charterseniorliving.com/wp-content/uploads/Empowering-Your-Retirement-web.pdf', '_blank');

// Or another PDF:
window.open('https://qckinetix.com/wp-content/uploads/2024/07/QCK_07-24_RegenerativeGuide-ContentPiece_AlbanyNY.pdf', '_blank');

Liberty Navigator JS — with v1 Lead Source ID

Used in Navigator's JavaScript Button. Replace v1 with the lead source ID and proFormId with the form ID.
// Set the v1 value
let v1 = "83189";

// Set ProFormId
let proFormId = '1672de3a-3b1c-46d2-b9a7-9640c028f434';

// Build the ProForm URL
let url = 'https://app.waypointconverts.com/pro-form?proFormId=' + proFormId + '&v1=' + v1;

// Open ProForm in popup iframe with close button
window.ACNavigator.showIframe(url + '&showClose=1&fsIsOuter=1');

Juvo Chat — Navigator JavaScript Button

open_juvo_chat()

Close Navigator Window

window.ACNavigator.close()

Mailto Link via JS

window.location.href = "mailto:[email protected]?subject=Ask%20the%20Expert%20-%20Senior%20Living%20Support";

Click to Call

window.open('tel:8556273110');

Classes & Layout

Bootstrap Column Layout

Common Bootstrap class combos. Use row d-flex justify-content-center on wrappers and col-lg-3 col-md-4 for responsive columns.
row d-flex justify-content-center

col-lg-3 col-md-4



  

    

      

        By submitting your question, you consent to receive text messages from [Company Name] at the number provided. Message and data rates may apply. Reply STOP to opt out at any time.

Items Wrapper Classes

// Items Wrapper:
row d-flex justify-content-center

// Item-level Classes:
col-8 text-center

CSS Wrapper Classes (assorted)

row d-flex justify-content-center

col-md-6 col-12

col-md-8

row

Column Grid Sizes

col-lg-3 col-md-4 col-sm-6 col-12

row d-flex justify-content-center

Iframe Full Width — Class

In Classes, set .container-fluid.
.container-fluid

Font Awesome Icons

Themed Examples

Vitality — Background + Buttons

Purple buttons (rgba(65, 23, 109, 1.0)) on a Vitality-branded background.





Want to learn more about our community?






  Download Our Brochure
  Floor Plans & Pricing
  Schedule a Tour

Brightmore East Memphis — Background + Buttons




Want to learn more about our community?






  Request Our Brochure
  View Our Floor Plans
  Schedule a Tour

Barclay Landing Page

Navy buttons (rgba(19, 44, 90, 1.0)) on a teal-bordered button row.
Want to learn more about our community?






  Request Our Brochure
  View Our Floor Plans
  Schedule a Tour

Charter — Download Brochure Block

Heading, image, paragraph, and a single download button. Includes .padding helper class.




  
Knowledge Is Comfort: A Family Caregiver's Guide to Senior Living

  
  
When it's apparent your loved one can no longer live safely alone, turn to our all-encompassing support guide.

  

    Download Your Caregivers' Guide

Seagrass — Tan Buttons

Tan/sand buttons (rgba(156, 123, 87, 1.0)) with no shadow.
Someone from our team will contact you shortly.






  View our Community Rates
  View Senior Living FAQ's

Misc

Submitted! — Confirmation Block


  
Submitted!

  
Thank you for scheduling an appointment to tour our beautiful community! A team member will reach out to you shortly to confirm the date and time of your requested visit. Should your preferred time slot conflict with a previously scheduled appointment, we will assist you in selecting an alternative option.

  
We look forward to seeing you!

  
Thank you!

Amenities Snippet — with Image


  
    Our community will offer many amenities, including full-service dining, a food bistro, arts and craft spaces, scenic walking trails, and sunken outdoor gardens.
No snippets match that search.

Turning website visitors into real conversations

Click here to convert more prospects.

©Copyright 2026. Waypoint. All Rights Reserved.