【Contact Form7・SANGO用】コンタクトフォームカスタマイズ

お問い合わせフォームContact Form7を自分だけのオリジナルにカスタマイズしてみませんか。

りんご

コンタクトフォームをSANGOのボックスで囲むだけで、かわいいデザインになりますよ

使うのはフリーのお絵かきソフトとSANGOのボックスです。

CSSを追加するだけで、さらにワンランク上のフォームの完成です。

注意

SANGOバーションのCSSを公開しています。
今回はショートコードを使って作るフォームですので、一部の環境で動作します。
導入は自己責任でお願いします。

完成イメージ

Contact Form7に画像を表示
- ①画像を作る
- ②画像をBOXで囲む
CSSで装飾する
追加CSSを挿入する場所
画像（アイコン）に関して
おわりに

Contact Form7に画像を表示

①画像を作る

私が使用したソフトは【メディバンペイント】で、フリーで使用できるものです。

メディバンペイント

MediBang inc.無料posted withアプリーチ

参考メディバンペイント Pro 使い方メディバンペイント(MediBang Paint)

その他にも有料・無料で透過画像が作れるソフトがありますのでお好みで使用してください。

サイズは800ピクセル×300ピクセルで作りました。

りんご

私はコンタクトフォームを1カラムで表示させているので、このサイズにしましたが、テーマやカラムに合わせて調節してみてください。

ソフトでサイズを決めたら、透過背景に設定します。

参考「透過」とは？メディバンペイント(MediBang Paint)

ぽむ

メディバンペイントの場合

左上の市松模様を選択し、塗りつぶしツール（バケツの絵）で、画像を透過にします。（最初の画面で透過背景になっている場合はそのままで）

あとは好きな画像や文字を配置していきます。

りんご

使い方は公式サイトに載っていますので、読んでみてくださいね。

参考イラストを描こう　初心者向け(1) -下描き-メディバンペイント(MediBang Paint)

②画像をBOXで囲む

Contact Form7で作成したショートコードと画像をボックスで囲みます。

お好みで送信ボタンやフォームの色を変えて完成です。

ぽむ

透過背景で作るとストライプやグラデーションのBOXでも違和感なく作れますよ。

CSSで装飾する

送信ボタンの幅を変更するCSS

そのままだと、スマホ表示の時に送信ボタンが崩れるので、まっさーさんに教えていただいたCSSを追加します。

ありがとうございます(*´ω｀*)
ボックスは想定外なのでなんとも言えませんが…これでボタン幅縮めてみますか？？
.wpcf7 input[type="submit"] {
padding: .5em 4em;
}

— まっさー (@iMassa07) June 11, 2018

CSS

/*--- ContactForm7 送信ボタン幅調整 ---*/
.wpcf7 input[type="submit"] {
padding: .5em 4em;
}

送信ボタンの色を変えるCSS

送信ボタンカスタマイズCSSは「PORIPU 公式サイト」で公開されています。

参考 ContactForm7の問い合わせボタンのデザインPORIPU

テキストエリアの色や線の太さを変えるCSS

テキストエリアの各種設定は以下のCSSを追加します。

ご自身のブログに合った設定に変更してください。

CSS

/*--- ContactForm7 テキストエリア調整 ---*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
background-color: #fff;/*背景色*/
color: #333;/*文字色*/
width: 100%;/*幅*/
border: 1px solid #ddd;/*線の色*/
padding: 0.5em;/*内側の高さ*/
box-shadow: 1px 1px 2px rgba(0,0,0,.1) inset;/*影*/
}