Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

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

Solved by phi ARCHITECT View solution

Started by Deleted User 6 years ago · 3 replies · 363 views

6 years ago

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?

6 years ago Solution

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:

TWIG

{% 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.

6 years ago

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.

6 years ago

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 :) . 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:

TWIG

{% 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.

last edited 11/04/20 by phi ARCHITECT

Topic	Replies	Views	Activity
Multisite in subdirectory Support · by Thomas, 1 week ago	2	51	7 hours ago
How to listen for GET requests instead of POST requests? Support · by Anna, 2 days ago	2	58	10 hours ago
Twig not processing in 2.0.0 Support · by Justin Young, 11 hours ago	1	30	11 hours ago
Form: GRAV.Yes translation key Support · by Duc , 1 week ago	2	63	5 days ago
Installing Grav on Windows 11 Support · by Colin Hume, 1 week ago	2	55	5 days ago

Suggested topics