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情報
特定のページのみSSLに対応させる

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

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

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

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

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

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

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

wordpress情報
Contact Form 7の初期値をクエリストリングから取得する

お問い合わせフォームを作成するときよく使うプラグイン「Contact Form …

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

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

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

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

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

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

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

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

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

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