Creating a Footer Section in an Advanced PDF Template with an Email Button

A footer section in a PDF template is a great way to include interactive options, such as a button to send an email directly.

<!-- Footer Section -->
<div class="footer">
  <p>© 2025 Company Name. All rights reserved.</p>
  <a href="mailto:support@company.com" class="email-button">Email Us</a>
</div>

This example contains:

  • Copyright Information: Shows ownership of the content.
  • Email Button: Links to an email address using mailto:support@company.com.

To make the footer look more professional, you can apply the following CSS:

css

.footer {
  text-align: center;
  padding: 10px;
  background-color: #f3f3f3; /* Light gray background */
  border-top: 1px solid #ccc; /* Subtle top border */
  font-size: 12px; /* Small, clean text */
}

.email-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background-color: #007bff; /* Blue button */
  color: #fff; /* White text */
  text-decoration: none;
  border-radius: 5px; /* Rounded corners */
  font-weight: bold;
}

.email-button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

When designing a PDF template (e.g., using FreeMarker or another templating tool), you can use mailto: to enable the button. Here’s how:

Use the <a> tag with the href attribute set to mailto:.

Example:

<a href="mailto:support@company.com" class="email-button">Email Us</a>
  1. When users click this button in the PDF, their default email application will open with a new email draft addressed to support@company.com.
  2. Optional: Add pre-filled subject and body text.
<a href="mailto:support@company.com?subject=Support%20Request&body=Hello,%20I%20need%20help%20with..." class="email-button">
  Email Us
</a>
  • ?subject=: Sets the email subject.
  • &body=: Pre-fills the email body.

  1. User-Friendly: Makes it easy for readers to contact you directly from the PDF.
  2. Interactive: Enhances the functionality of static PDFs.
  3. Customizable: Add pre-defined text for better communication.

By incorporating an email button into the footer of your PDF templates, you make your documents not only visually appealing but also functional and interactive. This small feature can leave a lasting impression on users while simplifying communication.

Leave a comment

Your email address will not be published. Required fields are marked *