I use bootstrap as theme in Drupal 8, and I created a sub-theme. I want to override the contact page with a custom template.

I added debug: true in services.yml, but I didn't find the right template to recreate it in the sub-theme.

  • After you added debugging, do you now see the Twig template suggestions in web inspector? (Be sure to clear cache). You might need to add a theme hook as well but chances are, there are already some good template suggestions within Twig debugging. – Danny Englander May 4 '16 at 17:09

The contact page is a form, so you can theme it like any usual form:

  • Implement hook_theme in your theme to tell drupal you want to theme the form.
  • Create the template file

Example

/**
 * Implements hook_theme().
 */
function <your theme>_theme($existing, $type, $theme, $path) {
  return [
    '<your form id here>' => [
      'render element' => 'form',
    ],
    '<another form id, if you have multiple contact forms>' => [
      'render element' => 'form',
    ],
  ];
}

The form id depends on the machine name of your contact form. For example, if your contact form is named 'feedback', the form id will be

contact_message_feedback_form

Now drupal will by default look for the template file

contact-message-feedback-form.html.twig

Place the twig file in where Drupal can find it, i.e. under the templates folder in your theme.

At the minimum, what you need in that twig template file is

{{ form }}

But you can control what is printed by doing so:

<div class="from">
  {{ form.mail }}
</div>

<div class="message">
  {{ form.message }}
</div>

<div class="actions">
  {{ form.actions }}
</div>

{# Renders the rest of the form #}
{{ form|without('mail','message','actions') }}

@joekers's answer may work for modules; however, here's how to accomplish this in themes. First, put this in your .theme file:

function themename_theme_suggestions_form_alter(array &$suggestions, array $variables) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];
}

Be sure to replace "themename" with the machine name of your theme.

Second, create a template named form--machine-name-of-form.html.twig. For example, form--node-page-form.html.twig would be a valid template suggestion.

  • This is exactly what I was looking for - thanks! – user5013 Sep 3 '17 at 18:47

You could override it in two ways:

  1. Copy the relevant twig file from the (core) module directory to your theme directory and change it there.

  2. Customize the form as much as you can from the GUI. To customize the general appearance of the form page\node, Use GUI-level theming modules like Context and modules like Block\Panels in the peripheral - Block, level.

  • 1
    Overriding files in module folders is never a good idea. The Drupal theming system is built in a way that if the same filename is found in your theme folder it is used instead. So you should copy the file from the module folder to your theme folder and make modifications there (If your users can choose from multiple themes you edit the file in all enabled theme folders). – Neograph734 May 4 '16 at 15:56
  • Thanks Neograph734 , But my question about the contact page. I didn't find the right template to recopied it in theme->templates folder. The module contact didn't have a templates files. So what shoud i do in this sutuation ? – matio89 May 4 '16 at 16:09

You could use hook_theme_suggestions_HOOK to suggest a new template to use for your form. Currently I have this which will allow me to create templates for forms that I create in the future without having to add them each time:

function MODULE_NAME_theme_suggestions_form($variables) {
  // Specific templates for contact forms.
  $suggestions[] = 'form__' . $variables['element']['#theme'][0]; // Machine name of form.
  return $suggestions;
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.