Add separate div after a form

Question

All I want to do is add a new <div>, ideally just after a <form> element. I have a self-written module that generates a payment form, using some routing, like this:

mymodule.applications.payment_form:
  path: '/payment/{submission}'
  defaults:
    _form: '\Drupal\mymodule\Form\PaymentForm'
    _title_callback: '\Drupal\mymodule\Form\PaymentForm::getTitle'
  requirements:
    _role: 'authenticated'
    _custom_access: 'Drupal\mymodule\Form\PaymentForm::access'
  options:
    parameters:
      submission:
        type: entity:webform_submission

The PaymentForm class has a standard buildForm() method, and it's easy to add render arrays to the $form build form elements and other decoration etc. But those are all within the <form> tag.

The payment form is displayed in the main page content block.

I've been trying is HOOK_preprocess_HTML in my mymodule.module file and looking at $vars.

$vars['page'] contains the various regions: sidebar_first, content, secondary_menu etc.

$vars['page']['content'] consists of:

'mysite_page_title' => array(13)
'mysite_local_tasks' => array(3)
'mysite_help' => array(3)
'mysite_local_actions' => array(3)
'mysite_content' => array(12)
'#sorted' => boolTRUE
'#theme_wrappers' => array(1)
'#region' => string(7) "content"

mysite_content is a block - and I can't see how I can modify it from here...

I've also tried HOOK_block_view_BASE_BLOCK_ID_alter, which in this case is system_main_block (for the page content).

function mymodule_block_view_system_main_block_alter gives me a $build array with a #block element, but I don't see how I can find the <form> elements in there either and place something afterwards…

Anything else I can do?

Answer 1

There might be hundreds of ways to add this markup in Drupal. The two simplest that came to my mind are:

1) Add a suffix to the form tag in form build or form alter:

$form['#suffix'] = '<div>Suffix to form</div>';

2) or add the markup in a form.html.twig below the form tag:

{#
/**
 * @file
 * Default theme implementation for a 'form' element.
 *
 * Available variables
 * - attributes: A list of HTML attributes for the wrapper element.
 * - children: The child elements of the form.
 *
 * @see template_preprocess_form()
 *
 * @ingroup themeable
 */
#}
<form{{ attributes }}>
  {{ children }}
</form>

<div>
  A div container after the form
</div>

For the second solution you might also need to add a theme name suggestion.