MW WP Form　進行状況設置方法　コピペOK | 福岡のホームページ制作はマリオ君にお任せ

入力ページ
class="mw_wp_form_input"

確認ページ
class="mw_wp_form_confirm"

完了ページ
class="mw_wp_form_complete"

<div class="mailmenu">
    <ul>
        <li class="con01">
            <span>01</span>
            <p>入力</p>
        </li>
            <li class="con02">
            <span>02</span>
        <p>内容確認</p>
        </li>
        <li class="con03">
            <span>03</span>
            <p>送信完了</p>
        </li>
    </ul>
</div>

.mailmenu{
	
	max-width: 1200px;
	margin: 0 auto 50px;
    @media screen and (max-width: 767px) {
        margin: 0 0 30px;
    }

	ul{
		
		display: flex;
		position: relative;
		justify-content: space-between;
		max-width: 70%;
		margin: 0 auto;
		@media screen and (max-width: 767px) {
			max-width: 100%;
		}
        &::after{

            content: '';
            display: block;
            width:calc(100% - 40px);
            height: 1px;
            background:#EEE ;
            position: absolute;
            top: 30px;
            left:20px;
        }
		
	}
	
	li{
		width: 86px;
		text-align: center;

		
		span{
			

			width: 60px;
			height: 60px;
			font-size: 2.3rem;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			background: #EEE;
			margin: 0 auto 10px;
			color: #FFF;
			border-radius: 50%;
			line-height: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 2;
		}
		p{
			
			color: #EEE;
		}
	}
}

//入力画面
.mw_wp_form_input .mailmenu li.con01{
		
		span{
			
			background: #2296DF;
		}
		p{
			color: #222;
		}
}



//確認画面 変更または消す
.mw_wp_form_confirm .mailmenu li.con02{
		
		span{
			
			background: #2296DF;
		}
		p{
			color: #222;
		}
}


//送信完了
.mw_wp_form_complete .mailmenu li.con03{
		
		span{
			
			background: #2296DF;
		}
		p{
			color: #222;
		}
}