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

cf7 SANGO コンタクトフォーム

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

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

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

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

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

完成イメージ

コンタクトフォーム7カスタマイズ完成イメージ

Contact Form7に画像を表示

①画像を作る

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

メディバンペイント

メディバンペイント

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

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

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

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

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

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

参考 「透過」とは?メディバンペイント(MediBang Paint)
ぽむ
メディバンペイントの場合

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

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

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

りんご
使い方は公式サイトに載っていますので、読んでみてくださいね。
参考 イラストを描こう 初心者向け(1) -下描き-メディバンペイント(MediBang Paint)

コンタクトフォーム7で画像を表示させる

②画像をBOXで囲む

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

 

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

コンタクトフォーム7カスタマイズ完成イメージ

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

コンタクトフォーム7グラデーションバージョン

スポンサーリンク

CSSで装飾する

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

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

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;/*影*/
}

追加CSSを挿入する場所

「外観」→「カスタマイズ」の一番下「追加CSS」に挿入します。

子テーマのスタイルシートに入力すると、アップデートの際、バックアップが必要となります。

追加CSSはアップデートでも消えることはないので、安心です。

ContactForm7

りんご
見出しのCSSやその他のカスタマイズCSSも「追加CSS」へ挿入しておくと消えないですよ
スポンサーリンク

画像(アイコン)に関して

今回私が作った画像に挿入されているアイコンはイラストレーターさんに依頼して作ったものです。

ココナラ アイコン ココナラでブログ用アイコン依頼!プロに任せて安心

私はイラストレーターさんと最初にお話をして、バナーへの利用許可を取っています。

中には利用できるのはアイコンのみという、イラストレーターさんもいらっしゃいます。

必ず確認してから、使用するようにしましょう。

さめはだ舞子(@samehada_maiko2)さんの記事がとても参考になります。

参考 納品したイラストが第三者に!?二次創作・販売された話 さめって参る!

イラストレーターさんも、依頼する側もしっかりと読んで、トラブルにならないようにしましょうね。

おわりに

PORIPU開発者のまっさーさんのブログで、たくさんのカスタマイズを公開されています。

ぜひ、参考にしてくださいね。

参考 マサオカブログ生活の質を少し上げるマガジン

SANGO ダウンロード

PORIPU ダウンロード

\開発者まっさーさんにビール(投げ銭)を送る/
PORIPU 開発支援

SANGOの記事は他にも!
SANGO PORIPU 【ワードプレス有料テーマ】SANGOとPORIPUの魅力! SANGO PORIPU 【リンク集】SANGO・PORIPUユーザーのご紹介

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です