jquery - グラビティフォームでファンシーボックスを使用し、送信時に閉じる方法は?

Question

WordPress の Gravity Form におしゃれなボックス iFrame を使用しています。フォームが送信された後、iFrame 内でリダイレクトするのではなく、ファンシー ボックスを閉じてブラウザ内でリダイレクトすることは可能ですか? フォームが検証に失敗した場合、フォームが (ajax 経由で) 検証されるまで開いたままにしますか?

ありがとう

Answer 1

問題は、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>

CSS:

.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;
}

Jクエリ:

// 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');
});