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>

在基础中使用联系表格7显示模态

0 个答案: