contactform7のエラーや送信完了をちょっとオシャレにしてみた

///contactform7のエラーや送信完了をちょっとオシャレにしてみた

contactform7のエラーや送信完了をちょっとオシャレにしてみた

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

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

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

css

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;
}

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

 

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

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


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


【追記:2015.10.07】

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

2016-10-20T00:14:20+00:002015/06/25|Categories: WEB, Wordpress|Tags: |

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください