javascript - 联系表格 7 mutistep - 返回第 1 步

Question

我正在使用联系表格 7 一个 wordpress 插件来创建一个多步骤表格。但是我需要在最后一步创建一个链接/按钮才能返回到第一步。下面是步骤 3 中显示的字段集。

<fieldset class="fieldset-cf7mls" data-cf7mls-order="0" style="height: 0px; overflow: hidden; opacity: 0; visibility: hidden;">
<fieldset class="fieldset-cf7mls" data-cf7mls-order="1" style="height: 0px; overflow: hidden; opacity: 0; visibility: hidden;">
<fieldset class="fieldset-cf7mls cf7mls_current_fs" data-cf7mls-order="2" style="height: auto; overflow: visible; opacity: 1; visibility: visible;">

步骤 1 中显示的字段集。

<fieldset class="fieldset-cf7mls cf7mls_current_fs" data-cf7mls-order="0" style="height: auto; overflow: visible; opacity: 1; visibility: visible;">
<fieldset class="fieldset-cf7mls" data-cf7mls-order="1" style="height: 0px; overflow: hidden; opacity: 0; visibility: hidden;">
<fieldset class="fieldset-cf7mls" data-cf7mls-order="2" style="height: 0px; overflow: hidden; opacity: 0; visibility: hidden;">

所以基本上我需要一个 JS 函数来替换步骤 3 到 1 中的字段集或任何其他方式，以便用户可以返回到步骤 1。

任何帮助，将不胜感激。

标签： javascriptwordpresscontact-form-7

Answer 1

(function($) {
    $("#review-application").click(function(){
        $('.wpcf7-response-output.wpcf7-display-none').removeClass('wpcf7-validation-errors').html('');
        $('.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok').hide();

        current_fs = $(this).closest('.fieldset-cf7mls');
        previous_fs = $('.fieldset-cf7mls[data-cf7mls-order="0"]');
        current_fs.css({
            height: '0px',
            overflow: 'hidden',
            opacity: '0',
            'visibility': 'hidden'
        }).removeClass('cf7mls_current_fs');
        previous_fs.css({
            height: 'auto',
            overflow: 'visible',
            opacity: '1',
            'visibility': 'visible'
        }).addClass('cf7mls_current_fs');

        var form = $(this).parent().closest('form.wpcf7-form');
        dhScrollTo(form);

        return false;
    });