Using Eleventy and PHP Together

Using Eleventy to generate PHP files, enabling dynamic contact forms and server-side processing on static websites.

Contents

Introduction

Eleventy is a static site generator that outputs HTML files based on templates and layouts. By default, it lacks native support for dynamic components, such as contact forms. While third-party services often fill this gap, they can introduce data privacy concerns. If the hosting HTTP server supports PHP, Eleventy can instead be configured to output PHP files for these dynamic elements.

Outputting PHP Files

By default, Eleventy outputs static index.html files for each processed template. However, the system can be configured to generate PHP files, such as index.php, which execute as server-side PHP scripts.

The listing below shows the contents of a Markdown template named index.php (though the file could also be named index.md):"

---
permalink: "{{ page.filePathStem }}.php"
---

# Using Eleventy with PHP

<?php
echo '<p>Hello World from PHP!</p>';
?>

Without further configuration, Eleventy generates URLs ending in …/index.php instead of just …/. To create clean URLs that omit the file name, the file name can be removed within the Eleventy configuration file as follows:


// Remove "index.php" from `page.url`.
eleventyConfig.addUrlTransform((page) => {
  if (page.url.endsWith('index.php')) {
    return page.url.slice(0, -1 * 'index.php'.length);
  }
});

Basic PHP Contact Form

The listing below shows the PHP source code for a basic HTML contact form. This template is used to generate the final PHP file:

---
title: Contact Form
permalink: "{{ page.filePathStem }}.php"
---
<h1>Contact Form</h1>
<?php
$to_email = 'joe@example.org';
$errors = [];
$status_message = "";
$success = false;
if (!empty($_POST)) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
  if (empty($name)) {
    $errors[] = "Name is empty.";
  }
  if (empty($email)) {
    $errors[] = "E-mail address is empty.";
  } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = "E-mail address is invalid.";
  }
  if (empty($message)) {
    $errors[] = "Message is empty.";
  }
  if (!empty($errors)) {
    $status_message = join(" ", $errors);
  } else {
    $subject = "Contact form submission";
    $headers = [
      'From' => $email,
      'Reply-To' => $email,
      'Content-Type' => 'text/plain; charset=utf-8'
    ];
    $body_lines = [
      "Name: {$name}",
      "E-mail address: {$email}",
      "Message:",
      $message
    ];
    $body = join("\n", $body_lines);
    if (mail($to_email, $subject, $body, $headers)) {
      $status_message = "Message sent successfully.";
      $success = true;
    } else {
      $status_message = "Something went wrong. Please try again later.";
    }
  }
}
if (!$success) { ?>
<form method="post">
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" value="<?php
echo htmlspecialchars($name, ENT_HTML5 | ENT_QUOTES);
?>">
  <label for="email">E-mail address:</label>
  <input id="email" name="email" type="email" value="<?php
echo htmlspecialchars($email, ENT_HTML5 | ENT_QUOTES);
?>">
  <label for="message">Message:</label>
  <textarea id="message" name="message"><?php
echo htmlspecialchars($message, ENT_HTML5);
?></textarea>
  <input type="submit" value="Send">
</form>
<?php
}
if (!empty($status_message)) {
  echo "<p>{$status_message}</p>";
}
?>