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情報
管理画面(ダッシュボード)のメニューの表示/非表示を手動で操作する方法

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

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

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

wordpress情報
「Events Manager」の検索フォームにイベント属性フィールドを追加する

以前「Events Manager」の検索フォームにカスタム分類のフィールドを追 …

wordpress情報
特定のページのみSSLに対応させる

申し込みページに住所等の個人情報を入力する場合は、情報流出を防ぐためSSLを導入 …

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

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

wordpress情報
「Events Manager」で現在開催中のイベントを示すプレースホルダーを作成する

以前に「Events Manager」でオリジナルのプレースホルダーを追加するに …

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

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

wordpress情報
カスタム投稿をプラグインを使って実装し抽出する

WordPressでブログだけでなく通常のコーポレートサイトのようなページを作成 …

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

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

wordpress情報
「Events Manager」の絞り込み検索ページへリンク(条件込み)を張る方法

イベントカレンダーに欠かせないプラグイン「Events Manager」。今回は …