web-dev-qa-db-fra.com

Thème un formulaire de contact

Je voudrais thème un formulaire de contact dans Drupal 8. Je voudrais mettre des divs autour des éléments de formulaire (en utilisant bootstrap).

Je veux aussi mettre quelques classes sur certains éléments (bouton soumettre, le formulaire lui-même).

theming8emails
11
Johan Haest

Ouvrez votre fichier YOURTHEMENAME.theme et ajoutez le code suivant:

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-6"><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-6"><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';

}

Et voici votre résultat: enter image description here

N'oubliez pas de vider vos caches;)

16
rpayanm

Vous pouvez simplement thème chaque forme comme vous le souhaitez. Je n'aime pas la méthode de @rpayanm, car elle est difficile à maintenir et difficile à lire, avec de grandes formes, ce n'est pas le cas, juste un emballage simple et une structure simple.

Chaque formulaire essayant d'utiliser le thème est égal à leur nom de machine. Vous pouvez trouver ce nom de modèle dans $form['#theme'] Juste en le modifiant, il est toujours (ou dans la plupart des cas) identique au nom de la machine id du formulaire. Ce que vous devez faire, c'est d'enregistrer un modèle. Vous devez implémenter hook_theme(). Vous pouvez l'écrire dans CUSTOMMODULE.module ou dans THEMENAME.theme. La clé du thème doit être la même que dans $form['#theme'], Elle est donc automatiquement utilisée, sinon vous devez en ajouter une nouvelle via le formulaire alter.

/**
 * Implements hook_theme().
 */
function MODULENAME_theme($existing, $type, $theme, $path) {
  return [
    'FORM_ID_THEME' => [
      'template' => 'custom-form-template-name',
      'render element' => 'form',
    ]
  ];
}

Drupal passe la variable $ form avec le formulaire.

Ensuite, vous devez créer custom-form-template-name.html.twig (Avec le nom de votre modèle à partir de hook_theme ()).

Le modèle minimal est

{{ form }}

Vous pouvez également imprimer chaque champ du formulaire où vous le souhaitez

{{ form.field_name }}

Ici, vous pouvez faire ce que vous voulez avec le balisage.

Vous pouvez également transmettre des données supplémentaires au modèle en implémentant template_preprocess_TEMPALTENAME

function template_preprocess_FORM_ID_THEME(&$variables) {
  $variables['example'] = 'This is added via preprocess';
}

Et puis utiliser dans le modèle

{{ example }}
<div class="first-field">
  {{ form.first_field }}
</div>

<div class="second-field">
  {{ form.second_field }}
</div>

<div class="buttons">
  {{ form.submit }}
  {{ form.preview }}
</div>
{#
Don't forget to add printing form special info at the end.
Without this data form will not working propertly.
#}
{{ form.form_build_id }}
{{ form.form_token }}
{{ form.form_id }}

Je pense que cette méthode est plus flexible, propre et puissante.

P.s. désolé pour mon anglais, j'espère que quelqu'un éditera et corrigera mes erreurs :)

Exemple de formulaire complexe utilisant cette méthode.

enter image description here

20
Niklan