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. May 4, 2016 at 17:09

5 Answers 5


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


 * 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


Now drupal will by default look for the template file


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 class="message">
  {{ form.message }}

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

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

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;

@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.


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.

  • 3
    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). May 4, 2016 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 ? May 4, 2016 at 16:09

I know its and old question,but to the ones who still needs a solution, open Your drupal template .theme file and paste this code

function YOURTHEMENAME_form_contact_message_feedback_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

  // Name
  $form['name']['#prefix'] = '<div class="row"><div class="col-md-12"><div class="form-group">';
  $form['name']['#suffix'] = '</div>';
  $form['name']['#attributes']['placeholder'][] = $form['name']['#title'].'*';
  $form['name']['#attributes']['class'][] = 'form-control';

  // Mail
  $form['mail']['#prefix'] = '<div class="form-group">';
  $form['mail']['#suffix'] = '</div>';
  $form['mail']['#attributes']['placeholder'][] = $form['mail']['#title'].'*';
  $form['mail']['#attributes']['class'][] = 'form-control';

  // Subject
  $form['subject']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
  $form['subject']['widget'][0]['value']['#attributes']['placeholder'][] = $form['subject']['widget'][0]['#title'].'*';
  $form['subject']['widget'][0]['#title'] = '';
  $form['subject']['widget'][0]['#prefix'] = '<div class="form-group">';
  $form['subject']['widget'][0]['#suffix'] = '</div></div>';

  // Message
  $form['message']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
  $form['message']['widget'][0]['value']['#attributes']['placeholder'][] = $form['message']['widget'][0]['#title'].'*';
  $form['message']['widget'][0]['#title'] = '';
  $form['message']['widget'][0]['#prefix'] = '<div class="col-md-12"><div class="form-group">';
  $form['message']['widget'][0]['#suffix'] = '</div></div></div>';

  // Submit
  $form['actions']['#prefix'] = '<div class="clearfix">';
  $form['actions']['#suffix'] = '</div>';
  $form['actions']['submit']['#attributes']['class'][] = 'btn';
  $form['actions']['submit']['#attributes']['class'][] = 'btn-success';
  $form['actions']['submit']['#attributes']['class'][] = 'pull-right';


where your YOURTHEMENAME is the real name of your Drupal template, hope it help someone

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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