Lesson 29: Add a contact page

This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. There’s no immediate plan to do a full update, but this course is now open source, so if you see an issue, please raise an issue.

Head over to the project and follow the contribution guide if you would like to help.

If you click around the site now, you’ll see that the front-end is pretty much done. Yes, we’ve still got the work pages to do, but even they look pretty darn good.

One page that is very missing, though, is the contact page. So let’s demonstrate how flexible our Eleventy site really is, and put a contact page together in under 3 minutes.

Ready. Steady. Go!

Adding the template

Create a new file in your layouts folder called page.html and add the following to it:

{% extends "layouts/base.html" %} {% set pageHeaderTitle = title %} {% set
pageCriticalStyles = ['css/page.css'] %} {% block content %}
<article>
  {% include "partials/page-header.html" %}
  <div class="panel dot-shadow bg-tertiary-glare">
    <div class="[ page-content ] [ flow wrapper ] [ flow-space-700 ]">
      {{ content | safe }}
    </div>
  </div>
</article>
{% endblock %}

Now create another file in your src folder called contact.md and add the following to it:

---
title: 'Contact us'
layout: 'layouts/page.html'
---

This is a made up agency that is being used as a context for the project that you build when you [learn Eleventy from scratch](https://learneleventyfromscratch.com), so ideally, you shouldn’t try to contact us.

You can go ahead and purchase the course to build this page—amongst [the rest of the site](/)—by visiting [Piccalilli](https://learneleventyfromscratch.com).

Now, if you go to http://localhost:8080/contact (opens new window) you’ll see that it’s good to go!

Wrapping up

Because we’ve built everything in such a modular way, adding a page that looked good was trivial. Pretty cool, right?

I’ll bring your attention back to the work section, too. Really, when you look around, it looks pretty good already, thanks to our flexible codebase. All we’re going to do in the next lesson is dot the i’s and cross the t’s.

Let’s do it.