Drupal: how to display a success message on form submission

By lmartinez, 1 February, 2023

drupal

 

When it comes to powerful CMS, Drupal is one of the most sought after on the market. Drupal is content management software. It is used to create many of the websites and apps you use every day. Drupal has great standard features like easy content creation, reliable performance, and excellent security.

 

It started as an open source project in 2001 and gained popularity as the most efficient content management system used to code and develop websites. Approximately 2.3% of online websites are built with Drupal.

 

 

drupal

 

Most important features of Drupal

 

One of the features that make Drupal a favorite among CMS experts and users is its flexibility, in addition to the modularity it offers when it comes to building scalable web pages. It also has several tools that help create structured content to offer visitors dynamic and complete web experiences.

 

Other important features are:

 

  • Modules extend the functionality of Drupal.
  • Themes allow you to customize the presentation of your content.
  • Mix and match the components to enhance the core abilities of Drupal.
  • Integrate Drupal with external services and other applications in your infrastructure.
  • No other content management software is as powerful and scalable.
  • Companies like BBC, NBC, MTV UK already use Drupal.

 

 

drupal

 

Show success message on Drupal form submission

 

One of the functions that Drupal offers to its users are forms. As they explain in their official documentation “The web form module allows you to create any type of form to collect any type of data, which can be sent to any application or system. Every behavior and aspect of your forms and their inputs are customizable.”

 

One of the characteristics that Drupal forms have is that they can execute a success message once a visitor to the page enters their data, so both the visitor and the person who configures the page are aware that the whole process is over. executed correctly.

 

To achieve this, you must use this code sequence:

 

<?php

namespace Drupal\my_module\Form;

use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;

/**
  * Ajax form example.
  */
class AjaxFormSubmitExample extends FormBase {

   /**
    * {@inheritdoc}
    */
   public function getFormId() {
     return 'ajax_form_submit_example';
   }

   /**
    * {@inheritdoc}
    */
   public function buildForm(array $form, FormStateInterface $form_state) {

     $form['message'] = [
       '#type' => 'markup',
       '#markup' => '<div id="result-message"></div>'
     ];

     $form['data'] = [
       '#type' => 'text field',
       '#title' => $this->t('Some data'),
     ];

     $form['submit'] = [
       '#type' => 'submit',
       '#name' => 'submit',
       '#value' => $this->t('Submit'),
       '#ajax' => [
         'callback' => '::submitForm',
         'event' => 'click',
         'progress' => [
           'type' => 'throbber',
         ],
       ],
     ];
     return $form;
   }

   /**
    * {@inheritdoc}
    */
   public function submitForm(array &$form, FormStateInterface $form_state) {

     \Drupal::messenger()->addMessage($this->t('Form Submitted Successfully'), 'status', TRUE);

     $message = [
       '#theme' => 'status_messages',
       '#message_list' => drupal_get_messages(),
     ];

     $messages = \Drupal::service('renderer')->render($message);

     $response = new AjaxResponse();
     $response->addCommand(new HtmlCommand('#result-message', $messages));
     return $response;
   }
}

 

In this way the data submission success message is achieved in the Drupal form. You can already collect all the data you need from your visitors, for example, to create contact databases or a list of participants in an event.

 

We recommend you on video


 

Thumbnail
Image
drupal commerce
Weight
6
Hero
Title
Drupal: how to display a success message on form submission
Image
Image
Text Color
White
Text Alignment
Left
Size
Medium
Overlay effect
Hide overlay effect
Date
Premium
No