運用しているワードプレスのContact Form 7(送信ボタン)にCSSデザインを適用する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Contact Form 7プラグインでお問い合わせフォームを導入してみたけど送信ボタンの見た目が寂しい。そんな時にぜひ活用したいのが「テーマ側」であらかじめ準備されているCSSデザインを適用して見た目を切り替えてしまうというテクニックです。今回は本サイトで使用している「賢威」というテーマを参考にしながらボタンデザインのcss(class属性)を適用していきます。どんなテーマでも大半がすでに用意されているCSS(class)がありますのでぜひご利用中のテーマに合わせて適用してみてくださいませ。

ちなみに賢威では上記のボタンCSSパターンが準備されていました。豊富なカラーでありがたい限りですね。では前回にお問い合わせフォームを導入したContact Form 7の送信ボタンへ見た目を適用していきましょう。ちなみに現在はCSSを適用していない状態なのでシンプルな見た目となっています。

現在の状態でも悪くはありませんが、閲覧者によっては「送信ボタンと認識してもらえない可能性」がありそうです。念のためにContact Form 7の公式サイトも覗いてみましたが、送信ボタンに対して「CSSのclass属性」を追加できると記載されていました。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

ちなみに「賢威」ではボタンにCSSを適用する際は以下となるようです。

▼矢印あり
<a href="#" class="btn dir-arw_r btn_bluegreen"><span class="icon_arrow_s_right"></span>送信ボタン</a>

▼矢印なし
<a href="#" class="btn btn_bluegreen">送信ボタン</a>

矢印ありの方だと「spanタグ」が「aタグ」内側に必要だったり複雑な設置になってしまいますのでここでは「矢印なし版」を適用していきます。

では早速、Contact Form 7のフォーム画面を開いていきましょう。

フォームの一覧が開いたら該当データを選びクリックして画面を開きます。

次にsubmitボタンに指定の方法でCSSを追記していきましょう。

公式サイトの記述方法に従ってCSSのclass属性を追加していきます。賢威ではclassを2つ追加する必要がありますので以下の記述となります。

- 超快速なワードプレスを運営しませんか?【AD】-

念のために作業用としてコピペできるソースも掲載しておきますね。

[submit class:btn class:btn_bluegreen "上記内容で送信する"]

CSSの追記が終わったら最下部の「保存」ボタンを押して完了です。

最後にページを確認してみましょう。

ばっちり反映されていますね。

念のため色別でのソースコードを置いておきますのでぜひご活用ください。

▼オレンジ
[submit class:btn class:btn_orange "上記内容で送信する"]

▼グリーン
[submit class:btn class:btn_bluegreen "上記内容で送信する"]

▼グレー
[submit class:btn class:btn_gray "上記内容で送信する"]

▼ブルー
[submit class:btn class:btn_style03 "上記内容で送信する"]

▼ホワイト1(白ベース)
[submit class:btn class:btn_style01 "上記内容で送信する"]

▼ホワイト2(薄灰ベース)
[submit class:btn class:btn_style02 "上記内容で送信する"]

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください