Add specific CSS class to form elements from the address field

Question

I try to add a custom css class to a form element inside my address field for e.g the postal_code field and another class to the given_name and family_name field.

I tried it with a my_theme_theme_suggestions_form_element_alter. But then I have to extend all the twig files like form-element--equal-width-column.html.twig, for just adding the css class.

function my_theme_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) {

  if (in_array($variables['element']['#attributes']['class']['0'], ['family-name', 'given-name'])) {
    $suggestions[] = $hook . '__equal_width_column';
  }
}

Is it possible to just add a css class to specific form-elements div's, so I don't have to extend all those twig files?

Answer 1

You can use the hook_form_FORMID_alter in order to add classes to the fields you want to.

/**
* Implements hook_form_FORM_ID_alter();
*/
function hook_form_FORM_ID_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  $form['my_custom_field']['#attributes']['classe'][] = "my-custom-class"
}

Answer 2

To get form id , create a custom module and in .module write a hook which is given below:

/**
* Implements hook_form_alter();
*/
function custom_form_form_alter(&$form, 
\Drupal\Core\Form\FormStateInterface $form_state, $form_id){
 dd($form);  
}

Then you have to go to the particular route for the form. You will find this

Then you can follow benftwc's answer: use the hook_form_FORM_ID_alter() to add css class.