How to load a webform via ajax inside custom JS? I'm trying to load a webform block via ajax.

Right now I have:

$.ajax({
    url: '/form/contact-us',
    success: function (response) {
        console.log(response);
    },
    error: function (error) {
        console.log(error);
    }
});


How do i get the form as a block and not by the full page/node?
Try the following steps :


Create follow this how to create contact form block
Create route for example form/contact-us-block :


custom_module.routing.yml  

custom_module.get_contact_form_block:
  path: '/form/contact-us-block'
  defaults:
    _controller: '\Drupal\custom_module\Controller\TutorialController::getContactFormBlock'


getContactFormBlock Action in your controller 

public function getContactFormBlock() {
    //- Set your block id here
    $bid = 4;
    $block = \Drupal\block_content\Entity\BlockContent::load($bid);
    $build = \Drupal::entityTypeManager()
      -&gt;getViewBuilder('block_content')
      -&gt;view($block);
    return render($build)-&gt;__toString();
  }



Get the block html in your Js.




    (function ($, Drupal) {
      $(document).ready(function ($) {
        $.ajax({
          url: 'form/contact-us-block',
          success: function (response) {
            console.log(response);
          },
          error: function (error) {
            console.log(error);
          }
        });
      });
    })(jQuery, Drupal);