ちょっと人とは目線を変えてあえて問い合わせフォームに使う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″]
2017年1月17日