WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

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

      2015/04/01

お問い合わせフォームを作るときに定番のプラグイン「Contact Form 7」ですが、そのままだとレスポンシブに対応していません。

ぐちゃぐちゃ。。

クラス、スタイルシートを追記することで簡単に対応できるのでメモ。

スポンサーリンク

 

クラスを追加

下記のように「Contact Form 7」のフォーム設定において下記のようにクラスを追加する。

例)form-widthというクラスを追加

で、スタイルシートに下記を追加。

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

これだけ。

あとついでに「送信」ボタンをフラットなデザインにしたいので、下記も追加。

.wpcf7-submit {
font-size: 1.2em;
padding: 5px 30px;
background-color: #248;
color: #fff;
border-style: none;
}

.wpcf7-submit:hover:enabled {
background-color: #24d;
color: #fff;
}

これで完成。.wpcf7-submit:hover:enabled は「承諾の確認」ボタンを押したときのみ送信ボタンがhover反応させるためのもの。

ほれできた。

 

 - WordPress

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

  関連記事

wordpress情報
ログイン画面のロゴを変更

クライアントに納品するようなサイトはWordPressのログイン画面のロゴをオリ …

wordpress情報
管理画面(ダッシュボード)のメニューの表示/非表示を手動で操作する方法

Webサイト作成後、クライアントに引き渡すとき、管理画面から不要なメニューは表示 …

wordpress情報
会員専用ページをつくる

会員専用ページをつくるにあたり、いろいろなプラグインがある。今回クライアントの要 …

wordpress情報
使用しているテンプレートファイル名を表示

WordPressのテーマを自分て作成しているとき現在表示されているのがどのテン …

wordpress情報
「Events Manager」プラグイン を使ってイベントカレンダーを作成する

「WordPress イベントカレンダー」で検索するといろんなイベントカレンダー …

wordpress情報
ログオフせずに簡単にユーザーを切り替える

会員制のサイトや、クライアントの権限を「編集者」として引き渡しする場合など、動作 …

wordpress情報
「Events Manager」の検索フォームにカスタム分類(カスタムタクソノミー)フィールドを追加する

イベントカレンダーのプラグイン「Events Manager」には絞り込み検索が …

wordpress情報
「Events Manager」でオリジナルのプレースホルダーを追加する

便利なイベントカレンダープラグイン「Events Manager」ですが、フォー …

wordpress情報
「Events Manager」の絞り込み検索フォームのリストの順序を変更する方法

イベントカレンダープラグイン「Events Manager」について便利な絞り込 …

wordpress情報
カスタムフィールドの値をOR条件で抽出

カスタム投稿を作成した時に、カスタムフィールドの条件をOR条件で抽出したかったり …