4

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.

3

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;
9
  • I'm sorry, but I'm very new to Drupal. Can you provide some more detail? At the moment, I only created a new contact form using the admin menu in Drupal 8 with the fields I needed. I haven't wrote any custom module code yet. – Joum Jun 27 '16 at 16:15
  • Can I see how you use the form ? Please post some code – rémy Jun 27 '16 at 17:10
  • Updated my answer – rémy Jun 27 '16 at 18:03
  • Thank you for your reply! I'm now trying to create a custom module to use your code/concept, but some things are confusing me: I created an .info.yml file in a folder for a new custom module. Do I also need a routing.ymlfile describing the path to a controller? Does this code you posted go up in the controller? I would like to share some of the code you asked for, but I'm not sure what it means. I created my contact form all straight from the backend without any code or custom module. – Joum Jun 28 '16 at 8:36
  • 1
    you don't need a routing.yml for just this alteration. the two methods goe into the your_module.module file. – rémy Jun 28 '16 at 9:06
1

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;
1

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.

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.