どうも、そろそろボーナス前のエアコン安売りセールに便乗しようとおもっています。よっしぃーです。

私はよくお問い合わせでContactForm7を使わしてもらっています。確認画面に飛ばないとかいうことがあって、クライアントによってはこういうのも嫌う人もいるんですが、
予約や注文ではない限り別に送り直せばいいんだしいいんじゃないかな、とかカンタンに思ってしまいます。

ただ、このプラグインの出るモーションがカッコ悪いのなんのって・・・。
毎回色々試しているんですが、いい加減その時間ももったいないので１つシンプルでオシャレめなものを作ったので公開しようと思います。

css

[html]
body .wpcf7-not-valid{
    background: #FDD;
}

body div.wpcf7-response-output{
    position: relative;
    margin-right: 0;
    margin-left: 3em;
    opacity: 0;
}

body div.wpcf7-response-output[role=alert]{
    border: none;
    margin-right: 0.5em;
    margin-left: 0.5em;
    opacity: 1;
    transition: all .5s ease-in-out;
}

body div.wpcf7-response-output[role=alert]:before{
    content: "\002716";
    margin-right: 0.5em;
    color: #F99;
    vertical-align: middle;
}

body div.wpcf7-mail-sent-ok[role=alert]:before{
    content: "\002714";
    color: #3F7;
}

body div.wpcf7-response-output:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all .5s ease-in-out;
}

body div.wpcf7-mail-sent-ok[role=alert]:after{
    width: 100%;
    border-bottom: solid 1px #3F7;
}
[/html]

これをcssに入れましょう。

 

当たり障りのない軽めな色をつけております。色はご自由に変えてください。

コンタクトフォームの動きのテンプレってなかなかないんですよねぇ。。。
もうコンタクトフォームなのかどうかわからないところまで変えることもあるんですが、
カスタマイズしやすいテンプレとしてはこれくらいがちょうどいいのかなと思ってます。

はやいもので６月も終わってしまいますね。
Windows10や次の新しいWeb環境が夏くらいにいろいろ出てくる気がするので、今のうちに頭の整理しないとですねぇ(´・ω・)

【追記:2015.10.07】

transitionの対応ブラウザが、すでにベンダープレフィックスを必要としなくなったので書き換えました。