ちょっと人とは目線を変えてあえて問い合わせフォームに使うContactForm7のカスタマイズとしてSlider Revolutionと合体させる複合技をご紹介。
1. Contact Form 7プラグインをインストールして有効にします。
2. 新しいスライダーを作成し、カスタムグリッドサイズを有効にする
3.テキスト/ HTMLレイヤにContactForm7のショートコードを追加します。
4.レイヤのフォント色、フォントサイズ、および位置を調整します。
6.各レスポンシブビューポートの固定幅を設定します
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″]
