Using Contact form 7 in foundation reveal modal - ajax

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">
<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="availability">
<span class="muted">Availability:</span> <br>
<span><?php get_template_part('template-parts/content','availability'); ?></span>
</div>
Product Details
<hr>
<div class="more-info text-center">
<span class="hide">More info</span>
</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">×</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>
Product Details
</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">×</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. [phone]</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>