3

I want to be able to theme a custom form I create using a custom module that builds a form. The form is created programmatically using the code below:

public function buildForm(array $form, FormStateInterface $form_state) {

    $form['name'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Name'),
      '#required' => TRUE
    );

    $form['address'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Address'),
      '#required' => TRUE
    );

    $form['actions']['submit'] = array(
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    );

    return $form;
}

This form is rendered on the Drupal 8 back-end and uses the admin theme classy BEGIN OUTPUT from 'core/themes/classy/templates/form/form.html.twig'. However there isn't a override file name suggestion.

How would I theme this form?

3

I was looking for a way to use a twig template to theme the form. How would I go about doing that?

First your form needs to have an ID

public function buildForm(array $form, FormStateInterface $form_state) {

    $form['name'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Name'),
      '#required' => TRUE
    );

    $form['address'] = array(
      '#type' => 'textfield',
      '#title' => $this->t('Address'),
      '#required' => TRUE
    );
    $form['actions'] = array('#type' => 'actions');
    $form['actions']['submit'] = array(
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    );

    return $form;
}

public function getFormId() {
  return 'the_custom_form_id';
}

Now we create a new suggestion:

mymodule/mymodule.module

<?php

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_theme_suggestions_alter
 */
function mymodule_theme_suggestions_alter(array &$suggestions, array $variables) {

    if (isset($variables['element']) && isset($variables['element']['#type']) && $variables['element']['#type'] == 'form') {
        $original_theme_hook = $variables['theme_hook_original'];

        $suggestions[] = $original_theme_hook . '__' . str_replace('-', '_', $variables['element']['#id']);
    }

    return $suggestions;

}

/**
 * Implements hook_form_alter()
 */    
function mymodule_form_alter(&$form, FormStateInterface $form_state, $form_id) {

    if ($form_id == 'the_custom_form_id') {

      $form['#theme'] = ['my_custom_form'];

    }

}

/**
 * Implements hook_theme()
 */
function mymodule_theme() {

    $themes['my_custom_form'] = ['render element' => 'form'];

    return $themes;

}

Note: If you're the creator of the form, you can skip the hook_form_alter part and just put $form['#theme'] = ['my_custom_form']; inside your form

mymodule/templates/my_custom_form.html.twig

<div class="something">{{ form.name }}</div>
<div class="something-else">{{ form.address }}</div>
<div class="something-else2">{{ form.actions }}</div>
  • @Harnamc You're welcome, no prob. – No Sssweat Jan 27 '17 at 14:08
4

One option is to add a prefix and suffix to your form arrays

$form['name'] = array(
  '#type' => 'textfield',
  '#title' => $this->t('Name'),
  '#required' => TRUE
  '#prefix' => '<div class="something">',     
  '#suffix' => '</div>',
);

$form['#attached']['css'] = array(
 'path/to/my.css' => array(
   'group' => CSS_AGGREGATE_THEME,
   'weight' => 999
 ),
);

my.css

.something { 
  border: solid red;
}
  • I was looking for a way to use a twig template to theme the form. How would I go about doing that? – harnamc Jan 27 '17 at 8:41

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.