Modal form instead of redirect

Question

I have a site-wide contact form setup that redirects the user to the homepage and posts the submission result to the help section. It works as intended, but I was wondering what I would need to do to change this behaviour.

Instead of redirecting, I would like to display the form submission result in a modal (maybe jQuery) popup.

How could I achieve this?

I wouldn't like to lose the core functionality, just maybe override it with a custom module or something. Any thoughts?

EDIT:

Starting with @rémy 's suggestion, I created a .module file where I'm trying to override the standard behavior for form submission.

Right now the only thing I have is as follows (although it doesn´t work):

<?php

/*
*  Override the the form submit behaviour.
*/

function modal_contact_form_result_form_node_form_alter(&$form,       FormStateInterface $form_state, $form_id){
    $form['actions']['submit']['ajax'] = array(
        'callback' => 'ajax_test_dialog_form_callback_modal'
    );
}

function ajax_test_dialog_form_callback_modal($form, FormStateInterface $form_state){
    $response = new AjaxResponse();
    $content = 'Form submitted successfully, thank you!';
    $title = 'YForm submited';
    $response->addCommand(new OpenModalDialogCommand($title, $content, array('width' => '700' )));

return $response;

}

But at this moment it neither prevents redirecting nor pops up the modal.

Answer 1

In a custom module, you need to alter the contact form and add an #ajax attribute to the submit button:

function YOUR_MODULE_form_contact_site_form_alter(&$form, &$form_state) {
    $form['#prefix'] = '<div id="my_form_wrapper">';
    $form['#suffix'] = '</div>';

    $form['actions']['submit']['#ajax'] => array(
          'callback' => 'ajax_test_dialog_form_callback_modal',
    );
}

And then provide this method, using OpenModalDialogCommand, in your module too:

    function ajax_test_dialog_form_callback_modal($form, &$form_state) {
      $response = new AjaxResponse();

      if ($form_state->getErrors()) {
        unset($form['#prefix']);
        unset($form['#suffix']);
        $form['status_messages'] = [
          '#type' => 'status_messages',
          '#weight' => -10,
        ];
        $response->addCommand(new HtmlCommand('#my_form_wrapper', $form));
      }
      else {
        $content = 'Something to show in the modal';
        $title = 'Hi, I'm a Modal';
        $response = new AjaxResponse();
        $response->addCommand(new OpenModalDialogCommand($title, $content, array('width' => '700')));
      }
      return $response;
    }

Here I'm making use of the form element status_messages to display validation errors, otherwise we pop up a modal with custom text.

With drupal_get_messages() you could get the system messages and clear the queue.

Don't forget to make the classes available

use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;

Answer 2

Have a look to your drupal watchdog.

You may add at the beginning of your module :

use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;

Answer 3

Check out https://www.mediacurrent.com/blog/loading-and-rendering-modal-forms-drupal-8 - it explains loading and rendering forms in modal dialogs in Drupal 8.