Half-Sheet Registration Card

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.cell_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>


S
Sean is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.