You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
12 KiB
HTML
219 lines
12 KiB
HTML
// headeralt true
|
|
<!DOCTYPE HTML>
|
|
<html>
|
|
{{> head}}
|
|
<body class="is-preload">
|
|
|
|
<div id="page-wrapper">
|
|
|
|
{{> header}}
|
|
{{> nav}}
|
|
|
|
<!-- Banner -->
|
|
<section id="banner">
|
|
<div class="inner">
|
|
<p>Send Certified Mail from home in minutes with just a printer.<br>No envelopes, forms, labels, stamps, waiting in line, or account required!</p>
|
|
<ul class="actions special">
|
|
<li><a href="#info" class="button large primary scrolly">How it Works</a></li>
|
|
<li><a href="#label" class="button large primary scrolly">Get Started</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- One -->
|
|
<!--<section id="one" class="wrapper style2">
|
|
<div class="inner">
|
|
<section class="spotlights">
|
|
<article>
|
|
<header class="major">
|
|
<p>Magna</p>
|
|
<h2>Dolor sit amet vivamus</h2>
|
|
</header>
|
|
<p>Phasellus in ante vitae nibh porttitor tempus vitae ut ante. Vestibulum blandit ex a elementum viverra. Sed quat diam, aliquet tempus felis nisl at lacus.</p>
|
|
<ul class="actions">
|
|
<li><a href="#" class="button">More</a></li>
|
|
</ul>
|
|
</article>
|
|
<article>
|
|
<header class="major">
|
|
<p>Lorem</p>
|
|
<h2>Ipsum dolor sit amet</h2>
|
|
</header>
|
|
<p>Phasellus in ante vitae nibh porttitor tempus vitae ut ante. Vestibulum blandit ex a elementum viverra. Sed quat diam, aliquet tempus felis nisl at lacus.</p>
|
|
<ul class="actions">
|
|
<li><a href="#" class="button">More</a></li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</section>-->
|
|
|
|
<!-- Two -->
|
|
<section id="info" class="wrapper style2 special">
|
|
<div class="inner">
|
|
<header class="major" style="text-align: left;">
|
|
<h2>How it Works</h2>
|
|
</header>
|
|
<ul class="features">
|
|
<li>
|
|
<span class="icon major regular fa-edit"></span>
|
|
<h4>Add Info</h4>
|
|
<p>Tell us where your letter is going and your return address.</p>
|
|
</li>
|
|
<li>
|
|
<span class="icon major regular fa-credit-card"></span>
|
|
<h4>Pay</h4>
|
|
<p>We'll charge your card for the price of postage plus a $1 service fee.</p>
|
|
</li>
|
|
<li>
|
|
<span class="icon major regular fa-print"></span>
|
|
<h4>Print and Fold</h4>
|
|
<p>Print the PDF we give you, fold it around your letter, and tape the edges to make a postage-paid envelope.</p>
|
|
</li>
|
|
<li>
|
|
<span class="icon major regular fa-mailbox"></span>
|
|
<h4>Send</h4>
|
|
<p>Put your letter in your mailbox like any other outgoing mail; it'll be picked up by your mail carrier.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Three -->
|
|
<section id="label" class="wrapper style1">
|
|
<div class="inner">
|
|
<header class="major">
|
|
<p id="header-small-text">Get Started</p>
|
|
<h2 id="header-big-text">Send a Certified Mail letter</h2>
|
|
</header>
|
|
|
|
<form id="addressform">
|
|
<h3>To:</h3>
|
|
<input type="text" name="to_name" placeholder="Recipient Name" />
|
|
<input type="text" name="to_company" placeholder="Company Name" />
|
|
<input type="text" name="to_street" placeholder="456 Destination Street" required />
|
|
<input type="text" name="to_street2" placeholder="Second Line of Address (optional)" />
|
|
<input type="text" name="to_city" placeholder="City" />
|
|
<select name="to_state">
|
|
<option value="">State</option>
|
|
{{> statelist}}
|
|
</select>
|
|
<input type="text" name="to_zip" placeholder="ZIP Code" />
|
|
|
|
<br />
|
|
<h3>From:</h3>
|
|
<input type="text" name="from_name" placeholder="Your Name" required />
|
|
<input type="text" name="from_street" placeholder="1234 Your Street" required />
|
|
<input type="text" name="from_street2" placeholder="Second Line" />
|
|
<input type="text" name="from_city" placeholder="Your City" />
|
|
<select name="from_state">
|
|
<option value="">Your State</option>
|
|
{{> statelist}}
|
|
</select>
|
|
<input type="text" name="from_zip" placeholder="Your ZIP Code" required />
|
|
|
|
<br />
|
|
<h3>Options:</h3>
|
|
<div class="row gtr-uniform">
|
|
<div class="col-4 col-12-small">
|
|
<input id="postagetype_certified" type="radio" name="postagetype" value="certified" checked="" />
|
|
<label for="postagetype_certified"><b>Certified Mail</b>
|
|
<br />
|
|
Trackable via USPS.com to follow its progress and see the
|
|
date and time of delivery. The recipient will need to sign for
|
|
it or pick it up from their local post office.
|
|
</label>
|
|
</div>
|
|
<div class="col-4 col-12-small">
|
|
<input id="postagetype_certified_receipt" type="radio" name="postagetype" value="certified_receipt" />
|
|
<label for="postagetype_certified_receipt"><b>Certified Mail + Electronic Return Receipt</b>
|
|
<br />
|
|
With this extra service, after the letter is delivered,
|
|
you can visit USPS.com and use the tracking code to have the
|
|
return receipt, including date, time, and a copy of the signature,
|
|
emailed to you.
|
|
</label>
|
|
</div>
|
|
<div class="col-4 col-12-small">
|
|
<input id="postagetype_first" type="radio" name="postagetype" value="first" />
|
|
<label for="postagetype_first"><b>First Class letter</b>
|
|
<br />
|
|
Make a regular First Class envelope with no tracking, signatures,
|
|
or special features. Must weigh no more than 3.5 ounces and be at most 1/4
|
|
inch thick. If the contents aren't flexible, it must weigh no more
|
|
than 3 ounces.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
<div id="addresserror"></div>
|
|
<br />
|
|
<ul class="actions">
|
|
<li><a id="getRateAndValidateAddressButton" class="button large primary"><i class="far fa-chevron-right"></i> Next</a></li>
|
|
</ul>
|
|
</form>
|
|
|
|
<div id="paymentform" style="display: none;">
|
|
<div class="row gtr-uniform">
|
|
<div class="col-4 col-12-xsmall">
|
|
<i class="far fa-share"></i> To:
|
|
<br />
|
|
<span id="toaddr"></span>
|
|
</div>
|
|
<div class="col-4 col-12-xsmall">
|
|
From:
|
|
<br />
|
|
<span id="fromaddr"></span>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<h3>Total: <span id="paymentamount"></span></h3>
|
|
<div id="card-element" style="width: 500px; max-width: 100%; background-color: white; padding: 1em; border-radius: 4px;"></div>
|
|
|
|
<br />
|
|
<div id="paymenterror"></div>
|
|
<br />
|
|
|
|
<ul class="actions">
|
|
<li><a id="cancelPaymentButton" class="button large"><i class="far fa-chevron-left"></i> Edit Address</a></li>
|
|
<li><a id="submitPaymentButton" class="button large primary"><i class="far fa-chevron-right"></i> Purchase</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="printform" style="display: none;">
|
|
<p>
|
|
You're all set! Print the PDF below on a sheet of 8.5x11 letter-sized paper.
|
|
Make sure your printer is set to print at 100% or actual size and not shrink to fit.
|
|
Then just fold on the dashed lines, put your letter inside, tape the edges,
|
|
and tape the flap to seal. Put the letter in your mailbox with the signal flag up,
|
|
or slide it into your cluster mailbox's outgoing mail slot.
|
|
</p>
|
|
<p id="trackingnumberparagraph">Tracking Number: <a target="_BLANK" id="trackingnumber"></a>
|
|
<br>You should write this number down or bookmark the tracking link,
|
|
we won't show it again after you leave the page.</p>
|
|
<p><i class="fal fa-badge-sheriff"></i> Warning: Do not print and mail
|
|
multiple copies of the same PDF.
|
|
It's fraud, forgery, theft, and a violation of multiple federal laws,
|
|
such as 18 U.S. Code § 501, 1001, 1341, 1720, 1725, and 3802.
|
|
If two letters with the same barcode are detected by the mail sorting system,
|
|
they will be automatically reported to USPIS, the federal postal police.
|
|
If your PDF doesn't print correctly, first cancel the misprinted postage by drawing
|
|
an X through all the barcodes or destroying the paper, then try printing again.
|
|
</p>
|
|
<br />
|
|
<ul class="actions">
|
|
<li><a id="printButton" class="button large primary icon regular fa-print">Print</a></li>
|
|
<li><a id="startOverButton" class="button large icon regular fa-redo">Send Another Letter</a></li>
|
|
</ul>
|
|
<iframe style="width: 100%; height: 1200px; max-height:80vh;" src="about:blank" id="pdfframe"></iframe>
|
|
<a id="pdfbackuplink">Can't see the file and/or print it? Click here.</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{> footer}}
|
|
</div>
|
|
{{> scripts}}
|
|
</body>
|
|
</html> |