A module with an AJAX form block


In our previous video, we created an ajax submit form. Now we are going to expose that form into a block.

I will walk you through the specific moments as you will again find the full source code of the module in the drupal-up Github page.

The new thing is, of course, the creating of the block. In Drupal 8 - generally, we just have to create a class for our block, which in the general case will extend the BlockBase class.

The file in which our block should reside should be under our_module/src/Plugin/Block. We will call our example block ExampleAjaxFormBlock. Take a look at how it will appear in your file system.

the block class folder structure

Great! So we have our block class file - now let's declare the block class in there. 

<?php

namespace Drupal\ajax_form_submit_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a "Example ajax submit form block".
 *
 * @Block(
 *   id = "ajax_submit_form_block",
 *   admin_label = @Translation("Example ajax submit form block")
 * )
 */
class ExampleAjaxFormBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    
    $form = \Drupal::formBuilder()->getForm('\Drupal\ajax_form_submit_block\Form\AjaxSubmitDemo');
    return $form;
  }
}

Again (as for our form in the previous article) we have the namespace, containing the module name at the very top. We have an use statement since we are going to extend the BlockBase class, but the thing that is new and interesting here is the comments above our class:

/**
 * Provides a "Example ajax submit form block"
 *
 * @Block(
 *   id = "ajax_submit_form_block",
 *   admin_label = @Translation("Example ajax submit form block")
 * )
 */

These are annotations and there we actually declare stuff. As in this case - we specify the id of the block and the description that will appear when we are creating a reference to the block.

The content of the ExampleAjaxFormBlock class is quite self-explanatory. We are obligated to declare a public build() method in which we are preparing and returning what we are actually going to show on our block. There is also a static call of the formBuilder which is getting our ajax form and we are returning it.

Let's go ahead and activate the custom module and then try to create a new instance of our block in the content region. In order to do that we go to /admin/structure/block and next to the name of the Content region we click on "Place block":

placing our custom block in the content region

We just created an instance of our custom block. As you know - in Drupal 8 technically you may have as many instances of a block as you wish, without trying special tricks.

Now as we visit the front page - we see that our custom ajax form is there. As for any other block - you may specify that you want it to appear just on some pages or just on some content types - that is the same for any block instance in Drupal. 

how our custom block appear on the front page

 

The full code of the module you may find on our github page here.

Thanks for reading!

Meet the author

Nikolay is a Drupal PHP developer with more than 7 years of experience. Passion for teaching, passion for simplicity and effectiveness of the code are just some keywords that he cares about. See more ...
Drupal Up is a platform for learning Drupal ...

Drupal Dan promoting
The idea is though not just to be another platform with some boring videos but all the videos to be inspired by real-world problems. That means something that you will most probably need if you work with Drupal. We want you to be successful and we want to teach you everything we know about Drupal!
So watch the videos, try to follow and reproduce, ask questions and you will see you will be able to conquer this wonderful sea that Drupal 8 is.