<div>
    <a href="#" id="click-me">Click Me</a>
</div>
<div id="popup-modal" style="display:none;">

    <form class="form contact"
          action="<?= $block->escapeUrl($block->getFormAction()) ?>"
          id="contact-form"
          method="post"
          data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
          data-mage-init='{"validation":{}}'>
        <fieldset class="fieldset">
            <legend class="legend"><span><?= $block->escapeHtml(__('Write Us')) ?></span></legend>
            <br/>
            <div class="field note no-label"><?= $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?></div>
            <div class="field firstname required">
                <label class="label" for="firstname"><span><?= $block->escapeHtml(__('First Name')) ?></span></label>
                <div class="control">
                    <input name="firstname" id="firstname" title="<?= $block->escapeHtmlAttr(__('First Name')) ?>"
                           class="input-text" type="text" data-validate="{required:true}"/>
                </div>
            </div>
            <div class="field lastname required">
                <label class="label" for="lastname"><span><?= $block->escapeHtml(__('Last Name')) ?></span></label>
                <div class="control">
                    <input name="lastname" id="lastname" title="<?= $block->escapeHtmlAttr(__('Last Name')) ?>"
                           class="input-text" type="text" data-validate="{required:true}"/>
                </div>
            </div>
            <div class="field emailaddress required">
                <label class="label" for="emailaddress"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                <div class="control">
                    <input name="emailaddress" id="emailaddress" title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
                           class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
                </div>
            </div>
            <div class="field mobile">
                <label class="label" for="mobile"><span><?= $block->escapeHtml(__('Phone Number')) ?></span></label>
                <div class="control">
                    <input name="mobile" id="mobile" title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
                           class="input-text" type="text"/>
                </div>
            </div>
            <div class="field extension required">
                <input type='hidden' name="extension" id="extension-name"
                       class="input-text" type="text" data-validate="{required:true}"/>
            </div>
        </fieldset>
        <div class="actions-toolbar">
            <div class="primary">
                <button type="submit" id='customer-contact' title="<?= $block->escapeHtmlAttr(__('Submit')) ?>"
                        class="action submit primary">
                    <span><?= $block->escapeHtml(__('Submit')) ?></span>
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function (
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                title: 'Contact Form',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $("#click-me").on('click', function () {
                $("#popup-modal").modal("openModal");
            });

        }
    );
</script>