2

I have a contact form in a Block, using the contact_block module, now I want to add some bootstrap classes to the div container of the actions buttons (send message).

At the end of the form it I got this wrapper:

<div data-drupal-selector="edit-actions" class="form-actions form-group js-form-wrapper form-wrapper" id="edit-actions">
<button class="btn btn-primary btn-xl text-uppercase button button--primary js-form-submit form-submit btn-primary btn" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Send message">Send message</button>
</div>

I want to affect the div id="edit-actions".

According to twig debug, I should do a hook of the container, but I don't know how to specify that I want to affect that div.

Inside the themes/bootstrap/templates/system/container.html.twig is the structure of the containers, so I can add some classes there, but I don't know how to specify which container I want to affect. I had tried to change the name to container--contact_message_feedback_form.html.twig, but it doesnt work.

{%
  set classes = [
    not attributes.hasClass('toolbar-menu-administration') ? 'form-group',
    has_parent ? 'js-form-wrapper',
    has_parent ? 'form-wrapper',
  ]
%}
<div{{ attributes.addClass(classes) }}>{{ children }}</div>

Extra info: Drupal 8.4

Subtheme bootstrap

I have already a hook_form_alter() to remove the preview button.

function twig_block_form_alter(&$form, $form_state, $form_id) {

  if (strpos($form_id, 'contact_message_feedback_form') !== FALSE) {
    $form['actions']['preview']['#access'] = FALSE;
    $form['actions']['submit']['#attributes']['class'][] = 'btn btn-primary btn-xl text-uppercase';
    // Adding prefix and suffix to the form.
    $form['elements']['edit-actions']['#prefix'] = '<div class="col-md-12 text-center">';
    $form['elements']['edit-actions']['#suffix'] = '</div>';


  }
}
1

Thanks to kint for devel options:

There you go:

/**
 * Implements hook_form_alter().
 */
function twig_block_form_alter(&$form, $form_state, $form_id) {

  if (strpos($form_id, 'contact_message_feedback_form') !== FALSE) {
    $form['actions']['preview']['#access'] = FALSE;
    $form['actions']['submit']['#attributes']['class'][] = 'btn btn-primary btn-xl text-uppercase';
    // kint($form['actions']['submit']);
    $form['actions']['submit']['#prefix'] = '<div class="col-md-12 text-center">';
    $form['actions']['submit']['#suffix'] = '</div>';
  }
}

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.