Jquery 如何使用带有重力表单的花式盒子并在提交时关闭？

我在WordPress中使用了一个奇特的框iFrame作为重力表单。是否可以在表单提交后，而不是在iFrame中重新定向，关闭花式框并在浏览器中重新定向？如果表单验证失败，请保持打开状态，直到表单验证完成（通过ajax）

---

谢谢

问题在于它位于iframe中。尝试创建您自己的模式（使用我在下面放置的代码）

如果需要，请执行以下操作：

在管理员的“表单设置>确认”选项卡中。如果URL位于站点外部，请单击“重定向”单选按钮，或单击“页面”单选按钮，然后选择位于站点内部的内部页面

下面的代码可以用于使用相同模式包装器的单个或多个表单。 模式HTML/PHP GFORM（短代码）：

<div class="modal_wrapper ac">
<div class="modal_form">

    <div class="modal_contact">
        <h3 class="title al">Contact</h3>
        <p class="al mb20">Send us a message and we will respond as soon as possible.</p>
        <?php 
            echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]');
        ?>
    </div>

    <div class="modal_request">
        <h3 class="title al">Request</h3>
        <p class="al mb20">Make a request for custom personalized jewelry for someone special or for you.</p>
        <?php 
            echo do_shortcode('[gravityform id="2" title="false" description="false" ajax="true"]');
        ?>
    </div>

    <span class="close-btn"></span>
</div>

.al {
text-align:left;
}

.mb20 {
margin-bottom:20px;
}

.close-btn {
background:transparent url('../images/close_btn.png') no-repeat 0 0;
position:absolute;
width:26px;
height:26px;
top:-10px;
right:-10px;
cursor:pointer;
opacity:1.0;
-moz-opacity:1.0;
-webkit-opacity:1.0;
-o-opacity:1.0;
-khtml-opacity:1.0;
-ms-opacity:1.0;
outline:none;
text-indent:-9999px;
}

.close-btn:hover {
opacity:0.8;
-moz-opacity:0.8;
-webkit-opacity:0.8;
-o-opacity:0.8;
-khtml-opacity:0.8;
-ms-opacity:0.8;
}

.modal_wrapper {
background:transparent url('../images/bg_modal.png') !important;
position:fixed;
z-index:999;
left:0;
top:0;
filter:alpha(opacity=100) !important;
-moz-opacity:1.0 !important;
opacity:1.0 !important;
display:none;
}

.modal_form {
top:100px;
background:#fff;
position:relative;
border:3px solid #efddc1;
width:370px;
height:auto;
padding:10px 20px;
border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px;
}

.modal_form .title {
font-size:26px;
color:#f76b4f;
margin:10px 0;
text-transform:uppercase;
}

// Hides by default
$('.modal_wrapper').hide();

// Makes the wrapper the same Height & Width as the window
$('.modal_wrapper').css({
    'width': $(window).width() + 'px',
    'height': $(window).height() + 'px'
}); 

// Places the form grandparent in the center vertically & horizontally
$('.modal_form').css({
    'margin-left': '-' + ($('.modal_form').width()/2) + 'px',
    'left': '50%'
});

// Hides the forms parent
$('.modal_contact').hide();
$('.modal_request').hide();


// Makes sure that is stays vertically & horizontally centered when the window is resized
$(window).resize(function(){
    $('.modal_wrapper').css({
        'width': $(window).width() + 'px',
        'height': $(window).height() + 'px'
    });
    $('.modal_form').css({
        'margin-left': '-' + ($('.modal_form').width()/2) + 'px',
        'left': '50%'
    });
});


// Place this or these (contact_form, request_form) class on anything that you want to show the modal
// be sure to hide the other forms in the modal
$('.contact_form').click(function(){
    $('.modal_wrapper').fadeIn('fast');
    $('.modal_contact').show();
    $('.modal_request').hide();
});

$('.request_form').click(function(){
    $('.modal_wrapper').fadeIn('fast');
    $('.modal_contact').hide();
    $('.modal_request').show();
});

// Close the modal
$('.close-btn').click(function(){
    $(this).closest('.modal_wrapper').fadeOut('fast');
});

Jquery:

<div class="modal_wrapper ac">
<div class="modal_form">

    <div class="modal_contact">
        <h3 class="title al">Contact</h3>
        <p class="al mb20">Send us a message and we will respond as soon as possible.</p>
        <?php 
            echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]');
        ?>
    </div>

    <div class="modal_request">
        <h3 class="title al">Request</h3>
        <p class="al mb20">Make a request for custom personalized jewelry for someone special or for you.</p>
        <?php 
            echo do_shortcode('[gravityform id="2" title="false" description="false" ajax="true"]');
        ?>
    </div>

    <span class="close-btn"></span>
</div>

.al {
text-align:left;
}

.mb20 {
margin-bottom:20px;
}

.close-btn {
background:transparent url('../images/close_btn.png') no-repeat 0 0;
position:absolute;
width:26px;
height:26px;
top:-10px;
right:-10px;
cursor:pointer;
opacity:1.0;
-moz-opacity:1.0;
-webkit-opacity:1.0;
-o-opacity:1.0;
-khtml-opacity:1.0;
-ms-opacity:1.0;
outline:none;
text-indent:-9999px;
}

.close-btn:hover {
opacity:0.8;
-moz-opacity:0.8;
-webkit-opacity:0.8;
-o-opacity:0.8;
-khtml-opacity:0.8;
-ms-opacity:0.8;
}

.modal_wrapper {
background:transparent url('../images/bg_modal.png') !important;
position:fixed;
z-index:999;
left:0;
top:0;
filter:alpha(opacity=100) !important;
-moz-opacity:1.0 !important;
opacity:1.0 !important;
display:none;
}

.modal_form {
top:100px;
background:#fff;
position:relative;
border:3px solid #efddc1;
width:370px;
height:auto;
padding:10px 20px;
border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px;
}

.modal_form .title {
font-size:26px;
color:#f76b4f;
margin:10px 0;
text-transform:uppercase;
}

// Hides by default
$('.modal_wrapper').hide();

// Makes the wrapper the same Height & Width as the window
$('.modal_wrapper').css({
    'width': $(window).width() + 'px',
    'height': $(window).height() + 'px'
}); 

// Places the form grandparent in the center vertically & horizontally
$('.modal_form').css({
    'margin-left': '-' + ($('.modal_form').width()/2) + 'px',
    'left': '50%'
});

// Hides the forms parent
$('.modal_contact').hide();
$('.modal_request').hide();


// Makes sure that is stays vertically & horizontally centered when the window is resized
$(window).resize(function(){
    $('.modal_wrapper').css({
        'width': $(window).width() + 'px',
        'height': $(window).height() + 'px'
    });
    $('.modal_form').css({
        'margin-left': '-' + ($('.modal_form').width()/2) + 'px',
        'left': '50%'
    });
});


// Place this or these (contact_form, request_form) class on anything that you want to show the modal
// be sure to hide the other forms in the modal
$('.contact_form').click(function(){
    $('.modal_wrapper').fadeIn('fast');
    $('.modal_contact').show();
    $('.modal_request').hide();
});

$('.request_form').click(function(){
    $('.modal_wrapper').fadeIn('fast');
    $('.modal_contact').hide();
    $('.modal_request').show();
});

// Close the modal
$('.close-btn').click(function(){
    $(this).closest('.modal_wrapper').fadeOut('fast');
});