この記事は2014年9月14日に書いたもので、内容が古い可能性がありますのでご注意ください

【WEB】フォームには別途レスポンシブ対応が必要なのか!

WEBサイトがパソコンだけじゃなくて、iPadやら、スマホやら、いろんな大きさの画面で見られるようになったので、最近では、閲覧している画面の大きさに合わせて、中身が伸縮する仕組みになってるサイトが増えています。こういうのをレスポンシブデザインというのですが、どういう仕組みでそういうこと(相手に合わせて幅を変える)をさせてるのか、実は知りません。

だけど、うちはショップ以外は全部WordPressで作ってて、そのテーマをレスポンシブ対応のに変えてるから、スマホで見てもだいじょうぶ!と思っていたのですが。今日、投稿フォームの入力欄が、スマホで見るとだ〜っと横にはみ出て、説明が切れて読めなくなってるのを発見してしまいました!

それが、お電話をいただいたお客様に今日中に見てもらいたいアンケートフォームだったので、けっこう焦りまくり。久しぶりに緊張した!(笑)

問題はふたつあって、ひとつはレイアウトに使ってたtableタグのレスポンシブ対応。ふたつめは、入力欄の文字数指定の問題でした。

(1)tableタグのレスポンシブ対応
tableの幅をパーセントにしとけば、だいたい計算してそれなりにやってくれるんだろうと思ったのは、甘かった。どうやらそういう仕組みじゃないようで。
tableをCSSで対応させる方法もあるようだけど、めんどくさいのでtableやめてdivで積むことにしました。

(2)テキストフィールドやテキストエリアの幅のレスポンシブ対応
文字数を指定しないとだーっと長くなるし、スマホではみ出さない幅に指定すると今度はPCで見た時に短くて変。これもそのままでは対応できないようです。

私の場合は、一般的なフォームじゃなくて、WordPressのContactform7というプラグインを使っているので、それ専用のこういう解決法を見つけて一発クリアできました。CSSでContactform7のフォームの幅を一括で指定する方法です。今まで、フォームの幅は記入内容に応じた長さにしてたけど、これを使うと全部同じ幅で揃って「整列!」って感じになるので、気に入りました。
  ↓
【WordPress】Contact Form 7プラグインのフォーム(box)の幅をレスポンシブテーマに合わせる

という改造をほどこしたのが、こちらのアンケートフォームです。

だけどそもそも、スマホから注文もらったのに返信メールが届かないから、これを使う羽目になるわけで。
昔はガラケーでPCメールが受信できない人は多くて、それはまあ仕方ないなと思ったけど、スマホになってもまだPCメール拒否がデフォルトってどういうことー。Docomoさんとか。なんとかしてください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク