【Contact Form 7】送信ボタンをAmazon風ボタンにカスタマイズしてみる

ことの発端は友人より

Contact Formで作った特典申請フォームの送信ボタンって、Amazon風のボタンにすることってできるの?

という質問をたまわり

「できるよ〜」
と、軽いノリで返事をしたものの…。

Amazon風のボタン。
いわゆる「カートに入れる」というコレですね。

しかし、よくよく友人の話を聴いてみると、友人がが望むのはWEB2.0風のAmazon風ボタン。
ショッピングカートに入れる」というコレ。

せっかくなのでフラットデザインタイプのCSS版Contact Formの送信ボタンと、WEB2.0風の画像版Contact Formの送信ボタン。
2種類を作ってみました。

CSS版見本

ちなみに現代風フラットデザインを踏襲したCSS版送信ボタンは、イチから自分でCSSソースを作成したわけではなく、こちらの記事を参考に(というか、ほぼコピペ)させていただきました。

参考Amazon「ほしい物リスト」ボタンを作る方法!あのボタンを自作する! – 生活情報オンライン
参考cssで作るあのサイトのあのボタンみたいなボタン – FOXISM

画像版見本

Amazon風ボタン画像をご利用の方は、右クリックで保存してくださいませ。

ContactForm 7の送信ボタン CSS版Amazon風カスタマイズサンプル

当サイトのWordPressのテーマは「Simplicity」を使用中(2018年2月現在)。
Simplicity以外のWordPressテーマでもお使いいただけると思いますが、Simplicity以外のWordPressテーマにて動作確認をしておりませんので、ご利用の際は個人の責任でよろしくお願いいたします。

送信ボタンにFont Awesome を挿入する方法

Simplicity をお使いの場合、Font Awesomeのインストール等の初期設定は不要。

ですが、Simplicity で設定されているFont Awesome のバージョンが最新でないことがあるので、使いたいWEBフォントが対応していない場合は、header.php(子テーマ)に新しいバージョンを記入してください。

header.php(<head>内)に下記を記入。

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">

2018年2月28日現在:FontAwesome の最新版は 5.0.7。

参考FontAwesomeの最新版の確認はこちら

次にstyle.css(子テーマ)にCSSを追記

/* 送信ボタンにFontAwesome */
input[type=submit] {
  font-family: FontAwesome;
}

そしてFont Awesome Icon 一覧で使いたいWEBフォントを探す。

今回は「(play-circle)」を使用しています。

f144」をコピー。

Contact Formの送信ボタン箇所に先ほどコピーした「f144」に「&#x」を加える。

[submit class:amzn-btn "&#xf144; プレゼントを受け取る"]

Amazon風ボタンCSS版のカスタマイズまとめ

完成品・サンプル

HTML・フォームタグ

ContactFormのフォーム箇所にコピペしてお使いください。

<div class="center">[submit class:amzn-btn "&#xf144; プレゼントを受け取る"]</div>

CSS

お使いのWordPressテーマ(または子テーマ)にコピペしてください。

/* 送信ボタンにFontAwesome */
input[type=submit] {
    font-family: FontAwesome;
}

/* Amazon風送信ボタン */
input.amzn-btn {
    background: rgb(243,208,120);
    background: -webkit-linear-gradient(top,rgba(240,193,75,0.9),rgba(247,223,165,0.9));
    background: linear-gradient(to bottom,rgba(247,223,165,0.9),rgba(240,193,75,0.9));
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
    border-radius: 3px;  
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
    border-color: #a88734 #9c7e31 #846a29;
    border-style: solid;
    border-width: 1px;
    width: 300px;
    height: 80px;
    color: #111;
    font-size: 1.2em;
    font-weight: bold;
}

/* Amazon風送信ボタンホバー */
input.amzn-btn:hover {
    background: -webkit-linear-gradient(top,rgba(240,193,75,1),rgba(247,223,165,1));
    background: linear-gradient(to bottom,rgba(247,223,165,1),rgba(240,193,75,1));
}

/* Amazon風送信ボタンアクティブ */
input.amzn-btn:active {
    box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
}

/* 送信ボタン中央寄せ */
.center {
    text-align:center;
}

送信ボタン以外のCSSデザインはこちらの記事をどうぞ。

主にSimplicity で使えるContact Form 7用CSSデザインテンプレートを掲載していますが、Simplicity以外のWo...

ContactForm 7の送信ボタン 画像版Amazon風カスタマイズサンプル

text-indent: -9999px;」使ってます。すんません。
text-indent: -9999px;」を使わないやり方も検討してみたのですが、うまく表示されず……。

もしもGoogle先生にインデックスから弾かれたとしても、お申込フォームだし、記事本文(メインコンテンツ)じゃないしいいかな?
と、自己正当化しております。ハイ。

どうしても「text-indent: -9999px;」に抵抗がある方は、下記サイトをご参考くださいませ。

参考css3でtext-indent:-9999px;を使わず画像に置き換える方法をご紹介
参考[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス

text-indent: -9999px;」を使わずに送信ボタン画像が表示できる方法があれば、教えて下さいませ。

Amazon風ボタン画像版のカスタマイズまとめ

完成品・サンプル

HTML・フォームタグ

ContactFormのフォーム箇所にコピペしてお使いください。

[submit class:amzn-img-btn "プレゼントを受け取る"]

CSS

お使いのWordPressテーマ(または子テーマ)にコピペしてください。
送信ボタンのみのCSSです。

/* Amazon風画像ボタン */
input.amzn-img-btn,
input.amzn-img-btn:hover,
input.amzn-img-btn:active {
    background: url("画像のURL") center center no-repeat;
}

input.amzn-img-btn {
    border: 0px;
    width: 100%;
    height: 100px;
    text-indent: -9999px;
}

input.amzn-img-btn:hover,
input.amzn-img-btn:active {
	cursor: pointer;
	opacity: 0.75;
	-moz-opacity: 0.75;
	filter: alpha(opacity=75);
}

送信ボタン以外のCSSデザインはこちらの記事をどうぞ。

主にSimplicity で使えるContact Form 7用CSSデザインテンプレートを掲載していますが、Simplicity以外のWo...