I am making a Wordpress website using WPForms to use different forms. These WPForms are loaded in a modal using an Ajax trigger on a button click. When I click a button, the ID of the button is used to determine the ID of the form, which is then used in the WPForms shortcode to output the correct form.

The problem however is that the form action is replaced with the Admin ajax url when submitting the form. This results in a blank page returning 0.

I need below ajax url to use ajax in the first place. How can I prevent the form action being changed?

HTML

    <?php $cf_object = get_sub_field('kaartje_button_cf'); ?>
    <a data-value="<?php echo $cf_object->ID; ?>" class="modal_trigger cta <?php echo $a_class; ?>" data-toggle="modal" data-target="#bestelModal">
        <?php
        echo $cta_svg;
        echo $button_text ?>
    </a>

Ajax

<?php
add_action( 'wp_footer', 'ajax_fetchCF' );
function ajax_fetchCF() { ?>
    <script type="text/javascript">
        jQuery('.modal_trigger').click(function () {
            var element = jQuery(this).data('value');
            jQuery.ajax({
                url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                type: 'POST',
                beforeSend: function () {
                    jQuery('.ajax-loader').show();
                    jQuery('#datafetch').hide();
                },
                complete: function () {
                    jQuery('.ajax-loader').hide();
                    jQuery('#datafetch').fadeIn();
                },
                data: {
                    action: 'data_fetchCF',
                    keyword: element
                },
                success: function (data) {
                    jQuery('#datafetch').html(data);
                }
            });
        });
    </script>
    <?php }

add_action( 'wp_ajax_data_fetchCF', 'data_fetchCF' );
add_action( 'wp_ajax_nopriv_data_fetchCF', 'data_fetchCF' );
function data_fetchCF() {
    $id = $_POST['keyword'];
    echo get_the_title($id);
    echo do_shortcode('[wpforms id="'.$id.'"]');
    die();
} ?>

Screenshots of the HTML output

When embedded with a shortcode normally using the wordpress content editor (correct):

When loading the form by ID using the ajax function above:

How do I prevent replacing the form action with the ajax url so that the form is actually sent?