This registration card is designed to take up half of an 8.5x11" sheet of paper.
To set up or edit printed templates, Click here: https://manage.thinkreservations.com/settings/templates
Use the below code as a starting point for a custom registration card. Basic HTML and CSS knowledge recommended.
<html>
<head>
<style>
@page {
margin: 0.25in;
}
body {
font-family: Arial;
font-size: 14px;
}
table {
font-family: Arial;
font-size: 14px;
}
div.body-inner-wrapper {
border: 1px dotted black;
}
div.header {
overflow: hidden;
border-bottom: 1px dotted black;
padding: 0 9px;
}
div.header table {
width: 100%;
font-weight: bold;
}
div.header td.left-column {
float: left;
}
div.header td.left-column div.business-name {
}
div.header td.left-column div.business-information {
font-style: italic;
font-size: 12px;
}
div.header td.right-column {
float: right;
text-align: right;
}
div.body {
}
div.body > table {
width: 100%;
}
div.body > table td{
vertical-align: top;
padding: 4px 9px;
width: 50%;
}
div.body > table td.left-column table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
div.body > table td.left-column table td {
width: 100%;
border: 1px solid black;
padding: 4px;
}
div.body > table td.left-column table td span.label {
display: block;
font-size: 12px;
}
table#reservation-information {
width: 100%;
}
table#reservation-information td.left-column {
text-align: right;
width: 113px;
max-width: 113px;
min-width: 113px;
}
#important-notice {
padding-top: 4px;
}
#important-notice-header{
font-weight: bold;
text-align: center;
}
#important-notice div.i-have-agreed {
font-size: 12px;
text-align: right;
}
div.signature {
display: table;
width: 100%;
margin-top: 9px;
}
div.signature .label {
display: table-cell;
vertical-align: top;
}
div.signature .value {
display: table-cell;
vertical-align: top;
border-bottom: 1px solid black;
width: 99%;
}
td#car-underline {
vertical-align: bottom;
}
td#car-underline span.value {
border-bottom: 1px solid black;
display: block;
}
div#policies {
font-size: 12px;
}
</style>
</head>
<body>
<div class="body-inner-wrapper">
<div class="header">
<table>
<tr>
<td class="left-column">
<div class="business-name">The Viewpoint Hotel</div>
<div class="business-information">
<span class="address">123 Main Street, Anytown, NY 12345</span>
<span class="phone">(888) 555-1212</span>
</div>
</td>
<td class="right-column">
<div class="confirmation-number">
<span class="label">Confirmation #:</span>
<span class="value">${reservation.confirmation_id}</span>
</div>
</td>
</tr>
</table>
</div>
<div class="body">
<table>
<tr>
<td class="left-column">
<div>Please Verify the Following Information:</div>
<table id="guest_information">
<tr>
<td colspan="2">
<span class="label">Guest Name(s)</span>
<span class="value">${customer.last_first_name} ${reservation.additional_guest_names}</span>
</td>
</tr>
<tr>
<td colspan="2">
<span class="label">Address:</span>
<span class="value">${customer.street_address} ${customer.extended_address}</span>
</td>
</tr>
<tr>
<td colspan="2">
<span class="value">${customer.city}, ${customer.region} ${customer.postal_code}</span>
</td>
</tr>
<tr>
<td style="width: 1%;">
<span class="label" style="padding-right: 18px;">Telephone:</span>
</td>
<td>
<div><span class="value">Home: ${customer.phone}</span></div>
<div><span class="value">Work: ${customer.work_phone}</span></div>
<div><span class="value">Cell: ${customer.cell_phone}</span></div>
</td>
</tr>
<tr>
<td colspan="2">
<span class="label">Email</span>
<span class="value">${customer.email}</span>
</td>
</tr>
<tr>
<td colspan="2">
<span class="label">Company Name:</span>
<span class="value">${customer.company}</span>
</td>
</tr>
</table>
<div id="important-notice">
<div id="important-notice-header">Important Notice to Guests - Please Read</div>
<div>We are a nonsmoking facility. If you decide to smoke indoors there will be a $200 cleaning charge</div>
<div class="signature"><span class="label">Signature:</span><span class="value"></span></div>
<div class="i-have-agreed">I have read and agree to all conditions on this card</div>
</div>
</td>
<td class="right-column">
<table id="reservation-information">
<tr>
<td class="left-column">
<span class="label">Room(s):</span>
</td>
<td>
<span class="value">${reservation.individual_rooms}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Check In:</span>
</td>
<td>
<span class="value">${reservation.check_in_date}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Check Out:</span>
</td>
<td>
<span class="value">${reservation.check_out_date}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Nights:</span>
</td>
<td>
<span class="value">${reservation.total_number_of_nights}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Subtotal:</span>
</td>
<td>
<span class="value">${reservation.subtotal}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Tax:</span>
</td>
<td>
<span class="value">${reservation.taxes}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Total:</span>
</td>
<td>
<span class="value">${reservation.total}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Total Payments:</span>
</td>
<td>
<span class="value">${reservation.paid}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Balance Due:</span>
</td>
<td>
<span class="value">${reservation.remaining_balance}</span>
</td>
</tr>
<tr>
<td class="left-column">
<span class="label">Car Information<br/>Make and Color:</span>
</td>
<td id="car-underline">
<span class="value"></span>
</td>
</tr>
</table>
<div id="policies">Inn policies and rules apply to all guests. There is no refund for early departure.</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>