Call mautic form at modal Window from GrapeJS

Product Support
1

Your software
My Mautic version is: 4.1
My PHP version is: 7.3
My Database type and version is:

Your problem
My problem is:

See video

I try call mautic form

{mauticform id=2 style=modal element=.call-to-action-btn}

Click me

But grapesjs remove js code and modal Window not working (

These errors are showing in the log:

Steps I have tried to fix the problem:

2
3 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modal window on clear CSS
  </title>
</head>
<body>
  <div class="container">
	<div id="iurl">
	  <a href="#openModal" class="button">open modal</a>
	</div>
	<div id="openModal" class="modal">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<h3 class="modal-title">title modal
			</h3>
			<a href="#close" title="Close" class="close">×</a>
		  </div>
		  <div class="modal-body">
			{form=form_id}
		  </div>
		</div>
	  </div>
	</div>
  </div>
  <style>.modal{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0, 0, 0, 0.5);
	z-index:1050;
	opacity:0;
	undefined:undefined;
	-webkit-transition:opacity 400ms ease-in;
	-moz-transition:opacity 400ms ease-in;
	transition:opacity 400ms ease-in;
	pointer-events:none;
	margin:0;
	padding:0;
	}
	.modal:target{
	  opacity:1;
	  pointer-events:auto;
	  overflow-y:auto;
	  undefined:undefined;
	}
	.modal-dialog{
	  position:relative;
	  width:auto;
	  margin:10px;
	}
	.modal-content{
	  position:relative;
	  display:flex;
	  -webkit-box-orient:vertical;
	  -webkit-box-direction:normal;
	  -webkit-flex-direction:column;
	  -ms-flex-direction:column;
	  flex-direction:column;
	  background-color:#fff;
	  -webkit-background-clip:padding-box;
	  background-clip:padding-box;
	  border:1px solid rgba(0, 0, 0, .2);
	  border-radius:.3rem;
	  outline:0;
	}
	.modal-header{
	  display:flex;
	  -webkit-box-align:center;
	  -webkit-align-items:center;
	  -ms-flex-align:center;
	  align-items:center;
	  -webkit-box-pack:justify;
	  -webkit-justify-content:space-between;
	  -ms-flex-pack:justify;
	  justify-content:space-between;
	  padding:15px;
	  border-bottom:1px solid #eceeef;
	}
	.modal-title{
	  margin-top:0;
	  margin-bottom:0;
	  line-height:1.5;
	  font-size:1.25rem;
	  font-weight:500;
	  text-align:left;
	}
	.close{
	  float:right;
	  font-family:sans-serif;
	  font-size:24px;
	  font-weight:700;
	  line-height:1;
	  color:#000;
	  text-shadow:0 1px 0 #fff;
	  opacity:.5;
	  text-decoration:none;
	}
	.close:focus{
	  color:#000;
	  text-decoration:none;
	  cursor:pointer;
	  opacity:.75;
	}
	.close:hover{
	  color:#000;
	  text-decoration:none;
	  cursor:pointer;
	  opacity:.75;
	}
	.modal-body{
	  position:relative;
	  -webkit-box-flex:1;
	  -webkit-flex:1 1 auto;
	  -ms-flex:1 1 auto;
	  flex:1 1 auto;
	  padding:15px;
	  overflow:auto;
	}
	body{
	  font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	  font-size:16px;
	  font-weight:400;
	  line-height:1.5;
	  color:#292b2c;
	  background-color:#fff;
	  margin:0;
	  padding:0;
	}
	.button{
	  display:inline-block;
	  text-decoration:none;
	  border-color:#4e5d9d;
	  border-width:10px 20px;
	  border-style:solid;
	  -webkit-border-radius:3px;
	  -moz-border-radius:3px;
	  border-radius:3px;
	  background-color:#4e5d9d;
	  font-size:16px;
	  color:#ffffff;
	}
	#iurl{
	  text-align:center;
	}
	@media (min-width: 576px){
	  .modal-dialog{
		max-width:500px;
		margin:30px auto;
		undefined:undefined;
	  }
	}
	@media (min-width: 768px){
	  .modal-content{
		-webkit-box-shadow:0 5px 15px rgba(0, 0, 0, .5);
		box-shadow:0 5px 15px rgba(0, 0, 0, .5);
	  }
	}
  </style>
</body>