<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"ccom_modal_trigger"} -->
<div class="wp-block-button ccom_modal_trigger">
<a class="wp-block-button__link wp-element-button"
target="_blank" rel="noreferrer noopener"
href="YOUR-LINK-HERE">Contact form</a>
</div><!-- /wp:button -->
</div><!-- /wp:buttons -->
<!-- wp:group {"className":"ccom_modal","layout":{"type":"constrained"}} -->
<div class="wp-block-group ccom_modal">
<!-- wp:group {"className":"ccom_modal_content","layout":{"type":"constrained"}} -->
<div class="wp-block-group ccom_modal_content">
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"ccom_modal_close"} -->
<div class="wp-block-button ccom_modal_close">
<a class="wp-block-button__link wp-element-button" href="#">close</a>
</div><!-- /wp:button -->
</div><!-- /wp:buttons -->
</div><!-- /wp:group -->
<!-- wp:html -->
<iframe src=""></iframe>
<!-- /wp:html -->
</div><!-- /wp:group -->
</div><!-- /wp:group -->
<!-- wp:html -->
<script type="text/javascript">
let ccom_modal_trigger
= document.querySelector( '.ccom_modal_trigger' );
ccom_modal_trigger.onclick = function( e ) {
e.preventDefault();
let modal = document.querySelector( '.ccom_modal' );
modal.style.display = 'block';
modal.querySelector( 'iframe' )
.src = ccom_modal_trigger.querySelector( 'a' )
.getAttribute( 'href' );
modal.querySelector( '.ccom_modal_close' )
.onclick = function( event ) {
event.preventDefault();
modal.style.display = 'none';
}
window.onclick = function( event ) {
if( event.target == modal ) {
modal.style.display = 'none';
}
}
}
</script>
<!-- /wp:html -->
<!-- wp:html -->
<style type="text/css">
div.ccom_modal {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba( 0, 0, 0, 0.5 );
}
div.ccom_modal_content {
margin: auto;
width: 50vw;
min-width: 375px;
}
div.ccom_modal iframe {
border: 0;
width: 100%;
height: 75vh;
}
</style>
<!-- /wp:html -->
Blocks may be imported into the Code Editor view of the WordPress Block Editor (three dots in the upper-right, select code editor). This is best used as a Reusable Block, which you can dynamically add into any page or post. In order to import as a Reusable Block navigate to your site with the following URI: /wp-admin/edit.php?post_type=wp_block or see my code snippet Add reusable blocks link to the Appearance menu.
