diff --git a/assets/css/frontend-form/layout2.css b/assets/css/frontend-form/layout2.css index de2252229..d9fba427e 100644 --- a/assets/css/frontend-form/layout2.css +++ b/assets/css/frontend-form/layout2.css @@ -284,24 +284,6 @@ body.mceContentBody{ text-shadow: none; padding: 10px 35px; } -.wpuf-form-add.wpuf-form-layout2 ul.wpuf-step-wizard { +.wpuf-form-add.wpuf-form-layout2 .wpuf-step-wizard { overflow: visible; } -.wpuf-form-add.wpuf-form-layout2 ul.wpuf-step-wizard li { - padding: 10px 30px 10px 40px; - border-radius: 0; -} -.wpuf-form-add.wpuf-form-layout2 ul.wpuf-step-wizard li:before { - margin-top: -14px; - border-left-color: #d5d3d3; -} -.wpuf-form-add.wpuf-form-layout2 ul.wpuf-step-wizard li:after { - border-width: 22px; - margin-top: -34px; - right: -40px; - border-radius: 0; -} -.wpuf-form-add.wpuf-form-layout2 ul.wpuf-step-wizard li.active-step:before { - border-left-color: #00a0d2; - right: -47px; -} diff --git a/assets/css/frontend-form/layout3.css b/assets/css/frontend-form/layout3.css index 0787378eb..378045900 100644 --- a/assets/css/frontend-form/layout3.css +++ b/assets/css/frontend-form/layout3.css @@ -260,27 +260,9 @@ box-shadow: 0 1px 0 #8726d3; text-shadow: none; } -.wpuf-form-add.wpuf-form-layout3 ul.wpuf-step-wizard { +.wpuf-form-add.wpuf-form-layout3 .wpuf-step-wizard { overflow: visible; } -.wpuf-form-add.wpuf-form-layout3 ul.wpuf-step-wizard li { - padding: 10px 30px 10px 40px; -} -.wpuf-form-add.wpuf-form-layout3 ul.wpuf-step-wizard li:before { - margin-top: -14px; -} -.wpuf-form-add.wpuf-form-layout3 ul.wpuf-step-wizard li:after { - border-width: 22px; - margin-top: -34px; - right: -40px; - border-radius: 0; -} -.wpuf-form-add.wpuf-form-layout3 ul.wpuf-step-wizard li.active-step { - background-color: #D5AED9; -} -.wpuf-form-add.wpuf-form-layout3 ul.wpuf-step-wizard li.active-step:after { - border-left-color: #D5AED9; -} ul.wpuf-form li .wpuf-fields #wpuf-insert-image-container a.wpuf-insert-image{ border-color: #d6c3dc; diff --git a/assets/css/frontend-form/layout4.css b/assets/css/frontend-form/layout4.css index bdbc406b5..af3b1c6cd 100644 --- a/assets/css/frontend-form/layout4.css +++ b/assets/css/frontend-form/layout4.css @@ -274,33 +274,10 @@ body.mceContentBody { text-shadow: none; } -.wpuf-form-add.wpuf-form-layout4 ul.wpuf-step-wizard { +.wpuf-form-add.wpuf-form-layout4 .wpuf-step-wizard { overflow: visible; } -.wpuf-form-add.wpuf-form-layout4 ul.wpuf-step-wizard li { - padding: 10px 30px 10px 40px; -} - -.wpuf-form-add.wpuf-form-layout4 ul.wpuf-step-wizard li:before { - margin-top: -14px; -} - -.wpuf-form-add.wpuf-form-layout4 ul.wpuf-step-wizard li:after { - border-width: 22px; - margin-top: -34px; - right: -40px; - border-radius: 0; -} - -.wpuf-form-add.wpuf-form-layout4 ul.wpuf-step-wizard li.active-step { - background-color: #D5AED9; -} - -.wpuf-form-add.wpuf-form-layout4 ul.wpuf-step-wizard li.active-step:after { - border-left-color: #D5AED9; -} - ul.wpuf-form li .wpuf-fields #wpuf-insert-image-container a.wpuf-insert-image { border-bottom: #c8c8c8; background: #f7f3fa; diff --git a/assets/css/frontend-form/layout5.css b/assets/css/frontend-form/layout5.css index de80a7cbe..815df0b21 100644 --- a/assets/css/frontend-form/layout5.css +++ b/assets/css/frontend-form/layout5.css @@ -300,32 +300,10 @@ body.mceContentBody { padding: 10px 35px; } -.wpuf-form-add.wpuf-form-layout5 ul.wpuf-step-wizard { +.wpuf-form-add.wpuf-form-layout5 .wpuf-step-wizard { overflow: visible; } -.wpuf-form-add.wpuf-form-layout5 ul.wpuf-step-wizard li { - padding: 10px 30px 10px 40px; - border-radius: 0; -} - -.wpuf-form-add.wpuf-form-layout5 ul.wpuf-step-wizard li:before { - margin-top: -14px; - border-left-color: #d5d3d3; -} - -.wpuf-form-add.wpuf-form-layout5 ul.wpuf-step-wizard li:after { - border-width: 22px; - margin-top: -34px; - right: -40px; - border-radius: 0; -} - -.wpuf-form-add.wpuf-form-layout5 ul.wpuf-step-wizard li.active-step:before { - border-left-color: #00a0d2; - right: -47px; -} - ul.wpuf-form li label.wpuf-form-sub-label { font-size: 12px; display: inline-block; diff --git a/assets/css/frontend-forms.css b/assets/css/frontend-forms.css index 5b8b2d27f..5a31e4099 100644 --- a/assets/css/frontend-forms.css +++ b/assets/css/frontend-forms.css @@ -1055,14 +1055,41 @@ body fieldset.wpuf-multistep-fieldset { body fieldset.wpuf-multistep-fieldset.field-active { display: block; } -body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-next-btn.btn.btn-primary { +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-next-btn, +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-prev-btn { position: absolute; bottom: 0; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 24px; + font-size: 16px; + line-height: 24px; + font-weight: 400; + border-radius: 0.375rem; + text-decoration: none; + cursor: pointer; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + border: none; + background-color: #99A7B2; + color: #ffffff; + text-shadow: unset; +} +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-next-btn:hover, +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-prev-btn:hover { + background-color: #7F8C96; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-next-btn:focus, +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-prev-btn:focus { + outline: none; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #99A7B2; +} +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-next-btn { right: 0; } -body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-prev-btn.btn.btn-primary { - position: absolute; - bottom: 0; +body fieldset.wpuf-multistep-fieldset button.wpuf-multistep-prev-btn { left: 0; } body fieldset.wpuf-multistep-fieldset a#wpuf-post-draft { @@ -1083,75 +1110,89 @@ body fieldset.wpuf-multistep-fieldset span.wpuf-loading { body .wpuf-multistep-progressbar { overflow: hidden; } -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard { +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-wizard { + display: flex; + align-items: flex-start; + justify-content: center; margin: 20px 0 40px 0; padding: 0; - list-style: none; } -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard * { +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-wizard * { box-sizing: border-box; } -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li { +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item { + display: flex; + flex-direction: column; + align-items: center; + flex-shrink: 0; +} +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-circle { + width: 36px; + height: 36px; + border-radius: 50%; + border: 2px solid #E4E4E4; + background-color: #fff; + color: #E4E4E4; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 600; + transition: all 0.3s ease; +} +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-label { + margin-top: 8px; + font-size: 13px; + color: #E4E4E4; + font-weight: 400; + white-space: nowrap; + transition: color 0.3s ease; +} +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-line { + flex: 1; + height: 2px; background-color: #E4E4E4; - border-radius: 5px; - display: inline-block; - padding: 10px 30px 10px 40px; - margin-right: -7px; - width: auto; - margin: 0; - position: relative; - text-align: center; + margin-top: 18px; + min-width: 40px; + transition: background-color 0.3s ease; } -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li::before, -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li::after { - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - border-color: transparent; - border-left-color: #fff; - border-radius: 10px; -} -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li::before { - border-width: 26px; - margin-top: -14px; - right: -52px; - z-index: 98; -} -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li::after { - border-left-color: #E4E4E4; - border-width: 25px; - margin-top: -37px; - right: -44px; - z-index: 99; -} -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li.active-step { +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-line-active { background-color: #00a0d2; - color: #fff; } -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li.active-step::after { - border-left-color: #00a0d2; +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.active-step .wpuf-step-circle, +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.completed-step .wpuf-step-circle { + background-color: #00a0d2; + border-color: #00a0d2; + color: #fff; } -body .wpuf-form .wpuf-multistep-progressbar ul.wpuf-step-wizard li:last-child::after { - border-left-color: transparent; +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.active-step .wpuf-step-label, +body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.completed-step .wpuf-step-label { + color: #333; + font-weight: 600; } -body .wpuf-form .wpuf-multistep-progressbar .ui-widget-header { - background: #00a0d2; +body .wpuf-form .wpuf-multistep-progressbar .wpuf-progressbar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + font-size: 14px; + font-weight: 600; + color: #333; } -body .wpuf-form .wpuf-multistep-progressbar.ui-progressbar { +body .wpuf-form .wpuf-multistep-progressbar .wpuf-progressbar-track { + width: 100%; + height: 10px; + background-color: #E4E4E4; + border-radius: 5px; + overflow: hidden; margin-bottom: 30px; - height: 25px; - border: 1px solid #eee; - position: relative; } -body .wpuf-form .wpuf-multistep-progressbar.ui-progressbar .wpuf-progress-percentage { - position: absolute; - left: 50%; - font-size: 12px; - font-weight: bold; - text-shadow: 1px 1px 0 #fff; - top: 20%; +body .wpuf-form .wpuf-multistep-progressbar .wpuf-progressbar-fill { + height: 100%; + background-color: #00a0d2; + border-radius: 5px; + width: 0; + transition: width 0.3s ease; } body input.wpuf-btn { text-decoration: none !important; diff --git a/assets/js/frontend-form.js b/assets/js/frontend-form.js index 2f30b4220..48d57f338 100644 --- a/assets/js/frontend-form.js +++ b/assets/js/frontend-form.js @@ -3,7 +3,11 @@ $.fn.listautowidth = function() { return this.each(function() { var w = $(this).width(); - var liw = w / $(this).children('li').length; + var count = $(this).children('.wpuf-step-item').length; + if ( count === 0 ) { + count = $(this).children('li').length; + } + var liw = w / count; $(this).children('li').each(function(){ var s = $(this).outerWidth(true)-$(this).width(); $(this).width(liw-s); @@ -179,39 +183,43 @@ if ( progressbar_type == 'progressive' && $('.wpuf-form .wpuf-multistep-fieldset').length != 0 ) { - var firstLegend = $('fieldset.wpuf-multistep-fieldset legend').first(); - $('.wpuf-multistep-progressbar').html('
' ); - - var progressbar = $( ".wpuf-multistep-progressbar" ), - progressLabel = $( ".wpuf-progress-percentage" ); - - $( ".wpuf-multistep-progressbar" ).progressbar({ - change: function() { - progressLabel.text( progressbar.progressbar( "value" ) + "%" ); - } - }); + var totalSteps = $('fieldset.wpuf-multistep-fieldset').length; + var barHtml = '
'; + barHtml += 'Step 1 of ' + totalSteps + ''; + barHtml += '0%'; + barHtml += '
'; + barHtml += '
'; + barHtml += '
'; + barHtml += '
'; + $( '.wpuf-multistep-progressbar' ).html( barHtml ); $('.wpuf-multistep-fieldset legend').hide(); } else { $('.wpuf-form').each(function() { var this_obj = $(this); var progressbar = $('.wpuf-multistep-progressbar', this_obj); - var nav = ''; + var stepCount = $('.wpuf-multistep-fieldset', this).length; + var nav = '
'; + + $('.wpuf-multistep-fieldset', this).each(function( index ){ + var stepNum = index + 1; + var isLast = ( stepNum === stepCount ); - progressbar.addClass('wizard-steps'); - nav += ''; + nav += '
'; progressbar.append( nav ); - - $('.wpuf-step-wizard li', progressbar).first().addClass('active-step'); - $('.wpuf-step-wizard', progressbar).listautowidth(); }); } @@ -248,26 +256,42 @@ $('fieldset.wpuf-multistep-fieldset').removeClass('field-active').eq(step_number).addClass('field-active'); - $('.wpuf-step-wizard li').each(function(){ - if ( $(this).index() <= step_number ){ - progressbar_type == 'step_by_step'? $(this).addClass('passed-wpuf-ms-bar') : $('.wpuf-ps-bar',this).addClass('passed-wpuf-ms-bar'); - } else { - progressbar_type == 'step_by_step'? $(this).removeClass('passed-wpuf-ms-bar') : $('.wpuf-ps-bar',this).removeClass('passed-wpuf-ms-bar'); - } - }); + if ( progressbar_type == 'step_by_step' ) { + // Update step items: completed, active, or inactive + $('.wpuf-step-item').each(function(){ + var itemStep = parseInt( $(this).data('step'), 10 ); + + $(this).removeClass('active-step completed-step'); + + if ( itemStep < step_number ) { + $(this).addClass('completed-step'); + } else if ( itemStep === step_number ) { + $(this).addClass('active-step'); + } + }); + + // Update connecting lines + $('.wpuf-step-line').each(function(){ + var afterStep = parseInt( $(this).data('after-step'), 10 ); - $('.wpuf-step-wizard li').removeClass('wpuf-ms-bar-active active-step completed-step'); - $('.passed-wpuf-ms-bar').addClass('completed-step').last().addClass('wpuf-ms-bar-active'); - $('.wpuf-ms-bar-active').addClass('active-step'); + $(this).removeClass('wpuf-step-line-active'); + + if ( afterStep < step_number ) { + $(this).addClass('wpuf-step-line-active'); + } + }); + } var legend = $('fieldset.wpuf-multistep-fieldset').eq(step_number).find('legend').text(); legend = $.trim( legend ); if ( progressbar_type == 'progressive' && $('.wpuf-form .wpuf-multistep-fieldset').length != 0 ) { - var progress_percent = ( step_number + 1 ) * 100 / $('fieldset.wpuf-multistep-fieldset').length ; - var progress_percent = Number( progress_percent.toFixed(2) ); - $( ".wpuf-multistep-progressbar" ).progressbar({value: progress_percent }); - $( '.wpuf-progress-percentage' ).text( legend + ' (' + progress_percent + '%)'); + var totalSteps = $('fieldset.wpuf-multistep-fieldset').length; + var progressPercent = Math.round( ( step_number + 1 ) * 100 / totalSteps ); + + $( '.wpuf-progressbar-step-text' ).text( 'Step ' + ( step_number + 1 ) + ' of ' + totalSteps ); + $( '.wpuf-progressbar-percent' ).text( progressPercent + '%' ); + $( '.wpuf-progressbar-fill' ).css( 'width', progressPercent + '%' ); } // trigger a change event diff --git a/assets/less/frontend-forms.less b/assets/less/frontend-forms.less index af03225b1..082ac47be 100644 --- a/assets/less/frontend-forms.less +++ b/assets/less/frontend-forms.less @@ -1172,15 +1172,43 @@ table.wpuf-table { display: block; } - button.wpuf-multistep-next-btn.btn.btn-primary { + button.wpuf-multistep-next-btn, + button.wpuf-multistep-prev-btn { position: absolute; bottom: 0; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 24px; + font-size: 16px; + line-height: 24px; + font-weight: 400; + border-radius: 0.375rem; + text-decoration: none; + cursor: pointer; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + border: none; + background-color: #99A7B2; + color: rgb(255, 255, 255); + text-shadow: unset; + + &:hover { + background-color: #7F8C96; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + } + + &:focus { + outline: none; + box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 0 4px #99A7B2; + } + } + + button.wpuf-multistep-next-btn { right: 0; } - button.wpuf-multistep-prev-btn.btn.btn-primary { - position: absolute; - bottom: 0; + button.wpuf-multistep-prev-btn { left: 0; } @@ -1209,87 +1237,103 @@ table.wpuf-table { .wpuf-form .wpuf-multistep-progressbar { @stepBackground: #00a0d2; + @stepInactive: #E4E4E4; - ul.wpuf-step-wizard { + .wpuf-step-wizard { + display: flex; + align-items: flex-start; + justify-content: center; margin: 20px 0 40px 0; padding: 0; - list-style: none; * { box-sizing: border-box; } + } - li { - background-color: #E4E4E4; - border-radius: 5px; - display: inline-block; - padding: 10px 30px 10px 40px; - margin-right: -7px; - width: auto; - margin: 0; - position: relative; - text-align: center; + .wpuf-step-item { + display: flex; + flex-direction: column; + align-items: center; + flex-shrink: 0; + } - &::before, - &::after { - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - border-color: transparent; - border-left-color: #fff; - border-radius: 10px; - } + .wpuf-step-circle { + width: 36px; + height: 36px; + border-radius: 50%; + border: 2px solid @stepInactive; + background-color: #fff; + color: @stepInactive; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 600; + transition: all 0.3s ease; + } - &::before { - border-width: 26px; - margin-top: -14px; - right: -52px; - z-index: 98; - } + .wpuf-step-label { + margin-top: 8px; + font-size: 13px; + color: @stepInactive; + font-weight: 400; + white-space: nowrap; + transition: color 0.3s ease; + } - &::after { - border-left-color: #E4E4E4; - border-width: 25px; - margin-top: -37px; - right: -44px; - z-index: 99; - } + .wpuf-step-line { + flex: 1; + height: 2px; + background-color: @stepInactive; + margin-top: 18px; + min-width: 40px; + transition: background-color 0.3s ease; + } - &.active-step { - background-color: @stepBackground; - color: #fff; + .wpuf-step-line-active { + background-color: @stepBackground; + } - &::after { - border-left-color: @stepBackground; - } - } + .wpuf-step-item.active-step, + .wpuf-step-item.completed-step { + .wpuf-step-circle { + background-color: @stepBackground; + border-color: @stepBackground; + color: #fff; + } - &:last-child::after { - border-left-color: transparent; - } + .wpuf-step-label { + color: #333; + font-weight: 600; } } - .ui-widget-header { - background: @stepBackground; + .wpuf-progressbar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + font-size: 14px; + font-weight: 600; + color: #333; } - &.ui-progressbar { + .wpuf-progressbar-track { + width: 100%; + height: 10px; + background-color: @stepInactive; + border-radius: 5px; + overflow: hidden; margin-bottom: 30px; - height: 25px; - border: 1px solid @borderColor; - position: relative; + } - .wpuf-progress-percentage { - position: absolute; - left: 50%; - font-size: 12px; - font-weight: bold; - text-shadow: 1px 1px 0 #fff; - top: 20%; - } + .wpuf-progressbar-fill { + height: 100%; + background-color: @stepBackground; + border-radius: 5px; + width: 0; + transition: width 0.3s ease; } } input.wpuf-btn { diff --git a/class/render-form.php b/class/render-form.php index c32c9d305..0465721d6 100644 --- a/class/render-form.php +++ b/class/render-form.php @@ -529,52 +529,8 @@ public function render_items( $form_vars, $post_id, $type, $form_id, $form_setti - - - - -
- -
- -
- -
- $form_field ) { diff --git a/includes/Render_Form.php b/includes/Render_Form.php index 6f47bc4cb..06d58c472 100644 --- a/includes/Render_Form.php +++ b/includes/Render_Form.php @@ -386,53 +386,6 @@ public function render_items( $form_vars, $post_id, $type, $form_id, $form_setti - - - - -
- -
- -
- -
- $form_field ) { // check field visibility options