In this article, I will look at creating 2 templates for 2 pages so that the pages have all styles removed to be embedded in a remote iframe. However, you can use custom templates for anything from modifying full-page layouts to individual regions.
Related: To read how to enable embedding of a page in a remote site you can read Allow Embedding of Content in a Cross-Origin iframe.
The pages I will modify are a contact form and a page, of content type basic page, that is being used as the contact form submit success thank you page. I will be overriding the HTML template and also the page template. We will look at the possible override suggestions for doing so as printed in the HTML when you have twig debug enabled.
<!-- FILE NAME SUGGESTIONS:
* page--node--21.html.twig
* page--node--%.html.twig
* page--node.html.twig
x page.html.twig
-->To learn how to enable Twig debug you can read the linked quck guide.
It is also possible to create your own override suggestions, I will cover this in an upcoming article but for now, let's continue with what you get out of the box.
Usually, you won't need to override the HTML template but since I want to remove the background styles from the pages to fit into another site I will add an id to the template to do this. With that said, let's get started.
Overriding a contact form
As stated we will create two new templates for the contact form, the contact form I want to override is called product enquiry and lives at the URL /contact/product_enquiry.
When looking at the options to override the templates in the page source you will see 3 options. If you don't see the options then you need to enable Twig Debug. The options are listed with the most specific at the top and the current theme template is marked with an X. It also shows you what theme the template is being served from in the BEGIN OUTPUT line.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'html' -->
<!-- FILE NAME SUGGESTIONS:
* html--contact--product_enquiry.html.twig
* html--contact.html.twig
x html.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/dkcom/templates/html.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
* page--contact--product_enquiry.html.twig
* page--contact.html.twig
x page.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/dkcom/templates/page.html.twig' —>Since we want to override just one page we need to use the most specific one. In this case, it is html--contact--product_enquiry.html.twig.
Depending on your custom theme, in my case I am using a custom theme called dkcom, you either need to look in the theme directory for html.html.twig template or if your theme doesn't have the html.html.twig you need to look at the parent theme or even the system theme. This will be printed in the BEGIN OUTPUT from 'themes/custom/dkcom/templates/page.html.twig'line.
Once you have the html.html.twig you need to copy it into the theme directory and rename it to the file name suggestion you want to override.
Modify the HTML template
In my case, since I want to override the HTML style, I will add an id on the HTML element so I can then modify the CSS.
<!DOCTYPE html>
- <html{{ html_attributes }} >
+ <html{{ html_attributes }} id="remote">
<head>Once you have done that, upload it to your site and flush the theme registry. Check the source and you will see the id attribute added to the HTML element.
Next, we will do the same with the page template
Since I don't need anything except the form elements I will also override the page--contact.html.twig the same way. I will copy the current active template marked with an X and name it to page--contact--product_enquiry.html.twig.
Once I have copied the contact page I will strip everything out except the highlight region and the content region, upload the template and flush the theme registry.
<div>
{{ page.highlighted }}
<div class="layout-content">
<!-- Yay Page Content is below <br> -->
{{ page.content }}
</div>{# /.layout-content #}
</div>
Now I will add some basic CSS overrides to remove background colour, padding, and margins. You can obviously modify to your heart's content but for now, this is all I need as the host site is a basic design at present. Now when you visit the product enquiry form it is just a form on a nice white canvas, perfect. Next up we will modify the thank page.
Modify a Basic Page
The process for this is the same, in fact, the HTML and page templates I have for the product enquiry form are perfect so we just need to copy these and rename them. For any content type, the naming convention is shown below.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'html' -->
<!--FILE NAME SUGGESTIONS:
* html--node--21.html.twig
* html--node--%.html.twig
* html--node.html.twig
x html.html.twig
-->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!--FILE NAME SUGGESTIONS:
FILE NAME SUGGESTIONS:
* page--node--21.html.twig
* page--node--%.html.twig
* page--node.html.twig
x page.html.twig
-->You can see that for content types we use the node ID to override the single page and not the pretty URL. In my case, the thank you page is node/23 so my resulting override template will be.
html--node--97.html.twig
page--node--97.html.twigIf you are not using re-write on your URLs then obviously the template name will be built from the URL. However, if you are not using pathauto to create auto-alias' and redirects I suggest you do. I have written about that in my must-have SEO modules for Drupal page.
That's about it for this article. What we have learnt is how to find the correct template to use and how for contact forms the template names are built from the URL, whereas for content types we use the node/id URL.
Hope you learnt something or this has sparked an interest in Drupal 9 for you. If so I'd be stoked if you joint my email newsletter where I cover front-end development, tech, and of course Drupal! Thanks for reading.