Using Contact form 7 in foundation reveal modal

Question

So I'm having a little problem with using contact form 7 in a foundation reveal modal and was wondering if someone can help me a little with the following.

On a project I'm working on I have a product overview with lots of products. On every product there's a link that opens a contact form in a modal (reveal from foundation). In this modal I'm loading the contact form with get_template_part. This is working nicely but when I click on "send" the modal closes without sending the form and without a feedback message.

I would like to keep the modal open and include the "thank you" message or error message in this modal. I read something about using ajax but I'm not sure how to load the template part with ajax and not sure if thats the way to go.

I hope someone can help me in the right direction with this.

I added some code to make this a little bit more clear.

<div class="<?php echo $termsString; ?> item columns small-12 medium-6 large-3">
    <div class="product-item">
        <a href="#" data-open="itemDetailsModal-<?php the_ID(); ?>"><img class="assort-img" src="<?php the_post_thumbnail_url('td-product'); ?>" class="" alt=""></a>
        <div class="item-content">
            <a href="#" data-open="itemDetailsModal-<?php the_ID(); ?>"><h5 class="item-title"><?php the_title(); ?></h5></a>
            <div class="origin">
                <span class="muted">Origin:</span> <br>
                <span><?php the_field('origin'); ?></span>
            </div>
            <div class="availability">
                <span class="muted">Availability:</span> <br>
                <span><?php get_template_part('template-parts/content','availability'); ?></span>
            </div>
            <a href="#" data-open="itemDetailsModal-<?php the_ID(); ?>">Product Details</a>
            <hr>
            <div class="more-info text-center">
                <a href="#" data-open="itemContactModal-<?php the_ID(); ?>"><span class="hide">More info</span></a>
            </div>
        </div>
    </div>
</div>

<div class="reveal full" id="itemContactModal-<?php the_ID(); ?>" data-reveal>
    <?php get_template_part('template-parts/content','itemcontact'); ?>
</div>

And in content-item-contact i have the following:

<div class="contactdetails">
    <div class="row">
        <div class="small-12 columns">
            <div class="row collapse">
                <div class="column small-12 medium-4 large-3 white">
                    <div class="product-item">
                        <button class="close-button show-for-small-only" data-close aria-label="Close modal" type="button">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <img class="assort-img" src="<?php the_post_thumbnail_url('td-product'); ?>" class="" alt="">
                        <div class="item-content">
                            <h5 class="item-title"><?php the_title(); ?></h5>
                            <div class="origin">
                                <span class="muted">Origin:</span> <br>
                                <span><?php the_field('origin'); ?></span>
                            </div>
                            <div class="despription">
                                <p>Here you find productdetails and availability. Please contact us for more specific information.</p>
                            </div>
                            <a href="#" data-open="itemDetailsModal-<?php the_ID(); ?>">Product Details</a>
                        </div>
                    </div>
                </div> 

                <div class="column small-12 medium-8 large-9">
                    <div class="contact-wrapper">
                        <header >
                            <h4 class="contrast">Request more information</h4>
                            <button class="close-button show-for-medium" data-close aria-label="Close modal" type="button">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </header>
                        <div class="contact-content clearfix">
                            <div class="">
                                <div class="column small-12">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="tel:+31(0)765221155">+31 (0) 76 522 1155</a></p>
                                </div>
                                <div class="column small-12">
                                    <form>
                                        <?php echo do_shortcode('[contact-form-7 id="138" title="Product Info"]'); ?>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>