ContactForm7のフォーム幅を指定する

ContactForm7のフォーム幅を指定する

今更紹介するまでもないWordPressのお問い合わせプラグインの鉄板、Contact Form 7。サイドバーなど小さなスペースに入れ込みたかったので幅の調整方法を調べてみました。


style.cssにちょこっと記述するだけ!

.wpcf7-form input{width: 270px !important;} /*名前、メール、題名*/
.wpcf7-form textarea{width: 270px !important;} /*本文*/
.wpcf7-form .wpcf7-submit{width: 50px !important;} /*送信ボタン*/

style.cssのほうがContactForm7のスタイルシートよりも先にきてるから!importantをつけたほうがいいのかな?

わざわざ記事にすることじゃないかもしれないけど、自分用備忘録として。

公開日:2012/03/20

1件のピンバック

4件のコメント

  1. TaTan より:

    早速使わせていただきました(^^)
    情報ありがとうございます。

    • you より:

      TaTanさん、コメントありがとうございます。
      お役に立てて嬉しいですー!

  2. りゅ~ より:

    参考になりました。
    「.wpcf7-submit」という指定も必要なんですね。
    スマホの画面の幅に合わせようとして悪戦苦闘していたので、助かりました!

    • *you より:

      りゅ~さん、コメントありがとうございます!
      だいぶ昔に書いたものなので自分でも「そうだったのか」という気分に陥ってしまいましたw
      ともあれお役に立てて光栄ですー!


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。