HOME > CSS > Contact Form 7の送信完了画面をCSSで整える

Contact Form 7の送信完了画面をCSSで整える

Contact Form 7の内容送信完了画面は、空欄になったフォームの送信ボタン下に、送信完了メッセ―が出るだけのシンプルなもの。

この画面だとメッセージに気づかなかった場合、もう一度フォームに入力しなければいけないように見えてしまう。

そこでCSSを追加して、送信メッセージ表示をフォームに重ねて表示させて、わかりやすくしました。

/* 送信後 */
form.wpcf7-form.sent{
	position: relative;
}
.wpcf7 form.sent .wpcf7-response-output {
    margin: 0;
    border-color: rgba(256,256,256,0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(256,256,256,0.9);
	color: #000;
    font-size: 2rem;
}