重力表单-自定义进度条？

Question

有人能给我解释一下修改一个重力表单进度条需要哪些代码吗？我想要更改默认的进度条，以便对每个步骤使用自定义图形。

开始：

​

步骤1：

​

第2步：

我试着遵循这个gravity forms page，但我的网站上的指示不起作用。

代码：

 add_filter( 'gform_progress_bar', 'my_custom_function', 10, 3 );
 function my_custom_function( $progress_bar, $form, $confirmation_message ) 
 {

      $progress_bar =
           '<ul>
                <li>Page 1</li>
                <li>Page 2</li>
                <li>Page 3</li>
            </ul>';

      return $progress_bar;
 }

有什么想法吗？

Answer 1

也许可以试试这样的东西：

add_filter( 'gform_progress_bar', 'custom_progress_bar', 10, 3 );
function custom_progress_bar( $progress_bar, $form, $confirmation_message ) {

    $current_page = GFFormDisplay::get_current_page( $form['id'] );

    if($current_page == 1) {
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 2){
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 3){
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 4){
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 5){
        $progress_bar = '<img src="path/to/image">';
    }

    return $progress_bar;
}

下面提供的示例代码是我用来仅在第一页隐藏进度条，但在其余页面显示进度条的代码。我相信你应该能够为你的每个页面返回你的步骤的图像：

add_filter( 'gform_progress_bar', 'hide_progress_bar_wrap', 10, 3 );
function hide_progress_bar_wrap( $progress_bar, $form, $confirmation_message ) {

    $current_page = GFFormDisplay::get_current_page( $form['id'] );

    if($current_page == 1) {
        $progress_bar = '<span class="wrap_progress_bar" style="visibility:hidden;display:none">'.$progress_bar.'</span>';
    }

    return $progress_bar;
}

希望它能起作用！

Answer 2

重力表单现在已将其内置为其设置。您可以简单地将进度条调整为设置中的步骤，然后根据需要将其他CSS应用于样式。不需要为此使用自定义图形。

​

​