I want to override the template of the contact page

Question

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.

Answer 1

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') }}

Answer 2

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;
}

Answer 3

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

Answer 4

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.

Answer 5

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';
  unset($form['name']['#title']);

  // 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';
  unset($form['mail']['#title']);


  // 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'] = '';
  unset($form['subject']['widget'][0]['value']['#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'] = '';
  unset($form['message']['widget'][0]['value']['#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