ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Contact Form 7をレスポンシブ対応にするレシピ

November 26 2014

WordPressを使ったサイト制作の際にフォームメールをつけたい、となると
まず使うのがプラグインであるContact Form 7。

最近ではテーマの中に最初から組み込まれてる事も多くて、
それなりに認知度も上がってきてるようで、けっこう使う事も多い。

テーマに組み込まれてる場合はテーマ作成者によって
ちゃんとCSSで装飾もされてて、レスポンシブ対応になってる事も多いけど
イチからテーマを作ったりとか「そこまでやってねえよ」ってテーマを
使った場合にちゃんとこいつも作り込んでやらなければいけません。

今回もレスポンシブ対応テーマを作ってて
「あれ、スマホで見たらはみ出してるやん」という事があったので
まずは公式サイトを訪れてみた。

コンタクトフォームはWordpressの管理画面からいくらでも作れるのだけど
フォームタグを発行する時にクラスやID割り当てたりとか、
各部品にそれぞれちゃんとオプションパラメータが用意されてる事を知りました。

http://contactform7.com/ja/text-fields/

んじゃあ、って事でまずはタグ発行の画面で
text text-10 class:form-widthみたいにクラスを割り当ててあげて、

CSSを

.form-width  { max-width: 90%;}

としてあげれば、画面からはみ出さずにちゃんと縮んでくれました。
これだけ自由度が高いとそりゃみんな使いますわねこれ。

| Posted in Wordpress | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Apr 2017 May 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31