AMP Styles
Please Note: The Step 2 form will not load unless you fill out Step 1.
Step 1
Contact Snippet
Replace this FRS AMP Phone in Contact Snippet
<span data-frs="call-lead" data-delimiter=".">{{phone}}</span>
With this:
<span data-ion="phone" data-link="1" data-delimiter="." data-name="slug-name">{{phone}}</span>
OR replace the entire Contact Snippet
{% case this.params.type %}
{% when 'address' %}
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span class="street-address" itemprop="streetAddress">123 Main St</span>
<span class="locality" itemprop="addressLocality">Anywhere</span>, <span class="region" itemprop="addressRegion">FL</span> <span class="postal-code" itemprop="postalCode">12345</span>
</address>
{% when 'phone' %}
{% assign phone = '123.456.7890' %}
{% if this.params.amp != true %}
<a href="tel:+1{{phone | replace: '.','-'}}" class="tel" itemprop="telephone">{{phone}}</a>
{% else %}
<span data-ion="amp" data-mode="calls" data-link="1" data-delimiter="." data-name="slug-name">{{phone}}</span>
{% endif %}
{% when 'email' %}
<a href="mailto:info@sampleaddress.com" class="email">info@sampleaddress.com</a>
{% when 'fax' %}
123.456.7890
{% else %}
Please select type: address, phone, email, or fax
{% endcase %}
Step 1 HTML
<div class="amp">
<div class="amp__lead">GET YOUR FREE RENTAL PRICE ANALYSIS</div>
<p class="amp__sub">
Call us today at {% snippet name='contact' type='phone' amp='true' %} or enter your address below.
</p>
<div class="amp__form" data-ion="amp" data-name="slug-name" data-step="1" data-success-url="/services-step-2" data-placeholder="Enter your property address here*"></div>
</div>
Add this script to the bottom of the page
On newer sites, for the services pages, you may add the script to the footer snippet in the "AMP FOOTER GOES HERE" section at the bottom so it only loads on templates that have the footer snippet set to amp='true'.
Please note: if you add it to the script to the footer, you will need to remove it from the bottom of the /services-step-2 page. The form will not load if you have the script on there twice.
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOwigZ96jQoEOmJz_soxC-FuThsWo71KA&sensor=false&libraries=places&callback=ION_initGoogleMaps"></script>
Step 1 CSS
/* AMP Step 1
============================================================================= */
.amp { text-align: center; }
.amp a { color: inherit; }
.amp a:hover { color: var(--primary); }
.amp__lead { font-size: 42px; line-height: 1.2; margin-top: 15px; }
.amp__sub { font-size: 24px; font-family: var(--secondary-font); line-height: 1.2; }
.amp__form { max-width: 800px; margin: 0 auto; min-height: 50px; }
.amp__form .ion-amp-form .ion-form-group { margin: 0; flex: 1 1 auto; }
.amp__form .ion-amp-form label { display: none; }
.amp__form .ion-amp-form input { border: 0; height: 50px; padding: 0 15px; border-radius: 0!important; border: 0!important; }
.amp__form .ion-amp-form button { background: var(--primary); border: 1px solid var(--primary); font-weight: bold; white-space: nowrap; opacity: 1!important; text-transform: uppercase; flex: 0 1 150px; }
.amp__form .ion-amp-form button:hover { background: #fff; color: var(--primary); }
@media(min-width:601px){
.amp__form .ion-amp-form { display: flex; justify-content:center; align-items:center; }
.amp__form .ion-amp-form button {margin-left:15px;}
}
@media (max-width: 600px){
.amp__lead { font-size: 34px; }
.amp__sub { font-size: 20px; }
.amp__form .ion-amp-form { flex-wrap: wrap; }
.amp__form .ion-amp-form button { width: 100%; }
}
Step 2
Step 2 HTML
<html>
<head>
<title>Property Management Services</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body class="no-hero">
<section class="amp-step-2">
<div class="amp-step-2__header">
<h1>Almost There!</h1>
<p>
We just need a few more details about
<u class="ion-amp-lead-address">your property address here</u>
and your FREE REPORT will be emailed to you within minutes.
</p>
<div class="amp-step-2__header-img animated fadeInUp">
<img class="lazyload amp-step-2__report" data-src="https://resources.nesthub.com/images/amp-step-2-report.png" alt="report example">
<img class="lazyload amp-step-2__logo" data-src="/images/logo.png" alt="{% snippet name='company-name' %} Logo">
</div>
</div>
<div class="amp-step-2__form">
<div data-ion="amp" data-name="slug-name" data-step="2" data-success-url="/amp-success"></div>
</div>
<div class="amp-step-2__footer">
<h2>What Do I Get Out Of This?</h2>
<div class="row justify-content-center">
<div class="col-lg-5 pr-lg-5 pb-5">
<div class="amp-step-2__icon amp-step-2__icon--email">
<!-- <img class="lazyload" data-src="https://resources.nesthub.com/images/amp-email-icon.png" alt="email icon"> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 57.29"><path d="M41,39.13A5.45,5.45,0,0,1,37.67,38L10.73,16.64A1,1,0,0,1,12,15.07L38.91,36.43a3.44,3.44,0,0,0,4.18,0L70,15.34a1,1,0,0,1,1.41.17,1,1,0,0,1-.17,1.4L44.33,38A5.45,5.45,0,0,1,41,39.13Z"/><path d="M1,13a1,1,0,0,1-1-1A12,12,0,0,1,12,0h19.1a1,1,0,1,1,0,2H12A10,10,0,0,0,2,12,1,1,0,0,1,1,13Z"/><path d="M70,57.29H37a1,1,0,0,1,0-2H70a10,10,0,0,0,10-10,1,1,0,0,1,2,0A12,12,0,0,1,70,57.29Z"/><path d="M69.07,52H12.93a7.63,7.63,0,0,1-7.62-7.63V12.93a7.63,7.63,0,0,1,7.62-7.62H69.07a7.63,7.63,0,0,1,7.62,7.62V44.35A7.63,7.63,0,0,1,69.07,52ZM12.93,7.31a5.62,5.62,0,0,0-5.62,5.62V44.35A5.63,5.63,0,0,0,12.93,50H69.07a5.63,5.63,0,0,0,5.62-5.63V12.93a5.62,5.62,0,0,0-5.62-5.62Z"/><path d="M11.57,42.43a1,1,0,0,1-.78-.37,1,1,0,0,1,.15-1.41l15.9-12.8a1,1,0,0,1,1.41.16,1,1,0,0,1-.16,1.4l-15.9,12.8A1,1,0,0,1,11.57,42.43Z"/><path d="M70.43,42.43a1,1,0,0,1-.62-.22L54,29.47a1,1,0,1,1,1.26-1.56L71.06,40.65a1,1,0,0,1,.15,1.41A1,1,0,0,1,70.43,42.43Z"/><path d="M50.14,2h-.87a1,1,0,0,1,0-2h.87a1,1,0,0,1,0,2ZM44.07,2H43.2a1,1,0,0,1,0-2h.87a1,1,0,0,1,0,2ZM38,2h-.87a1,1,0,0,1,0-2H38a1,1,0,0,1,0,2ZM31.93,2h-.87a1,1,0,0,1,0-2h.87a1,1,0,0,1,0,2Z"/><path d="M37,57.29h-.87a1,1,0,0,1,0-2H37a1,1,0,0,1,0,2Zm-6.07,0H30a1,1,0,0,1,0-2h.87a1,1,0,1,1,0,2Zm-6.07,0H24a1,1,0,1,1,0-2h.87a1,1,0,0,1,0,2Zm-6.07,0H18a1,1,0,1,1,0-2h.79a1,1,0,1,1,0,2Z"/></svg>
</div>
<p>
Shortly after submitting your information, you'll receive a personalized property analysis report evaluating your
home with a suggested rent range and market data.
</p>
</div>
<div class="col-lg-7 pl-lg-5 pb-5">
<div class="amp-step-2__icon amp-step-2__icon--support">
<!-- <img class="lazyload" data-src="https://resources.nesthub.com/images/amp-support-icon.png" alt="support icon"> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.92 82"><path d="M14.55,39.66a1,1,0,0,1-.9-.55,26.54,26.54,0,0,1-1.85-4.83,1,1,0,1,1,1.93-.53,24,24,0,0,0,1.71,4.46A1,1,0,0,1,15,39.55,1.06,1.06,0,0,1,14.55,39.66Z"/><path d="M27,49.41a11.67,11.67,0,0,1-6.78-2.33,1,1,0,0,1-.24-1.4,1,1,0,0,1,1.39-.23,9.71,9.71,0,0,0,5.63,2c6.14,0,11.39-7,13.21-13.58a1,1,0,0,1,1.92.54C40,41.84,34.17,49.41,27,49.41Z"/><path d="M13.08,82a1,1,0,0,1-1-1V70.76a1,1,0,0,1,2,0V81A1,1,0,0,1,13.08,82Z"/><path d="M48.65,82H5.27A5.27,5.27,0,0,1,0,76.73v-.59C0,63.57,5.7,57,19.05,54.19a1,1,0,0,1,.78.16L27,59.3l7.13-4.95a1,1,0,0,1,.77-.16c13.36,2.81,19.06,9.38,19.06,22v.59A5.27,5.27,0,0,1,48.65,82ZM19.05,56.24C7,58.89,2,64.68,2,76.14v.59A3.26,3.26,0,0,0,5.27,80H48.65a3.27,3.27,0,0,0,3.27-3.27v-.59c0-11.46-5-17.25-17.05-19.9l-7.34,5.1a1,1,0,0,1-1.14,0Z"/><path d="M40.83,82a1,1,0,0,1-1-1V70.76a1,1,0,0,1,2,0V81A1,1,0,0,1,40.83,82Z"/><path d="M19.26,56.17a1,1,0,0,1-.77-.36,1,1,0,0,1,.13-1.41c1.07-.89,1.56-5.07,1.56-7.76a1,1,0,0,1,2,0c0,1.24-.11,7.5-2.28,9.3A1,1,0,0,1,19.26,56.17Z"/><path d="M34.66,56.17a1,1,0,0,1-.64-.23c-2.17-1.8-2.28-8.06-2.28-9.3a1,1,0,0,1,2,0c0,2.69.49,6.87,1.56,7.76a1,1,0,0,1,.13,1.41A1,1,0,0,1,34.66,56.17Z"/><path d="M41.33,35.13A1.77,1.77,0,0,1,39.6,33.8c-.83-3-1.94-9-2-9.22,0,0,0-.09,0-.13,0-.25-.3-.31-.45-.32-4.48-.05-9.24-2.41-10.57-3.12L28.5,26.2a1,1,0,0,1-1.4,1.23l-9.17-4.84a1.18,1.18,0,0,0-1.23.08l-2.37,11A1.73,1.73,0,0,1,12.54,35a1.77,1.77,0,0,1-1.73-1.41c-2.36-10.84-1.91-17.82,1.43-22,2.67-3.31,7-4.87,14.15-5a3.13,3.13,0,0,1,.53,0,3.13,3.13,0,0,1,.53,0c7.13.12,11.53,1.69,14.21,5,3.36,4.16,3.81,11.16,1.44,22a1.78,1.78,0,0,1-1.71,1.42ZM39.59,24.27c.11.58,1,5.26,1.73,8.2,2-9.74,1.65-16-1.22-19.52-2.33-2.9-6.41-4.22-13.18-4.27S16.12,10,13.8,12.92c-2.84,3.53-3.24,9.7-1.22,19.38l2.23-10.36a1,1,0,0,1,.23-.45,3.17,3.17,0,0,1,3.82-.67l6.85,3.62-1.14-3.07,0-.13A1.87,1.87,0,0,1,25,19.53,2,2,0,0,1,26.91,19a1,1,0,0,1,.3.11c.05,0,5.32,3,9.95,3.05A2.39,2.39,0,0,1,39.59,24.27Z"/><path d="M8.94,39.22A4,4,0,0,1,5.06,36.1l-2-8.94a4,4,0,0,1,7.77-1.72l2,8.94a4,4,0,0,1-3,4.74h0A3.67,3.67,0,0,1,8.94,39.22Zm.64-1.07h0ZM7,24.32a2,2,0,0,0-.42.05A2,2,0,0,0,5,26.73l2,8.94a2,2,0,0,0,2.36,1.5h0a2,2,0,0,0,1.5-2.36l-2-8.94A2,2,0,0,0,7,24.32Z"/><path d="M6.13,37.22H6l-2.76-.45a2.28,2.28,0,0,1-2-1.69L.05,29.71a2.27,2.27,0,0,1,1.09-2.37l2.3-1.54a1,1,0,1,1,1.11,1.66L2.24,29c-.18.12-.24.24-.24.27l1.19,5.36a.47.47,0,0,0,.32.14l2.78.45a1,1,0,0,1-.16,2Z"/><path d="M45,39.22a3.61,3.61,0,0,1-.86-.1h0a4,4,0,0,1-3-4.74l2-8.94a4,4,0,0,1,1.75-2.5,3.91,3.91,0,0,1,3-.52,4,4,0,0,1,3,4.74l-2,8.94A4,4,0,0,1,45,39.22Zm-.43-2a2,2,0,0,0,2.36-1.5l2-8.94a2,2,0,0,0-1.5-2.36A2,2,0,0,0,45,25.87l-2,8.94a2,2,0,0,0,1.5,2.36Z"/><path d="M47.79,37.22a1,1,0,0,1-.16-2l2.76-.45c.24,0,.33-.12.34-.14l1.19-5.37s-.05-.14-.24-.26l-2.31-1.55a1,1,0,1,1,1.11-1.66l2.31,1.54a2.28,2.28,0,0,1,1.08,2.37l-1.19,5.36a2.29,2.29,0,0,1-2,1.69L48,37.21Z"/><path d="M3.79,27.77a1,1,0,0,1-1-.9,24.29,24.29,0,1,1,48.45-2.58,24.49,24.49,0,0,1-.13,2.58,1,1,0,0,1-2-.21,23.36,23.36,0,0,0,.12-2.37,22.3,22.3,0,0,0-44.59,0,23.21,23.21,0,0,0,.13,2.37,1,1,0,0,1-.89,1.1Z"/><path d="M16.87,43.94a8.36,8.36,0,0,1-6.7-3.35L8.79,38.75a1,1,0,1,1,1.59-1.21l1.39,1.84A6.37,6.37,0,0,0,18,41.83l5.06-.91a1,1,0,1,1,.35,2l-5.06.91A8.57,8.57,0,0,1,16.87,43.94Z"/><path d="M24.71,44.55a2.38,2.38,0,0,1-2.36-2l-.19-1.22a2.39,2.39,0,0,1,2-2.72L27,38.15a2.36,2.36,0,0,1,1.78.43,2.4,2.4,0,0,1,.95,1.57l.18,1.22a2.33,2.33,0,0,1-.43,1.77,2.37,2.37,0,0,1-1.57,1l-2.8.43Zm2.62-4.43h-.06l-2.8.43a.4.4,0,0,0-.33.45l.19,1.22a.4.4,0,0,0,.15.26.49.49,0,0,0,.29.07l2.81-.43h0a.45.45,0,0,0,.26-.16.42.42,0,0,0,.07-.29l-.19-1.22a.4.4,0,0,0-.16-.26A.39.39,0,0,0,27.33,40.12Z"/></svg>
</div>
<p>
Your property's location, condition and amenities will determine the actual rental value of your home. In order
to get the most accurate value possible, please speak with one of our market analysis experts by calling
<span class="amp-step-2__phone" data-ion="amp" data-mode="calls" data-link="1" data-delimiter="." data-name="slug-name"></span>.
</p>
</div>
</div>
<a href="/{% snippet name='market-1' toUrl='true' %}-property-management#contact" class="btn">Contact Us</a>
</div>
</section>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOwigZ96jQoEOmJz_soxC-FuThsWo71KA&sensor=false&libraries=places&callback=ION_initGoogleMaps"></script>
</body>
</html>
Step 2 CSS
You can keep the default colors or hide the variables to match the site's colors (on newer sites)
/* Set Design Standards & Colors Here */
.amp-step-2, .amp {
--primary: #0b2c75;
--secondary: #f4ac00;
--dark: #0b2c75;
--light: #51b4cf;
--gray: #f3f3f3;
--body-text: #000;
--primary-font: 'darkmode-off', sans-serif;
--secondary-font: 'depot-new-web', sans-serif;
--header-height: 149px;
}
body.no-hero main { margin-top: var(--header-height); }
body.no-hero #secondary-banner { display: none; }
body.no-hero .body-container { width: 100%; max-width: 100%; padding: 0; }
.amp-step-2 { text-align: center; font-family: var(--primary-font); letter-spacing: .05em; }
.amp-step-2__header { position: relative; padding: 90px 15px 0; background: var(--dark); color: #fff; font-weight: 500; letter-spacing: .05em; }
.amp-step-2__header h1 { font-size: 70px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: inherit; margin: 0 0 20px; }
.amp-step-2__header p { font-size: 22px; color: inherit; width: 800px; max-width: 100%; margin: 0 auto 70px; }
.amp-step-2__header-img { position: relative; max-width: 90%; margin: 0 auto; display: inline-block; }
.amp-step-2__logo { position: absolute; top: 200px; left: 50px; transform: rotate(-25.84deg); height: 40px; transform-origin: left; }
@media (max-width: 850px) {
.amp-step-2__logo { height: 4.5vw; top: 22vw; left: 6.5vw; }
}
.amp-step-2__form { position: relative; background: #fff; padding: 50px 55px; border-radius: 20px; width: 1072px; max-width: 95vw; margin: 0 auto; letter-spacing: .05em; box-shadow: 0px 6px 43px 0px rgba(0, 0, 0, 0.17); transform: translateY(-20px); z-index: 2; }
.amp-step-2__form .ion-form-group-break h3 { font-size: 22px; text-transform: uppercase; font-weight: 500; letter-spacing: .05em; margin: 40px 0 20px; }
.amp-step-2__form .ion-form-group-break:first-of-type h3 { margin-top: 0; }
.amp-step-2__form .ion-form .ion-form-group label { font-size: 20px; letter-spacing: .05em; font-weight: 400; font-family: var(--secondary-font); margin: 0 12px 12px; }
.amp-step-2__form input, .amp-step-2__form select, .amp-step-2__form textarea { background: var(--gray)!important; border: 0!important; border-radius: 0!important; height: 54px!important; padding: 12px!important; font-size: 20px; font-family: var(--secondary-font); }
.amp-step-2__form textarea { height: 4em!important; }
.amp-step-2__form .ion-btn { font-size: 0; color: #fff; background-color: var(--secondary); border-color: var(--secondary); height: 47px; line-height: 47px; padding: 0 20px; text-transform: uppercase; font-weight: 500; border-radius: 10px; width: 270px; letter-spacing: .05em; margin: 58px 10px 10px auto; }
.amp-step-2__form .ion-btn::after { content: 'send my free report!'; font-size: 18px; }
.amp-step-2__form .ion-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.amp-step-2__footer { font-size: 18px; padding: 50px 15px 70px; width: 1072px; max-width: 95vw; margin: 0 auto; line-height: 1.66em; }
.amp-step-2__footer h2 { font-size: 60px; font-family: var(--secondary-font); font-weight: 500; letter-spacing: .05em; margin: 0 0 45px; }
.amp-step-2__footer .amp-step-2__icon { background: var(--gray); height: 90px; width: 90px; border-radius: 50%; margin: 0 auto 15px; display: flex; justify-content: center; align-items: center; }
.amp-step-2__footer .amp-step-2__phone { font-size: 22px; color: var(--body-text); white-space: nowrap; }
.amp-step-2__footer .amp-step-2__phone a { color: var(--body-text); }
.amp-step-2__footer .amp-step-2__phone a:hover { color: var(--primary); }
.amp-step-2__icon { fill: var(--light); }
.amp-step-2__icon--email svg { margin-left: -25px; height: 59px; }
.amp-step-2__icon--support svg { margin-top: -25px; height: 83px; }
.amp-step-2__footer .btn { height: 47px; line-height: 47px; border-radius: 10px; }
@media (min-width: 600px) {
.amp-step-2__form form { display: flex; flex-wrap: wrap; margin: -10px; }
.amp-step-2__form .ion-form-group { flex: 1 1 190px; padding: 10px; margin: 0; }
.amp-step-2__form .ion-form-group:nth-child(4), .amp-step-2__form .ion-form-group:nth-child(8), .amp-step-2__form .ion-form-group:nth-child(12) { flex: 2 1 339px; }
.amp-step-2__form .ion-form-group:nth-child(10) { flex: 1 1 100%; }
.amp-step-2__form .ion-form-group:last-of-type { flex-grow: 0; }
.amp-step-2__form .ion-form-group-break, .amp-step-2__form .ion-form-group-textarea { flex: 1 1 100%; }
}
@media (min-width: 600px) and (max-width: 1051px){
.amp-step-2__form .ion-btn { margin-left: 10px; }
}
@media (max-width: 500px) {
.amp-step-2__header h1 { font-size: 40px; }
.amp-step-2__form { padding: 50px 25px; }
.amp-step-2__footer h2 { font-size: 36px; }
}