【コピペOK】コンタクトフォーム7の送信ボタンをカスタマイズをしよう!

Web

WordPressでお手軽にコンタクトフォームが作れるコンタクトフォーム7。

WordPressでブログを運用している方は、ほとんどの人が導入しているのではないでしょうか?

特にカスタマイズをしなくても問題はないのですが、ちょっとしたカスタマイズをすることでユーザーの使い勝手がよくなります!

特にお問い合わせが欲しい人などは、コンタクトフォームのデザインを変えるだけでお問い合わせ率が上がります。

そこで今回は、コンタクトフォーム7の送信ボタンのカスタマイズをしてみたいと思います。

そのままコピペをして使ってもよし!

あなたの好きなようにさらにカスタマイズをしてもよし!

あなたのブログに訪れたユーザーが押してみたい!と思う送信ボタンを作ってみましょう♪

この記事は、すでにコンタクトフォーム7を使っていて、送信ボタンのカスタマイズをしてみたいと思っている人に向けての内容となります。

コンタクトフォーム7とは?

コンタクトフォーム7とは、お手軽にお問い合わせフォームを作ることができるWordPressのプラグインです。

自分でお問い合わせフォームを作るのは、専門的な知識が必要なため実装が難しいですが、コンタクトフォーム7を使えば簡単に高機能なお問い合わせフォームが作ることができます。

ブログを運営していて、お問い合わせフォームを設置していない人はぜひ使ってみてください♪

コンタクトフォーム7 送信ボタンのカスタマイズ

カスタマイズ前の送信ボタン

カスタマイズ前の送信ボタン

カスタマイズするのは上記画像の赤枠で囲まれた箇所です。

このままでもいいですが、小さいしちょっと味気ないですよね。

ユーザーにもっとわかりやすくアピールしたいです。

使っているWordPressテーマによってデザインが違います。

カスタマイズ後の送信ボタン

カスタマイズ後の送信ボタン

カスタマイズをするとこんな感じになります。

わかりやすくて、押しやすいですよね!

ボタンに薄っすらと影をつけてることによって、ちょっとリッチな雰囲気に!

またマウスオーバーすることで、色が徐々に変わるように設定しています。

実際に動きなどは、下記ページより確認してみてください。

»お問い合わせフォームサンプルへ

送信ボタンをカスタマイズしてみよう!HTML編

HTMLの編集

まずはコンタクトフォーム7のフォーム編集画面をカスタマイズしていきます。

と言ってもやることは簡単で、送信ボタンの箇所を、<div class=”btn-submit”>[submit “送信”]</div>にするだけです。

めんどくさい方は下記をコピペしてください。

これを保存したら次にCSSのカスタマイズをしていきます。

送信ボタンをカスタマイズしてみよう!CSS編

次にCSSのカスタマイズをしていきます。

とりあえず下記をコピペしてもらえたらOKです!

背景色・文字色などは、このブログに合わせているので、張り付けた後にあなたのブログに合わせたカラーにカスタマイズしてみてください。

どこにコピペすればいいの!?

コピペする場所がわからない!って方は下記参考にしてみてください。

ただ使ってるテーマによって、違うかもしれないのであくまで参考までに!

コピペする場所

WordPressの管理画面→外観→テーマエディター→style.cssにコピペ

大体のテーマはこれでいけると思います!

まとめ

うまく送信ボタンのカスタマイズできましたでしょうか!?

ただあまりにもカスタマイズに時間がかかるWordPressテーマを使っているようでしたら、いっそのことテーマを変えちゃうのもあります。

カスタマイズはそこそこにして、記事を書くことに集中したいですからね!

僕はswallow(スワロー)というテーマを使っていますが、元からキレイにできているテーマなので記事執筆に集中できてオススメです。

オススメのテーマについては、下記記事を参考にしてみてください♪

»WordPressのおすすめテーマを紹介!目的に合ったテーマを選んでモチベーションアップ!

スポンサードリンク