How do I get an H1 title to appear on my form page?

Support
1

I have a contact page called form.md.

All I want to do is add an <h1> field with the word “Contact” in it as the title.

However, no matter where I put the title, it completely breaks the layout. The <form> seems to always be completely separate from any kind of <div> or anything else I create on the page.

The form.md page seems to behave completely different from other pages on my site, which are mostly named default.md.

How do I insert a title on my form page, or place a form on another page where I have control over the layour?

2

hi @dave ~

Assuming you are using the forms plugin, copy form.html.twig in the forms plugin templates folder to the templates folder of your theme. This will override the plugin’s template.

Open the copied form template and add your h1 before the include statement:

{% extends 'partials/base.html.twig' %}

{% block content %}

    {{ content|raw }}
    <h1>Contact</h1>
    {% include "forms/form.html.twig" %}

{% endblock %}

Template overrides and inheritance are a powerful concept in Grav.

  • phi
1 Like
3

Thanks @phi !

I’m still a little confused by the exact path of file hierarchy and inheritance. Nonetheless, I followed your steps exactly, and by editing a copy of form.html.twig in my templates folder, I was able to get control of my contact page’s CSS and layout.

Your help is much appreciated.

4

Hi @dave -

I agree - it is confusing until you work with it. I don’t think there is one good reference on these topics. I’ve gained most of my knowledge through trial and error :slight_smile: . But these articles gave me some insight and direction on a strategy:

But now that you are up and running, here are a few things to consider:

  • if you are using a third party theme that you manage from GPM, you should not keep your new template here. Instead, create a child theme that inherits from your main theme and put your override template there.
  • consider giving the template a new name like form2.html.twig the extending the original with the following at the top of the file:
{% extends 'form.html.twig' %}

This will allow you to keep both options available. Just use form2.md as your content file.

The hierarchy is enabled by PHP streams which can allow many folders across plugins and themes to act like one. The default order is plugins > parent-theme > child-theme. So, child-theme should always win.

  • phi
1 Like