ajax - Foundation RevealモーダルでContact form 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:+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>