ちょっと人とは目線を変えてあえて問い合わせフォームに使うContactForm7のカスタマイズとしてSlider Revolutionと合体させる複合技をご紹介。

1. Contact Form 7プラグインをインストールして有効にします。

2. 新しいスライダーを作成し、カスタムグリッドサイズを有効にする

3.テキスト/ HTMLレイヤにContactForm7のショートコードを追加します。

コンタクトフォームの編集

Slider Revolution contact

4.レイヤのフォント色、フォントサイズ、および位置を調整します。

Slider Revolution setup

Slider Revolution-setup 2

6.各レスポンシブビューポートの固定幅を設定します

Slider Revolution setyp3

7.スライダーのカスタムCSSセクションの調整に以下のCSSを追加します

ほとんどのテーマにはContactFomr7の要素の既定のスタイルが含まれています。したがって、Styleの調整は必要ありません。しかし、以下のCSSで問い合わせフォームのカスタムスタイルをより細かく制御できるようにします。

/* ******************* */
/* FITTING ADJUSTMENTS */
/* ******************* */
 
/* default height for <textarea> message field */
.rev_slider .wpcf7-textarea {height: 200px}
 
/* <textarea> message field height for below desktop viewport */
@media screen and (max-width: 960px) {.rev_slider .wpcf7-textarea {height: 100px}}
 
/* **************** */
/* OPTIONAL STYLING */
/* **************** */
 
/* form background color */
.rev_slider .wpcf7 {
 
    background: #fff;
    padding: 20px 20px 1px;
 
}
 
/* spacing between the label and the field */
.rev_slider .wpcf7-form-control-wrap {top: 5px}
 
/* text input and textarea fields */
.rev_slider .wpcf7-text,
.rev_slider .wpcf7-textarea {
 
    color: #686868;
    font-family: inherit;
    background: #f7f7f7;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    padding: 12px;
    width: 100%;
 
}
 
/* on-focus styles for text input and textarea fields */
.rev_slider .wpcf7-text:focus,
.rev_slider .wpcf7-textarea:focus {
 
    color: #1a1a1a;
    background-color: #fff;
    border-color: #007acc;
    outline: 0 none;
 
}
 
/* submit button */
.rev_slider .wpcf7-submit {
 
    color: #fff;
    background: #1a1a1a;
    border: 0 none;
    border-radius: 2px;
    font-family: inherit;
    padding: 12px;
    text-transform: uppercase;
 
}
 
/* submit button on mouseover */
.rev_slider .wpcf7-submit:focus {
 
    background: #007acc;
 
}

ここからショートコードを取得して貼り付けます。

Slider RecolutionVer5.3.1.5の日本語化ファイル:[download id=”9998″]



一番上へスクロールするボタンを有効または無効にする