How to render specific form elements from the *.theme file

Question

I am using Drupal 8 and would like to customize how form elements are being displayed. Specifically, I don't like how uneditable, populated textfields are displayed as plain text. I would have it being displayed as an editable textfield (or have the text look like it is in an uneditable textfield). I have looked at various hook functions to try and achieve this but nothing seems to work.

I figure the best way to go about this is if I can render the form fields individually myself and then create a twig file that displays the individual fields as I would like them to be displayed. Here is what I would like the twig field to look like:

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

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

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

This is what I came up with so far:

function theme_preprocess_form(&$variables) {

  $elements = $variables['element'];
  foreach($elements as $key => $element) {
    if (substr( $key, 0, 1 ) !== "#" ) {
      // $variables['form'][$key] = render[$element];
      // This is where I need the code to actually render the element
    }
  }

}

What is the function I need to call to return a fully rendered form element?

To clarify, I would like to accomplish this by only using they my_theme.theme file for my_theme.

Thanks.

Answer 1

The base hook form from the question is for rendering the HTML form tag. To render single form elements you need to specify a separate custom template.

1. Register the custom template in a theme hook

mytheme.theme or mymodule.module:

/**
 * Implements hook_theme().
 */
function mytheme/mymodule_theme() {
  return ['entity_moderation_form' => ['render element' => 'form']];
}

2. Add the custom template to the form

While building the form

EntityModerationForm::buildForm():

  public function buildForm(array $form, FormStateInterface $form_state, ContentEntityInterface $entity = NULL) {
    ...
    $form['#theme'] = ['entity_moderation_form'];
    return $form;
  }

or to an existing form in a form alter hook:

mytheme.theme or mymodule.module:

/**
 * Implements hook_form_FORM_ID_alter().
 */
function mytheme/mymodule_form_FORM_ID_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  $form['#theme'] = ['entity_moderation_form'];  
}

You can skip this step if you use as template name the form id, see the comment from @BradJ.

3. Use the custom template to style single form elements

entity-moderation-form.html.twig:

{{ attach_library('content_moderation/content_moderation') }}
<ul class="entity-moderation-form">
  <li>{{ form.current }}</li>
  <li>{{ form.new_state }}</li>
  <li>{{ form.revision_log }}</li>
  <li>{{ form.submit }}</li>
</ul>
{{ form|without('current', 'new_state', 'revision_log', 'submit') }}

The example is from the core module Content Moderation.

Answer 2

Drupal 8 tend to move towards to TWIG template files rather than write theme_hooks (however that has still a big role right now). I suggest you enable TWIG Debuging and that will "spam" the DOM with comments. Before each element there are two types of comments (for your purpose):

1. How to name your template file to make effect on that element
2. Which theme_hook to use to modify its outlook/value etc.

I would definitely start on field template level first. If the widget of the field is hard to manipulate, you could also create your own widget type (extending from the current one) and use that. More on that: here