Использование контактной формы 7 в фундаменте показывает модальный

Question

Так что у меня возникла небольшая проблема с использованием контактной формы 7 в модальности "Раскрытие основы", и мне было интересно, может ли кто-нибудь немного помочь мне в следующем.

В проекте, над которым я работаю, у меня есть обзор продуктов с большим количеством продуктов. На каждый продукт есть ссылка, которая открывает форму контакта в модальном режиме (откройте от основания). В этом модале я загружаю контактную форму с get_template_part, Это работает хорошо, но когда я нажимаю "отправить", модальное окно закрывается без отправки формы и без сообщения обратной связи.

Я хотел бы оставить модал открытым и включить в этот модал сообщение "спасибо" или сообщение об ошибке. Я читал кое-что об использовании ajax, но я не уверен, как загрузить часть шаблона с помощью ajax, и не уверен, что так будет.

Я надеюсь, что кто-то может помочь мне в правильном направлении с этим.

Я добавил немного кода, чтобы сделать это немного более понятным.

<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>

И в content-item-contact у меня есть следующее:

<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:[phone]">[phone]</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>